/* ==============================================================================
 * assets/style.css
 * ==============================================================================
 * Hoja de estilos ÚNICA de todo el sistema (panel de administración, panel
 * de médicos, y páginas públicas de valoración) — todas las páginas la
 * enlazan con <link rel="stylesheet" href="assets/style.css">.
 *
 * Contiene, en este orden:
 *   1. Variables de color (tema oscuro "violeta EBEN") y fondo con textura
 *   2. Estilos base: header público, contenedor principal, textos de ayuda
 *   3. Componentes de formulario: inputs, botones, tarjetas de opción
 *   4. Selector de fotos, calendario de citas, franjas horarias
 *   5. Selector de idioma, campo de contraseña con ojo
 *   6. Barra superior (topbar) y menús desplegables del panel administrativo
 *
 * Las variables con el comentario "alias del sistema anterior" existen para
 * que el HTML/PHP más viejo (que todavía usa nombres como --maroon o
 * --porcelain, de una paleta anterior tipo "clínica clásica") siga
 * funcionando sin tener que reescribirlo, apuntando ya a los colores
 * nuevos del tema violeta.
 * ============================================================================== */

/* ---------------------------------------------------------------------------
 * SECCIÓN 1 — Variables de color y fondo con textura
 * ------------------------------------------------------------------------- */
:root{
  --bg-0:#08070f;
  --bg-1:#0B0B1D;
  --bg-2:#151733;
  --bg-3:#1E1B3D;
  --violet:#5E35FF;
  --violet-2:#7D5CFF;
  --violet-deep:#4526D6;
  --lilac:#D7D0FF;

  /* alias del sistema anterior, para que todo el HTML existente siga funcionando */
  --ink:#F7F8FF;
  --maroon:#5E35FF;
  --maroon-deep:#4526D6;
  --rose:#D7D0FF;
  --rose-soft:rgba(94,53,255,0.16);
  --porcelain:rgba(255,255,255,0.07);
  --white:#F7F8FF;
  --text-dim:rgba(247,248,255,0.6);
  --text-faint:rgba(247,248,255,0.42);
  --line:rgba(255,255,255,0.14);
  --glass-border:rgba(255,255,255,0.14);
  --glass-fill:rgba(255,255,255,0.055);
  --error:#FF6B57;
  --success:#4ADE9A;
  --warn:#FFB03C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ height:100%; }
/* Red de seguridad responsiva: sin importar qué tan angosta o ancha sea la
   pantalla, la página nunca debe generar una barra de scroll horizontal
   por accidente (un elemento fijo, una tabla ancha, una imagen grande,
   etc.). Los widgets que sí necesitan su propio scroll horizontal a
   propósito (como la grilla de la Agenda) lo declaran ellos mismos con
   `overflow:auto` en su propio contenedor, así que esto no les afecta. */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, canvas{ max-width:100%; height:auto; }
table{ max-width:100%; }
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(94,53,255,0.30), transparent 60%),
    radial-gradient(900px 600px at 105% 15%, rgba(125,92,255,0.22), transparent 55%),
    radial-gradient(800px 800px at 50% 115%, rgba(30,27,61,0.55), transparent 60%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  background-attachment:fixed;
  line-height:1.55;
  min-height:100vh;
  padding-top:80px; /* respaldo antes de que el JS del topbar mida su alto real; ../assets/style.css lo sobreescribe */
}
body:not(:has(.gm-topbar)){ padding-top:0; }
h1,h2,h3{font-family:'Space Grotesk', sans-serif; font-weight:600;}
.mono{font-family:'Inter', sans-serif; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}

/* fondo tipo rejilla sutil, igual a las referencias de diseño */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(circle at 30% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(circle at 30% 0%, black 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ---------------------------------------------------------------------------
 * SECCIÓN 2 — Header público y contenedor principal
 * ------------------------------------------------------------------------- */
.gm-header{border-bottom:1px solid var(--line); padding:16px 24px; position:relative; z-index:1; background:rgba(255,255,255,0.04); backdrop-filter:blur(20px);}
.gm-logo{height:40px; display:block;}
.gm-main{max-width:720px; margin:0 auto; padding:44px 20px 80px; position:relative; z-index:1;}

.eyebrow{font-family:'Inter', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--violet-2); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--violet-2);}

