/* ============================================================
   Software Clínica — tema exclusivo del Plan Medio.
   Se carga DESPUÉS de app.css (y, en login.html/reporte-paciente.html,
   después de su <style> local) y lo sobrescribe donde corresponde:
   fondo negro-verdoso, acento dorado, serif editorial Fraunces,
   tarjetas con tilt 3D + glow, orbes de fondo. Nada de esto existe
   en Básico — app.css ya está escrito 100% en var(--ink)/var(--bg)/
   var(--brand)/etc, así que redefinir las custom properties repinta
   sidebar, topbar, cards, tablas, badges, modal, calendario y
   odontograma sin tocar un selector estructural.
   ============================================================ */

:root{
  --ink:#F1EDE4; --ink-soft:rgba(241,237,228,.62); --line:rgba(255,255,255,.10);
  --bg:#08120D; --panel:#0F231A;
  --brand:#C9A876; --brand-dark:#B08F5C; --brand-soft:rgba(201,168,118,.16);
  --ok:#4ADE80; --ok-soft:rgba(74,222,128,.12); --warn:#F4C563; --warn-soft:rgba(244,197,99,.12);
  --danger:#F87171; --danger-soft:rgba(248,113,113,.12);
  --radius:16px; --shadow:0 18px 40px -18px rgba(0,0,0,.55); --font-head:'Fraunces','Segoe UI',serif;
  color-scheme:dark;
}

/* Fondo con glow sutil (mismo truco que thebrothersapp.com / premium-theme.css,
   Edge-safe porque no usa backdrop-filter — ver memoria del proyecto) */
body{
  background:radial-gradient(circle at 12% -10%, rgba(63,174,130,.14), transparent 55%), var(--bg);
}

.sidebar,.topbar,.modal{background:var(--panel)}

/* Titulares y números en serif editorial */
.stat-card .num,
.topbar h1,
.card-head h2,
.modal-head h3{
  font-family:var(--font-head);
}

