@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap');
/* ============================================================================
   Hoja compartida del sistema — Centro Médico Mónaco / Wittenberg
   ----------------------------------------------------------------------------
   Una sola hoja para todo lo que se repite en las ocho pantallas: la barra de
   arriba, los chips, los botones, las tablas, las pastillas de estado, los
   campos y las ventanas emergentes. Cada pantalla carga esta hoja PRIMERO y
   deja en su propio <style> (o su .css) nada más que lo suyo: su grilla, sus
   columnas, sus anchos de tabla.

   Dos reglas que no se aflojan:
     1. Nada se sale de la pantalla. La ventana nunca scrollea: scrollean los
        contenedores de adentro. Por eso html,body van con overflow:hidden.
     2. El fondo del contenido es claro. La única superficie oscura del
        sistema es la barra de arriba, que es el azul marino del membrete.

   Color: cada formulario tiene el suyo, y se declara en dos lugares que se
   escriben igual — `body[data-form="citas"]` pinta la pantalla entera, y
   `[data-f="citas"]` pinta un chip suelto de la barra. Los dos dejan --form y
   --form-suave listos para que el resto de las reglas los usen.
   ========================================================================= */

:root{
  /* --- marca --- */
  --marca:#0f2a44;          /* azul marino del membrete: barra de arriba y títulos */
  --marca2:#26323f;
  --marca-suave:#e8edf3;
  --marca2-suave:#e9edf1;

  /* --- acciones --- */
  --azul:#2f5d8a;           /* botón primario, acción principal */
  --azul-osc:#24486b;       /* el mismo, apretado */
  --azul-suave:#eaf2f9;
  --azul-vivo:#3b6df2;      /* acento, foco, chip activo */
  --azul-vivo-suave:#e7edfd;

  /* --- semáforo --- */
  --verde:#16a34a;  --verde-suave:#dcfce7;
  --ambar:#d97706;  --ambar-suave:#fef3c7;
  --rojo:#dc2626;   --rojo-suave:#fee2e2;
  --lila:#6d5bd0;   --lila-suave:#eef2ff;
  --teal:#0d9488;   --teal-suave:#ccfbf1;

  /* --- neutros --- */
  --tinta:#1c2430; --tinta2:#5b6675;
  --linea:#dde2e8; --fondo:#f4f6f8; --papel:#fff;
  --cabecera:#eef2f7;       /* fondo de los encabezados de tabla */
  --zebra:#fafbfd;          /* fila par */
  --gris:#5b6675; --gris-suave:#eef1f5;   /* pastilla "pendiente" */

  /* Alias: las hojas viejas escribían los mismos colores con otros nombres.
     Se dejan apuntados acá para no tener que reescribir cada regla de cada
     pantalla, y para que un solo cambio de paleta llegue a todas. */
  --line:var(--linea); --muted:var(--tinta2); --bg:var(--fondo); --paper:var(--papel);
  --ink:var(--tinta); --navy:var(--marca); --navy2:var(--marca2);
  --alto:var(--rojo); --alto-bg:var(--rojo-suave);
  --bajo:var(--azul); --bajo-bg:var(--azul-suave);
  --ok:var(--verde); --ok-bg:var(--verde-suave);
  --aviso:var(--ambar); --aviso-bg:var(--ambar-suave);
  --amarillo:var(--ambar); --amarillo-suave:var(--ambar-suave);
  --acento:var(--azul-vivo);
  --urg:var(--rojo); --urg-bg:var(--rojo-suave); --urg-line:#fecaca; --urg-txt:#991b1b;
  --hecho-bg:var(--verde-suave); --hecho-line:#bbf7d0; --hecho-txt:#166534;
  --etq-bg:var(--lila-suave); --etq-on:#e0e7ff; --etq-on-line:#c7d2fe;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06);

  /* Color de la pantalla. Lo pisa body[data-form=...]; esto es el de fábrica. */
  --form:var(--azul); --form-suave:var(--azul-suave);
}

/* --- un color por formulario ---------------------------------------------
   La misma tabla sirve para la pantalla (body[data-form]) y para cada chip
   suelto de la barra ([data-f]). */