.step-dots{display:flex; gap:10px; justify-content:center; margin-bottom:34px;}
.step-dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-family:'Inter', sans-serif; font-weight:700; background:var(--glass-fill); border:1px solid var(--glass-border); color:var(--text-dim);}
.step-dot.active,.step-dot.done{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(94,53,255,.4);}
.step-line{width:20px; height:1px; background:var(--line); align-self:center;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 3 — Componentes de formulario: inputs, botones, tarjetas
 * ------------------------------------------------------------------------- */
.gm-input{width:100%; padding:13px 16px; border:1px solid rgba(255,255,255,0.12); border-radius:13px; font-family:'Inter', sans-serif; font-size:14px; color:var(--ink); background:rgba(255,255,255,0.05); outline:none; resize:vertical; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;}
.gm-input::placeholder{color:rgba(247,248,255,0.32);}
.gm-input:focus{border-color:var(--violet-2); background:rgba(94,53,255,0.08); box-shadow:0 0 0 4px rgba(94,53,255,0.16);}
.field{margin-bottom:18px;}
.field label{display:block; font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em; color:rgba(247,248,255,0.8); margin-bottom:8px;}
.field .hint{font-size:11.5px; color:var(--text-dim); margin-top:5px;}

.btn-primary{display:inline-flex; align-items:center; gap:8px; justify-content:center; background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; border:none; border-radius:13px; padding:14px 22px; font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px; letter-spacing:0.02em; cursor:pointer; box-shadow:0 12px 28px rgba(94,53,255,0.38), inset 0 1px 0 rgba(255,255,255,0.3); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease, background .18s ease;}
.btn-primary:hover:not(:disabled){transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 16px 34px rgba(94,53,255,0.48), inset 0 1px 0 rgba(255,255,255,0.3);}
.btn-primary:active{transform:translateY(0) scale(.99);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-outline{display:inline-flex; align-items:center; gap:8px; justify-content:center; background:rgba(255,255,255,0.05); color:var(--ink); border:1px solid rgba(255,255,255,0.18); border-radius:11px; padding:11px 20px; font-family:'Inter', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em; cursor:pointer; transition:background .15s ease, border-color .15s ease;}
.btn-outline:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.32);}
.btn-back{display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; color:var(--text-dim); font-family:'Inter', sans-serif; font-size:12px; font-weight:600; letter-spacing:0.02em; margin-bottom:22px; padding:0;}
.btn-back:hover{color:var(--ink);}

.tipo-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:600px){ .tipo-grid{grid-template-columns:1fr;} }
.tipo-card{text-align:left; border:1px solid var(--glass-border); border-radius:16px; padding:26px; background:var(--glass-fill); backdrop-filter:blur(18px); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; width:100%; box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.tipo-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -14px rgba(94,53,255,.45), inset 0 1px 0 rgba(255,255,255,0.25); border-color:var(--violet-2);}
.tipo-icon{width:44px; height:44px; border-radius:50%; background:rgba(125,92,255,0.16); display:grid; place-items:center; margin-bottom:16px; color:var(--violet-2);}
.tipo-card h3{font-size:17px; font-weight:600; margin-bottom:8px; color:var(--ink);}
.tipo-card p{font-size:13.5px; color:var(--text-dim); margin-bottom:14px;}
.tipo-cta{display:inline-flex; align-items:center; gap:6px; font-family:'Inter', sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--violet-2);}

/* ---------------------------------------------------------------------------
 * SECCIÓN 4 — Selector de fotos, calendario de citas, franjas horarias
 * ------------------------------------------------------------------------- */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:600px){ .photo-grid{grid-template-columns:1fr;} }