/* Texto oscuro sobre fondo dorado (evita blanco-sobre-dorado, bajo contraste) */
.btn-primary{color:#08120D}

/* Estado activo del sidebar en dorado (más brillo que --brand-dark para
   que resalte sobre el panel oscuro) */
.sidebar nav a.active{color:var(--brand)}

/* Selección de calendario: fondo dorado ya llega vía var(--brand);
   se fuerza el texto oscuro por el mismo motivo que btn-primary */
.cal-day.selected{color:#08120D}
.cal-day.selected .dot{background:#08120D}

/* ---------- Glow orbs de fondo (fijos, filter:blur — mismo patrón
   que .prm-orb en demos/assets/premium-theme.css) ---------- */
.medio-orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.medio-orb{position:absolute;border-radius:50%;filter:blur(70px)}
.medio-orb-1{
  width:520px;height:520px;left:-10%;top:-15%;
  background:radial-gradient(circle,rgba(201,168,118,.35),transparent 68%);
}
.medio-orb-2{
  width:460px;height:460px;right:-8%;top:15%;
  background:radial-gradient(circle,rgba(74,222,128,.16),transparent 68%);
}

/* ---------- Tilt 3D + glow al hover — solo tarjetas de KPI/estadísticas,
   no tarjetas con tablas (mismo patrón que .team-card/.testi-card en
   premium-theme.css, portado en medio-tilt.js) ---------- */
.stat-card,.kpi-card{
  transform-style:preserve-3d;position:relative;
  transition:transform .12s ease,box-shadow .3s ease,border-color .3s ease;
}
.stat-card::after,.kpi-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(201,168,118,.25), transparent 65%);
  opacity:0;transition:opacity .35s ease;
}
.stat-card:hover::after,.kpi-card:hover::after{opacity:1}
@media (prefers-reduced-motion: reduce){
  .stat-card,.kpi-card{transition:none}
  .stat-card::after,.kpi-card::after{transition:none}
}

/* ============================================================
   Ajustes de contraste — NO estaban en la lista de tokens/reglas
   pedida, pero son necesarios para que el swap de tokens no rompa
   la app (ver nota de "decisiones por ambigüedad" en el reporte):

   1) .field input/select/textarea y .search-box input en app.css
      fijan color:var(--ink) pero NUNCA fijan un background — con
      ink ahora claro (#F1EDE4), el texto quedaría casi invisible
      sobre el fondo blanco por defecto del navegador.
   2) .toast usa background:var(--ink) (antes oscuro sobre fondo
      claro); con ink claro se vuelve casi blanco sobre blanco.
   3) login.html y reporte-paciente.html tienen su propio <style>
      local que reutiliza los mismos nombres de variable
      (--ink/--bg/--line/--brand) pero con dos contenedores de
      fondo SÓLIDO hardcodeado (.box, .sheet en background:#fff)
      que no dependen de var(--panel) — con ink claro, su texto
      quedaría casi invisible sobre ese blanco fijo.
   4) El botón de login (#submitBtn) no usa la clase .btn-primary,
      así que el fix de contraste dorado no lo alcanza por selector.
   ============================================================ */
.field input, .field select, .field textarea, .search-box input{
  background:var(--panel); color:var(--ink);
}
.field input::placeholder, .search-box input::placeholder{color:var(--ink-soft)}
.toast{background:var(--panel); color:var(--ink); border:1px solid var(--line)}
.box{background:var(--panel); border-color:var(--line)}
.sheet{background:var(--panel)}
#submitBtn{color:#08120D}

/* 5) reporte-paciente.html: .toolbar tiene background:#fff hardcodeado
      y su link/botón hardcodean color — con ink claro y brand dorado,
      quedaban casi invisibles sobre ese blanco fijo. */
.toolbar{background:var(--panel)}
.toolbar a{color:var(--ink)}
.toolbar button{color:#08120D}

/* 6) .odo-tooth (app.css) fija background:#fff + color:var(--ink-soft)
      para el estado "sano" por defecto (los demás estados —caries,
      tratado, ausente, corona— ya traen su propio color hardcodeado
      y no se ven afectados). Con ink-soft claro sobre blanco fijo,
      el número de diente sano quedaba casi invisible. */
.odo-tooth{background:var(--panel); color:var(--ink)}

/* ============================================================
   Selector de sede activa (multi-sucursal, Fase 1) — inyectado en
   .topbar por assets/sucursal-selector.js SOLO cuando el usuario tiene
   visibilidad de más de una sede. Reusa la misma paleta de .field
   input/select de app.css, en versión compacta para caber en la barra
   superior. Se permite flex-wrap en .topbar porque este elemento nuevo
   puede sumar un tercer item entre el título y el botón principal de
   la página (o quedar solo si esa página no tiene botón principal).
   ============================================================ */
.topbar{flex-wrap:wrap;row-gap:10px}
.sede-selector-wrap{display:flex;align-items:center;gap:8px}
.sede-selector-wrap label{font-size:.78rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
.sede-selector-wrap select{
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:.85rem;
  font-family:inherit;color:var(--ink);background:var(--panel);cursor:pointer;
}
.sede-selector-wrap select:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}

/* ============================================================
   Reportes avanzados (Fase 2) — KPI grid, donuts SVG animados y
   barras horizontales. Estructura calcada de
   demos/odontologia-premium/panel.html (clases .kpi-grid/.kpi-card/
   .kpi-donut/.donut-wrap/.donut-ring/.donut-track/.donut-fill/
   .donut-value y .bar-row/.bar-track/.bar-fill de
   demos/assets/dental-demo.css), repintada con los tokens que ya
   existen arriba (--panel/--ink/--ink-soft/--brand/--line/--radius/
   --shadow/--font-head) en vez de inventar una paleta nueva. La
   animación de reveal (ancho de barra / stroke-dashoffset del donut)
   vive en assets/medio-charts.js, no aquí.
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media (max-width:900px){.kpi-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.kpi-grid{grid-template-columns:1fr}}
.kpi-card .label{font-size:.8rem;color:var(--ink-soft);font-weight:600}
.kpi-card .value{font-family:var(--font-head);font-size:1.6rem;margin:6px 0 2px;color:var(--ink)}
.kpi-card .delta{font-size:.76rem;font-weight:700;color:var(--ok)}
/* .stat-card ya trae fondo/borde/radius/sombra de app.css, y ambos ya
   traen el tilt 3D de más arriba en este archivo (Fase 0). .kpi-card
   nunca se usó antes de esta fase, así que app.css no le define
   fondo/borde/padding — se agrega aquí para que se vea como tarjeta. */
.kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}

/* app.css solo define ".empty-row td" (para filas de tabla vacías);
   reportes.html reusa el mismo look de "sin datos" fuera de una tabla
   (gráficas/donuts/barras vacíos), así que se agrega la variante para
   párrafo suelto aquí. */
p.empty-row{text-align:center;color:var(--ink-soft);padding:32px 20px;margin:0}

.donuts-row{display:flex;flex-wrap:wrap;gap:26px}
.kpi-donut{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.donut-wrap{position:relative;width:84px;height:84px;margin:6px 0}
.donut-ring{width:84px;height:84px;transform:rotate(-90deg)}
.donut-track{fill:none;stroke:var(--line);stroke-width:8}
.donut-fill{fill:none;stroke:var(--brand);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)}
.donut-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink)}