body[data-form="agenda"],         [data-f="agenda"]        {--form:var(--azul);      --form-suave:var(--azul-suave)}
body[data-form="citas"],          [data-f="citas"]         {--form:var(--teal);      --form-suave:var(--teal-suave)}
body[data-form="ficha"],          [data-f="ficha"]         {--form:var(--verde);     --form-suave:var(--verde-suave)}
body[data-form="laboratorio"],    [data-f="laboratorio"]   {--form:var(--lila);      --form-suave:var(--lila-suave)}
body[data-form="tareas"],         [data-f="tareas"]        {--form:var(--ambar);     --form-suave:var(--ambar-suave)}
body[data-form="precios"],        [data-f="precios"]       {--form:var(--azul-vivo); --form-suave:var(--azul-vivo-suave)}
body[data-form="administracion"], [data-f="administracion"]{--form:var(--marca2);    --form-suave:var(--marca2-suave)}
body[data-form="permisos"],       [data-f="permisos"]      {--form:var(--rojo);      --form-suave:var(--rojo-suave)}
body[data-form="usuarios"],       [data-f="usuarios"]      {--form:var(--marca2);    --form-suave:var(--marca2-suave)}
/* "Contratado" no es de todos los días: lleva el gris azulado a propósito,
   para que nadie lo toque de paso. Sigue siendo un chip con color, no un
   botón apagado. */
body[data-form="contratado"],     [data-f="contratado"]    {--form:var(--gris);      --form-suave:var(--gris-suave)}

/* ============================ base ====================================== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     color:var(--tinta);background:var(--papel)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--azul)}
.oculto{display:none!important}
[hidden]{display:none!important}
.sep{flex:1}
.tenue{font-size:11px;color:var(--tinta2)}
.vacio{color:var(--tinta2);font-size:13px}

/* ============================ campos ==================================== */
input,select,textarea{font:inherit;color:var(--tinta);background:#fff;
  border:1px solid var(--linea);border-radius:6px;padding:6px 9px}
/* El orden importa: primero el reposo con el mouse encima, después el foco,
   para que un campo enfocado no pierda su borde azul al pasarle el mouse.
   Con una sola clase de especificidad, una pantalla puede pisar cualquiera de
   las dos desde su propia hoja. */
input:hover,select:hover,textarea:hover{border-color:#c6ced8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul-vivo);
  box-shadow:0 0 0 3px rgba(59,109,242,.13)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--fondo);color:var(--tinta2)}
/* Una casilla no es un campo de texto: sin esto se estira al ancho de la
   columna y se lleva puesto el rótulo que tiene al lado. */