.photo-slot input{display:none;}
.photo-box{width:100%; aspect-ratio:3/4; border-radius:14px; border:1.5px dashed rgba(255,255,255,0.2); background:rgba(255,255,255,0.04); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden; padding:0;}
.photo-box.filled{border:1px solid var(--violet-2); background:none;}
.photo-box img{width:100%; height:100%; object-fit:cover;}
.photo-box .overlay{position:absolute; inset:0; background:rgba(11,11,29,.65); opacity:0; display:grid; place-items:center; color:#fff; font-size:11px; font-family:'Inter', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; transition:opacity .15s ease;}
.photo-box:hover .overlay{opacity:1;}
.photo-hint{font-size:10.5px; color:var(--text-dim); text-align:center; margin-top:6px;}
.photo-label{font-family:'Inter', sans-serif; font-size:11.5px; font-weight:600; color:var(--violet-2); text-align:center; padding:0 8px;}

.notice{padding:14px 16px; background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:12px; font-size:12px; color:var(--text-dim); display:flex; gap:10px; align-items:flex-start; margin-top:20px;}

.consent{display:flex; gap:10px; align-items:flex-start; margin:20px 0; font-size:12.5px; color:var(--text-dim);}
.consent input{margin-top:3px;}
.consent a{color:var(--violet-2);}

.error-text{color:var(--error); font-size:12.5px; margin-top:10px;}

.success-wrap{max-width:460px; margin:30px auto 0; text-align:center;}
.success-icon{width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, var(--violet), var(--violet-deep)); display:grid; place-items:center; margin:0 auto 20px; color:#fff; font-size:26px; box-shadow:0 12px 28px rgba(94,53,255,.4);}

.spin{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.calendarioMes{border:1px solid var(--glass-border); border-radius:16px; padding:16px; background:var(--glass-fill); backdrop-filter:blur(16px);}
.calMesHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.calMesHeader .calMesTitulo{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; text-transform:capitalize;}
.calMesNav{background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; color:var(--ink);}
.calMesNav:hover{border-color:var(--violet-2);}
.calMesNav:disabled{opacity:.3; cursor:default;}
.calGrid{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px;}
.calDiaSemana{text-align:center; font-size:10.5px; font-family:'Inter',sans-serif; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-faint); padding-bottom:6px;}
.calCelda{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; cursor:default; color:var(--text-dim); position:relative;}
.calCelda.vacia{visibility:hidden;}
.calCelda.disponible{background:rgba(94,53,255,0.16); color:var(--lilac); cursor:pointer; font-weight:600;}
.calCelda.disponible:hover{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff;}
.calCelda.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; font-weight:700;}
.dia-btn{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); border-radius:10px; padding:10px 4px; cursor:pointer; transition:border-color .15s ease, background .15s ease;}
.dia-btn:hover{border-color:var(--violet-2);}
.dia-btn.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color:transparent;}
.dia-btn.selected .dia-nombre, .dia-btn.selected .dia-num, .dia-btn.selected .dia-mes{color:#fff;}
.dia-nombre{font-family:'Inter', sans-serif; font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-dim); letter-spacing:.03em;}
.dia-num{font-family:'Space Grotesk', sans-serif; font-size:16px; font-weight:600; color:var(--ink);}
.dia-mes{font-size:9.5px; color:var(--text-dim);}

