/* ============================================================
   misdocumentos.com — Tema visual compartido
   Enlaza este archivo en cada app:  <link rel="stylesheet" href="theme.css">
   Usa las clases con prefijo .mdc- para no chocar con el CSS propio de cada app.
   ============================================================ */

:root{
  --mdc-bg:#eef4fb;
  --mdc-card:#ffffff;
  --mdc-card2:#f7fafd;
  --mdc-accent:#0ea5e9;
  --mdc-accent2:#0284c7;
  --mdc-text:#0f2747;
  --mdc-muted:#5b6b82;
  --mdc-border:#d8e2ef;
  --mdc-radius:14px;
  --mdc-shadow:0 4px 14px rgba(15,39,71,.06);
  --mdc-font:'Segoe UI',system-ui,-apple-system,sans-serif;
}

/* Fondo y tipografía base de la app */
.mdc-app{
  font-family:var(--mdc-font);
  background:linear-gradient(160deg,#eef4fb 0%,#dde9f7 100%);
  color:var(--mdc-text);
  min-height:100vh;margin:0;
}

/* Barra superior estándar */
.mdc-topbar{
  display:flex;align-items:center;gap:16px;
  background:var(--mdc-card);border-bottom:1px solid var(--mdc-border);
  padding:12px 22px;box-shadow:var(--mdc-shadow);position:sticky;top:0;z-index:50;flex-shrink:0;
}
.mdc-topbar.flow{position:static}
.mdc-topbar .mdc-logo{display:flex;align-items:center;gap:0;font-weight:700;font-size:18px;letter-spacing:-.3px}
.mdc-topbar .mdc-logo .dot{color:var(--mdc-accent)}
.mdc-topbar .mdc-logo img{height:30px;width:auto;margin-right:10px}
.mdc-topbar .mdc-appname{font-size:15px;color:var(--mdc-muted);font-weight:600;
  padding-left:16px;margin-left:2px;border-left:1px solid var(--mdc-border)}
.mdc-topbar .mdc-spacer{flex:1}
.mdc-topbar .mdc-back{color:var(--mdc-accent);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.mdc-topbar .mdc-back:hover{text-decoration:underline}
.mdc-topbar .mdc-userchip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mdc-muted)}
.mdc-topbar .mdc-userchip .mdc-av{width:30px;height:30px;border-radius:50%;
  background:var(--mdc-accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;overflow:hidden}
.mdc-topbar .mdc-userchip .mdc-av img{width:100%;height:100%;object-fit:contain;background:#fff}

/* Contenedor de contenido */
.mdc-wrap{max-width:1200px;margin:0 auto;padding:28px 22px}

/* Botones */
.mdc-btn{display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border:none;border-radius:10px;cursor:pointer;
  background:var(--mdc-accent);color:#fff;font-size:14px;font-weight:600;font-family:var(--mdc-font)}
.mdc-btn:hover{background:var(--mdc-accent2)}
.mdc-btn.ghost{background:transparent;color:var(--mdc-accent);border:1px solid var(--mdc-border)}
.mdc-btn.ghost:hover{border-color:var(--mdc-accent);background:var(--mdc-card2)}

/* Tarjetas */
.mdc-card{background:var(--mdc-card);border:1px solid var(--mdc-border);
  border-radius:var(--mdc-radius);box-shadow:var(--mdc-shadow);padding:22px}

/* Campos */
.mdc-inp{width:100%;padding:10px 12px;border:1px solid var(--mdc-border);
  border-radius:10px;font-size:14px;background:#fff;color:var(--mdc-text);font-family:var(--mdc-font)}
.mdc-inp:focus{outline:none;border-color:var(--mdc-accent)}
.mdc-lbl{display:block;font-size:13px;color:var(--mdc-muted);margin:10px 0 4px}

/* Etiquetas */
.mdc-badge{font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px;
  border-radius:999px;text-transform:uppercase}
.mdc-badge.free{background:#dcfce7;color:#15803d}
.mdc-badge.paid{background:#e0f2fe;color:#0369a1}

/* Títulos */
.mdc-h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin:0 0 4px}
.mdc-h2{font-size:17px;font-weight:600;margin:0 0 4px}
.mdc-sub{color:var(--mdc-muted);font-size:14px}

/* Tablas */
.mdc-table{width:100%;border-collapse:collapse;font-size:14px}
.mdc-table th{text-align:left;color:var(--mdc-muted);font-weight:600;
  padding:10px 12px;border-bottom:2px solid var(--mdc-border)}
.mdc-table td{padding:10px 12px;border-bottom:1px solid var(--mdc-border)}
.mdc-table tr:hover td{background:var(--mdc-card2)}