.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:.85rem}
.bar-row .name{width:150px;flex:none;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .amount{width:90px;flex:none;text-align:right;font-weight:600;color:var(--ink)}
.bar-track{flex:1;height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:var(--brand);border-radius:999px;width:0%;transition:width 1.1s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion: reduce){
  .bar-fill,.donut-fill{transition:none}
}

@media (max-width:600px){
  .bar-row .name{width:100px}
}

/* ============================================================
   Recordatorios semi-automáticos (Fase 3) — badge de conteo en el
   sidebar y vista previa del mensaje en recordatorios.html.
   ============================================================ */

/* .sidebar nav a ya es flex (app.css); el badge se pega a la derecha
   del link con margin-left:auto sin tocar el selector base. Gris
   neutro a propósito (no rojo/alarma): un recordatorio pendiente es
   trabajo normal del día, no un error. */
.badge-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;margin-left:auto;flex:none;
  border-radius:99px;font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.14);color:var(--ink-soft);border:1px solid var(--line);
}

.mensaje-preview{
  background:var(--brand-soft);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:.85rem;color:var(--ink);white-space:pre-wrap;line-height:1.45;
}

/* ============================================================
   Portal del paciente (Fase 4) — layout propio, deliberadamente MÁS
   SIMPLE que el panel de staff: una franja superior con 3 links
   (Inicio/Historial/Pagos) en vez del `.sidebar` completo de app.css,
   que trae Agenda/Pacientes/Pagos/Equipo/Reportes/Sucursales/
   Recordatorios — nada de eso le corresponde ver a un paciente.
   Se construye con clases nuevas (.portal-*) en vez de reusar
   `.sidebar`/`.app` de app.css a propósito: evita repetir el bug de
   `height:100vh` en un elemento `position:fixed` que ya costó una
   sesión completa de depuración en el panel de Básico (ver memoria
   del proyecto) — aquí no hay ningún elemento fijo a pantalla completa,
   solo un header normal en el flujo del documento.
   ============================================================ */
.portal-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 28px;border-bottom:1px solid var(--line);background:var(--panel);
}
.portal-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.02rem;flex:none}
.portal-brand img{width:30px;height:30px;object-fit:contain;border-radius:8px}
.portal-nav{display:flex;gap:4px;flex-wrap:wrap}
.portal-nav a{
  padding:8px 14px;border-radius:9px;color:var(--ink-soft);text-decoration:none;
  font-size:.9rem;font-weight:600;
}
.portal-nav a:hover{background:var(--bg)}
.portal-nav a.active{background:var(--brand-soft);color:var(--brand)}
.portal-user{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--ink-soft);flex:none}
.portal-content{margin:0 auto}
@media (max-width:600px){
  .portal-topbar{padding:14px 16px}
  .portal-content{padding:16px}
}