.franjas{flex-wrap:wrap; gap:8px; margin-top:14px;}
.franja-btn{border:1px solid var(--glass-border); background:rgba(255,255,255,0.05); border-radius:20px; padding:8px 14px; font-size:12.5px; cursor:pointer; color:var(--ink); transition:border-color .15s ease, background .15s ease, color .15s ease;}
.franja-btn:hover{border-color:var(--violet-2);}
.franja-btn.selected{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color:transparent; color:#fff;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 5 — Selector de idioma y campo de contraseña con ojo
 * ------------------------------------------------------------------------- */
.lang-switch{display:flex; gap:4px;}
.lang-link{font-size:11px; font-family:'Inter', sans-serif; font-weight:600; letter-spacing:.02em; color:var(--text-dim); text-decoration:none; padding:5px 9px; border-radius:5px; border:1px solid transparent;}
.lang-link.active{background:var(--rose-soft); color:var(--lilac); border-color:var(--violet-2);}
.lang-link:hover{border-color:var(--line);}

.password-wrap{position:relative;}
.password-wrap .gm-input{padding-right:44px;}
.toggle-pass{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:6px; color:rgba(247,248,255,0.45); display:flex; align-items:center; justify-content:center; border-radius:5px;}
.toggle-pass:hover{color:var(--lilac); background:none;}
.toggle-pass svg{width:18px; height:18px;}

/* ---------------------------------------------------------------------------
 * SECCIÓN 6 — Barra superior (topbar) y menús desplegables del panel
 * ------------------------------------------------------------------------- */
/* Header unificado del panel: logo + navegacion centrada + usuario */
.gm-topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px; border-bottom:1px solid var(--line);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  flex-wrap:wrap; gap:12px;
}
.gm-topbar-logo{flex-shrink:0;}
.gm-topbar-logo img{height:clamp(42px,5vw,58px); max-width:240px; object-fit:contain; display:block;}
.gm-topbar-nav{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  justify-content:center; flex:1;
}
.gm-topbar-nav a{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-family:'Inter', sans-serif; font-weight:600;
  letter-spacing:.01em; color:var(--text-dim);
  text-decoration:none; padding:9px 14px; border-radius:11px; white-space:nowrap;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-topbar-nav a:hover{background:var(--glass-fill); color:var(--ink);}
.gm-topbar-nav a.active{
  background: linear-gradient(135deg, rgba(94,53,255,0.28), rgba(125,92,255,0.14));
  border-color: rgba(125,92,255,0.4);
  color:var(--ink);
}
.gm-topbar-user{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.gm-topbar-user-info{display:flex; align-items:center; gap:8px; border-radius:20px; padding:4px 8px 4px 4px; transition:background .15s;}
.gm-topbar-user-info:hover{background:var(--glass-fill);}
.gm-topbar-avatar{
  position:relative; width:32px; height:32px; border-radius:50%;
  background: linear-gradient(140deg, var(--violet), var(--violet-deep)); color:#fff; display:grid; place-items:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; flex-shrink:0;
  box-shadow: 0 6px 16px rgba(94,53,255,.4);
}
.gm-topbar-presencia{
  position:absolute; bottom:-2px; right:-2px; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--bg-1);
}
.gm-topbar-greeting{font-size:13px; color:var(--ink); line-height:1.2; text-align:left;}
.gm-topbar-greeting strong{font-weight:700; display:block; text-align:left;}
.gm-topbar-greeting span{display:block; font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; font-family:'Inter',sans-serif; font-weight:600; text-align:left;}
@media(max-width:900px){
  .gm-topbar{justify-content:flex-start;}
  .gm-topbar-nav{justify-content:flex-start; order:3; width:100%;}
}
@media(max-width:520px){
  .gm-topbar-greeting{display:none;}
  .gm-topbar{padding:12px 14px;}
}

/* Submenu desplegable en la navegacion (ej. Todas las solicitudes > Solicitudes clasico) */
.gm-nav-dropdown{position:relative;}
.gm-nav-dropdown-menu{
  display:none; position:absolute; top:100%; left:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(32,29,66,0.97), rgba(10,10,26,0.99));
  border:1px solid rgba(255,255,255,0.2); border-radius:14px; box-shadow:0 24px 60px rgba(3,2,10,.6), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  min-width:200px; z-index:40; padding:6px; flex-direction:column;
}
.gm-nav-dropdown.abierto .gm-nav-dropdown-menu{display:flex;}
.gm-nav-dropdown-menu a{
  padding:9px 12px !important; border-radius:9px; justify-content:flex-start;
  color:rgba(247,248,255,0.78) !important;
}
.gm-nav-dropdown-menu a:hover, .gm-nav-dropdown-menu a.active{ color:var(--ink) !important; }