input[type=checkbox],input[type=radio]{width:auto;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;accent-color:var(--azul-vivo);cursor:pointer}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none;outline:2px solid var(--azul-vivo);outline-offset:1px}
::placeholder{color:#9aa4b1}

/* ============================ botones ===================================
   Ninguno queda gris sobre gris:
     .btn / .primario  → lleno, azul, texto blanco
     .btn.claro        → blanco con borde y texto del color de la pantalla
     .btn.peligro      → rojo
     .mini             → el mismo juego, en chico, para las celdas de tabla   */
.btn,button.primario{border:1px solid var(--azul);background:var(--azul);color:#fff;
  border-radius:6px;padding:7px 14px;font-weight:600;font-size:13px;white-space:nowrap;
  width:auto;cursor:pointer}
.btn:hover,button.primario:hover{background:var(--azul-osc);border-color:var(--azul-osc)}
.btn.claro{background:#fff;color:var(--form);border-color:currentColor}
.btn.claro:hover{background:var(--form-suave)}
.btn.peligro{background:#fff;color:var(--rojo);border-color:#f1b9b9}
.btn.peligro:hover{background:var(--rojo-suave);border-color:var(--rojo)}
.btn.chico{padding:4px 9px;font-size:12px;font-weight:600}
/* La accion que cierra el circulo -agendar, marcar que llego- va en verde y
   llena. Es la unica verde de cada panel: si hubiera dos, no habria ninguna. */
.btn.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.verde:hover{background:#15803d;border-color:#15803d}
.btn:disabled,button.primario:disabled{opacity:.45;cursor:default}

.mini{border:1px solid #a9c2d8;background:#fff;color:var(--azul);
  border-radius:5px;padding:3px 9px;font-size:12px;font-weight:500;cursor:pointer}
.mini:hover{background:var(--azul-suave);border-color:var(--azul)}
.mini.azul{color:var(--azul);border-color:#8fb2ce;background:var(--azul-suave)}
.mini.azul:hover{background:var(--azul);color:#fff;border-color:var(--azul)}
.mini.rojo{color:var(--rojo);border-color:#f1b9b9;background:#fff}
.mini.rojo:hover{background:var(--rojo-suave);border-color:var(--rojo)}
.mini:disabled{opacity:.45;cursor:default}

/* ============================ barra de arriba ===========================
   La única superficie oscura del sistema: el azul marino del membrete. El
   contenido de abajo sigue siendo blanco. */
header{display:flex;align-items:center;gap:12px;padding:0 14px;height:48px;flex:0 0 auto;
  background:var(--marca);color:#fff;border-bottom:3px solid var(--form)}
/* El nombre de la pantalla. Puede achicarse: si es largo, antes se comía los
   chips de la derecha. */
header .marca{font-weight:600;font-size:14px;white-space:nowrap;color:#fff;
  letter-spacing:.01em;background:none;border:0;padding:0;border-radius:0;text-transform:none;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
header .sep{flex:1}
header .quien{font-size:12px;color:#a9c0d6;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:280px}
header .salir{background:transparent;border:1px solid rgba(255,255,255,.34);color:#dbe6f0;
  border-radius:6px;padding:4px 11px;font-size:12px;cursor:pointer;width:auto}
header .salir:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.6)}
header select,header input{background:#fff;color:var(--tinta);border:1px solid #45607a;
  border-radius:6px;padding:4px 8px;font-size:13px}
header select:focus,header input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
header a{color:#cfe0ee}

/* --- chips de formularios ---
   Cada uno con el color de su formulario: tenue de fondo, texto en su color.
   El de la pantalla en la que estamos, lleno. */
header nav,header .chips,header #chips{display:flex;gap:4px;align-items:center;
  flex-wrap:nowrap;overflow:hidden;min-width:0}
header .chip{font-size:12px;line-height:1.5;text-decoration:none;white-space:nowrap;
  padding:3px 9px;border-radius:20px;border:1px solid transparent;cursor:pointer;
  background:var(--form-suave);color:var(--form);font-weight:500}
header a.chip:hover{border-color:var(--form);filter:brightness(.985)}
header .chip.aqui,header .chip.activo{background:var(--form);color:#fff;font-weight:600;
  border-color:var(--form);cursor:default}

/* ============================ pestañas ==================================
   Las de adentro de cada pantalla (Agenda, Admin, Laboratorio, Tareas, Ficha).
   Se tiñen del color de la pantalla. */
.tabs{display:flex;border-bottom:1px solid var(--linea);flex:0 0 auto;background:var(--fondo)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  color:var(--tinta2);font-size:13px;padding:10px 14px;white-space:nowrap}
.tabs button:hover{color:var(--form)}
.tabs button.on{color:var(--form);border-bottom-color:var(--form);font-weight:600;background:#fff}

.subtabs button,.vistas button,.solapas button{background:none;border:0;cursor:pointer;
  border-bottom:2px solid transparent;color:var(--tinta2);font-size:13px}
.subtabs button:hover,.vistas button:hover,.solapas button:hover{color:var(--form)}
.subtabs button.on,.vistas button.on,.solapas button.on{color:var(--form);
  border-bottom-color:var(--form);font-weight:600}

/* ============================ tablas ====================================
   Encabezados con fondo, en versalitas y en el azul del membrete: es lo que
   ordena la lectura de una grilla larga. Filas alternadas muy suaves y un
   realce claro al pasar el mouse. */
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--marca);background:var(--cabecera);padding:7px 8px;
  border-bottom:1px solid var(--linea)}
td{padding:6px 8px;border-bottom:1px solid #eef1f4;vertical-align:top}
tbody tr:nth-of-type(even){background:var(--zebra)}
tbody tr:hover{background:var(--form-suave)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ============================ pastillas de estado =======================
   Una sola familia para todo el sistema:
     ok      activa, culminada, validada      verde
     pend    pendiente, en espera de algo     gris azulado
     mal     urgente, vencida, desactivada    rojo
     curso   en curso, en proceso             azul
     espera  esperando                        ámbar
     etq     roles y etiquetas                lila                          */
.pastilla,.marca,
.lista .it .con,.lista .it .sin,.lista .it .off{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.03em;
  padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px;
  background:var(--gris-suave);color:var(--gris);border:1px solid #dde3ea}
.pastilla.ok,   .marca.con,.marca.ok,.lista .it .con{background:var(--verde-suave);color:#15803d;border-color:#bbf7d0}
.pastilla.pend, .marca.off,.lista .it .off        {background:var(--gris-suave);color:var(--gris);border-color:#dde3ea}
.pastilla.mal,  .marca.sin,.marca.tarde,.lista .it .sin{background:var(--rojo-suave);color:#b91c1c;border-color:#fecaca}
.pastilla.curso{background:var(--azul-suave);color:var(--azul);border-color:#c7dcef}
.pastilla.espera{background:var(--ambar-suave);color:#b45309;border-color:#fde68a}
.pastilla.etq{background:var(--lila-suave);color:var(--lila);border-color:#dfe3ff}
.marca.urg{background:var(--rojo);color:#fff;border-color:var(--rojo)}

/* Los estados del laboratorio, con los mismos colores. */
.estado.e-pendiente {background:var(--ambar-suave);color:#b45309}
.estado.e-en_proceso{background:var(--azul-suave);color:var(--azul)}
.estado.e-parcial   {background:var(--azul-suave);color:var(--azul)}
.estado.e-validado  {background:var(--verde-suave);color:#15803d}
.estado.e-entregado {background:var(--gris-suave);color:var(--gris)}

/* Roles y etiquetas: pastilla lila. En la barra de arriba `.chip` es otra
   cosa (el chip de formulario), y esa regla gana por especificidad. */
.chip{display:inline-block;font-size:11.5px;background:var(--lila-suave);color:var(--lila);
  border:1px solid #dfe3ff;border-radius:999px;padding:2px 9px;margin:0 4px 4px 0;
  white-space:nowrap;font-weight:500}
.chip button{border:0;background:none;color:var(--lila);padding:0 0 0 5px;cursor:pointer}
.chip button:hover{color:var(--rojo)}

/* ============================ ventanas emergentes ======================= */
.fondo,.fondo-modal{position:fixed;inset:0;background:rgba(15,42,68,.42);
  display:grid;place-items:center;z-index:40}
.modal{background:#fff;border-radius:10px;border-top:4px solid var(--form);
  box-shadow:0 10px 34px rgba(15,42,68,.22)}
.modal h2,.modal h3{margin:0 0 3px;font-size:15px;color:var(--marca)}
.modal p.sub{margin:0 0 14px;font-size:12px;color:var(--tinta2)}
.modal-cab{display:flex;align-items:center;gap:8px;padding:11px 15px;
  border-bottom:1px solid var(--linea);background:var(--cabecera)}
.modal-cab h2,.modal-cab h3{margin:0;font-size:14px;color:var(--marca)}
.modal-cab .cerrar,.modal-cab button{margin-left:auto;background:none;border:0;font-size:16px;
  color:var(--tinta2);cursor:pointer;width:auto;border-radius:5px;padding:2px 6px}
.modal-cab .cerrar:hover,.modal-cab button:hover{background:#fff;color:var(--rojo)}
.modal-cuerpo{padding:15px;overflow:auto}
.modal-pie,.modal .pie{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.modal .pie button{padding:8px 16px;border-radius:6px;border:1px solid var(--linea);background:#fff;
  color:var(--tinta);font-weight:500}
.modal .pie button:hover{background:var(--fondo)}
.modal .pie button.primario{background:var(--azul);color:#fff;border-color:var(--azul);font-weight:600}
.modal .pie button.primario:hover{background:var(--azul-osc)}

/* Lista desplegable de los buscadores (entidad, concepto, persona). */
.combo{position:relative}
.opciones{background:#fff;border:1px solid var(--linea);border-radius:6px;
  box-shadow:0 8px 22px rgba(15,42,68,.14)}
.opciones div{padding:6px 10px;font-size:13px;cursor:pointer}
.opciones div:hover,.opciones div.marcada{background:var(--form-suave);color:var(--form)}
.opciones .pre{font-size:10.5px;color:var(--tinta2);margin-left:6px}
.opciones .nada{color:var(--tinta2);cursor:default}
.opciones .nada:hover{background:#fff;color:var(--tinta2)}

/* ============================ mensajes cortos =========================== */
.estado.ok{color:#15803d} .estado.mal{color:var(--rojo)}

/* ============================ estilo "Tarjetas" =========================
   Elegido por el doctor el 28/09/2026 (opcion C): Tareas ya lo tenia y pasa a
   todo el sistema. Aca va solo lo que sirve para todas las pantallas: las dos
   letras (Manrope para titulos, botones y rotulos; Nunito Sans para el texto),
   esquinas un poco mas redondas y los botones secundarios en gris. Las
   tarjetas de cada pantalla van en la hoja de esa pantalla, al final.
   La barra azul de arriba no cambia.
   Va al final a proposito: pisa lo de arriba sin tocarlo, asi se puede volver
   atras borrando este bloque (y el @import de la primera linea). */
:root{
  --f-tit:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-txt:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --b-tinta:#101828;     /* titulos */
  --b-texto:#344054;     /* texto corrido */
  --b-gris:#667085;      /* rotulos de campo */
  --b-borde:#eaecf0;
  --b-tarjeta:#f8f9fb;
  --b-control:#d0d5dd;
}
body{font-family:var(--f-txt)}
header .marca,header .salir,th,.btn,button.primario,.mini,.modal h2,.modal h3{font-family:var(--f-tit)}
/* La barra de formularios trae su propia hoja (formularios-barra.js), que se
   carga despues: por eso estas reglas van con un escalon mas de precision. */
header .barra-buscar input{font-family:var(--f-txt);border-radius:8px}
nav.barra-formularios a,nav.barra-formularios span.aqui{font-family:var(--f-tit);font-weight:600}
input,select,textarea{border-radius:8px}
.btn,button.primario{border-radius:10px}
.mini{border-radius:8px}
.btn.claro{background:#fff;border:1px solid var(--b-control);color:var(--b-texto)}
.btn.claro:hover{background:#fff;border-color:#98a2b3;color:var(--b-tinta)}