/* Dropdown elegante del icono de configuracion (engranaje) */
.gm-config-dropdown{position:relative;}
.gm-config-trigger{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; font-size:18px; text-decoration:none; color:var(--text-dim); transition:background .15s, color .15s;
  cursor:pointer; background:rgba(255,255,255,0.08); border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.gm-config-trigger:hover{background:rgba(255,255,255,0.16); color:var(--ink);}
.gm-config-trigger.active,
.gm-config-dropdown.abierto .gm-config-trigger{
  background:linear-gradient(135deg, var(--violet), var(--violet-deep));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 20px rgba(94,53,255,.4);
}
.gm-config-trigger.active:hover{background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff;}
.gm-config-menu{
  display:none; position:absolute; top:100%; margin-top:8px; right:0;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(32,29,66,0.97), rgba(10,10,26,0.99));
  border:1px solid rgba(255,255,255,0.25); border-radius:18px;
  min-width:270px; z-index:60; padding:10px; flex-direction:column; gap:2px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 24px 60px rgba(3,2,10,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.gm-config-dropdown.abierto .gm-config-menu{display:flex;}
.gm-config-item{
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:12px;
  text-decoration:none; color:var(--ink); transition:background .15s;
}
.gm-config-item:hover{background:rgba(255,255,255,0.08);}
.gm-config-item strong{
  display:block; font-size:13.5px; font-weight:600; font-family:'Inter',sans-serif;
  background:linear-gradient(135deg, #FFFFFF 30%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gm-config-item small{display:block; font-size:11.5px; color:rgba(247,248,255,0.55); margin-top:1px; font-family:'Inter',sans-serif;}
.gm-config-icono{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}

/* ==========================================================================
   MODALES — usados en todo el panel admin (confirmaciones, formularios
   dentro de una ventana flotante, detalles, etc). El estándar de referencia
   es el modal de "Nueva reserva" de la Agenda — cualquier modal nuevo
   debería reusar estas dos clases base, y solo agregar sus propias clases
   para el contenido específico (ver .modal-box-reserva en agendar-manual.php
   como ejemplo de una extensión: header/body/footer fijos con scroll interno).
   ========================================================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(8,8,20,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;place-items:center;padding:20px;z-index:80;}
.modal-overlay.open{display:grid;}
.modal-box{
  background:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%),
    linear-gradient(165deg, rgba(32,29,66,.98), rgba(10,10,26,.99));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 30px 80px rgba(3,2,10,.6), inset 0 1px 0 rgba(255,255,255,.14);
  border-radius:14px;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  max-width:480px;width:100%;padding:26px;color:var(--ink);
}

/* ==========================================================================
   TABLAS ("lista de tarjetas" con CSS grid) — usadas en Pacientes, Médicos,
   Servicios, Panel principal, Respuestas, Trazabilidad, etc. Todas las
   filas comparten una sola cuadrícula (definida en .table-wrap, con el
   grid-template-columns propio de cada página) para que las columnas
   siempre coincidan entre el encabezado y cada fila, sin importar cuánto
   contenido tenga cada una — cada página solo necesita declarar su propio
   `grid-template-columns` en su .table-wrap.
   ========================================================================== */
.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto;margin-bottom:16px;background:rgba(255,255,255,0.02);display:grid;}
.table-row{display:contents;}
.table-row>*{padding:14px 18px;border-top:1px solid var(--line);align-self:center;}
.table-row:first-child>*{border-top:none;}
.table-head>*{background:var(--porcelain);font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim);border:1px dashed var(--line);border-radius:10px;grid-column:1/-1;}

/* ==========================================================================
   Tarjetas de información dentro de un modal de detalle (usadas para
   mostrar edad/estado/procedimientos, etc. en el detalle de una solicitud)
   ========================================================================== */
.info-block{background:var(--porcelain);border-radius:8px;padding:12px 14px;}
.info-label{font-size:10.5px;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--maroon-deep);margin-bottom:4px;}
.photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.photos-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);}

/* Badge de estado pequeño (activo/inactivo, tipo de servicio, etc.) */
.badge{font-size:10.5px;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;display:inline-block;}