@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('/diseno.css');
/* ============================================================================
   Hoja compartida del sistema — Medic Soft
   ----------------------------------------------------------------------------
   Una sola hoja para todo lo que se repite en las 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 blanco. La única superficie oscura del
        sistema es la barra de arriba.

   COLOR (decisión del doctor, 22/10/2026). Cada clínica tiene UN color, que
   se elige en el panel de Medic Soft, y de ese color sale el marco: la barra
   de arriba (en tono oscuro), el botón principal, el campo donde está el
   cursor, la solapa elegida, la rayita de los títulos, la fila elegida y las
   casillas tildadas. Llega en las variables --clinica-* por /tema.css, que
   nucleo/marca.js agrega en cada página. Sin color elegido, salen los de
   Medic Soft que están acá abajo.

   Lo que tiene significado NO cambia de una clínica a otra: el semáforo
   (verde, ámbar, rojo, gris), los colores de los estados del turno y el rojo
   de un resultado alterado. Ya no hay un color por formulario.
   ========================================================================= */

:root{
  /* --- la clínica (los pisa /tema.css; estos son los de Medic Soft) --- */
  --clinica:#341968;        /* rayitas, solapa elegida, enlaces */
  --clinica-osc:#291052;    /* la barra de arriba y los títulos */
  --clinica-suave:#EFEAF6;  /* fondo de lo elegido */
  --clinica-boton:#D61B80;  /* botón principal */
  --clinica-boton-osc:#B5156B;
  --clinica-foco:#D61B80;   /* borde del campo donde está el cursor */

  /* --- marca --- */
  --marca:var(--clinica-osc);
  --marca2:#3a3150;
  --marca-suave:#F3EFF7;
  --marca2-suave:#F3EFF7;

  /* --- informativo (fijo: es el color del estado "confirmada" y "en proceso") --- */
  --azul:#2f5d8a;
  --azul-osc:#24486b;
  --azul-suave:#eaf2f9;
  --azul-vivo:#3b6df2;
  --azul-vivo-suave:#e7edfd;

  /* --- semáforo (fijo, igual en todas las clínicas) --- */
  --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 (los de la guía de Medic Soft) --- */
  --tinta:#221A35; --tinta2:#756B86;
  --linea:#E6E1EC; --fondo:#F8F4FA; --papel:#fff;
  --cabecera:#F6F3F9;       /* fondo de los encabezados de tabla */
  --zebra:#FBFAFC;          /* 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(--clinica);
  --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(34,26,53,.05),0 6px 18px rgba(34,26,53,.06);

  /* El color de "esta pantalla": desde el 22/10/2026 es el de la clínica en
     todas. Las hojas de cada pantalla siguen escribiendo var(--form). */
  --form:var(--clinica); --form-suave:var(--clinica-suave);
}

/* ============================ base ====================================== */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font:14px/1.45 'Lato',Arial,system-ui,sans-serif;
     color:var(--tinta);background:var(--papel)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--clinica)}
.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 al pasarle el mouse. */
input:hover,select:hover,textarea:hover{border-color:#cfc7d9}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--clinica-foco);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--clinica-foco) 16%,transparent)}
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(--clinica);cursor:pointer}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none;outline:2px solid var(--clinica-foco);outline-offset:1px}
::placeholder{color:#a39bb1}

/* ============================ botones ===================================
   Ninguno queda gris sobre gris:
     .btn / .primario  → lleno, del color de la clínica, texto blanco
     .btn.claro        → blanco con borde
     .btn.peligro      → rojo
     .mini             → el mismo juego, en chico, para las celdas de tabla   */
.btn,button.primario{border:1px solid var(--clinica-boton);background:var(--clinica-boton);color:#fff;
  border-radius:6px;padding:7px 14px;font-weight:700;font-size:13px;white-space:nowrap;
  width:auto;cursor:pointer}
.btn:hover,button.primario:hover{background:var(--clinica-boton-osc);border-color:var(--clinica-boton-osc)}
.btn.claro{background:#fff;color:var(--clinica);border-color:currentColor}
.btn.claro:hover{background:var(--clinica-suave)}
.btn.peligro{background:#fff;color:var(--rojo);border-color:#f1b9b9}
.btn.peligro:hover{background:var(--rojo-suave);border-color:var(--rojo)}
/* El aviso de lo que se pierde al borrar algo (borrar un contrato). */
.aviso.mal{color:var(--rojo);background:var(--rojo-suave);border:1px solid #f1b9b9;
  border-radius:6px;padding:9px 11px;font-size:13px}
.btn.chico{padding:4px 9px;font-size:12px;font-weight:700}
/* 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 color-mix(in srgb,var(--clinica) 35%,#fff);background:#fff;color:var(--clinica);
  border-radius:5px;padding:3px 9px;font-size:12px;font-weight:700;cursor:pointer}
.mini:hover{background:var(--clinica-suave);border-color:var(--clinica)}
.mini.azul{color:var(--clinica);border-color:color-mix(in srgb,var(--clinica) 45%,#fff);background:var(--clinica-suave)}
.mini.azul:hover{background:var(--clinica);color:#fff;border-color:var(--clinica)}
.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 tono oscuro del color de la
   clínica. 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(--clinica-osc);color:#fff;border-bottom:3px solid var(--clinica)}
/* El nombre de la pantalla. Puede achicarse: si es largo, antes se comía los
   chips de la derecha. */
header .marca{font-weight:700;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:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:280px}
header .salir{background:transparent;border:1px solid rgba(255,255,255,.34);color:rgba(255,255,255,.9);
  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 rgba(255,255,255,.3);
  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:rgba(255,255,255,.85)}

/* --- chips de formularios (la barra vieja: la reemplaza formularios-barra.js) --- */
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:rgba(255,255,255,.14);color:#fff;font-weight:500}
header a.chip:hover{border-color:rgba(255,255,255,.5)}
header .chip.aqui,header .chip.activo{background:#fff;color:var(--clinica-osc);font-weight:700;
  border-color:#fff;cursor:default}

/* ============================ pestañas ==================================
   Las de adentro de cada pantalla (Agenda, Admin, Laboratorio, Tareas, Ficha).
   La elegida va del color de la clínica. */
.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(--clinica)}
.tabs button.on{color:var(--clinica);border-bottom-color:var(--clinica);font-weight:700;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(--clinica)}
.subtabs button.on,.vistas button.on,.solapas button.on{color:var(--clinica);
  border-bottom-color:var(--clinica);font-weight:700}

/* ============================ tablas ====================================
   Encabezados con fondo, en versalitas y en el tono oscuro de la clínica: 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 #F0ECF4;vertical-align:top}
tbody tr:nth-of-type(even){background:var(--zebra)}
tbody tr:hover{background:var(--clinica-suave)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ============================ pastillas de estado =======================
   Una sola familia para todo el sistema, igual en todas las clínicas:
     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:700;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(34,26,53,.42);
  display:grid;place-items:center;z-index:40}
.modal{background:#fff;border-radius:10px;border-top:4px solid var(--clinica);
  box-shadow:0 10px 34px rgba(34,26,53,.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(--clinica-boton);color:#fff;border-color:var(--clinica-boton);font-weight:700}
.modal .pie button.primario:hover{background:var(--clinica-boton-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(34,26,53,.14)}
.opciones div{padding:6px 10px;font-size:13px;cursor:pointer}
.opciones div:hover,.opciones div.marcada{background:var(--clinica-suave);color:var(--clinica)}
.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). Desde el 22/10/2026 con la
   letra de la guía de Medic Soft: Lato en títulos y en texto. Esquinas un
   poco más redondas y los botones secundarios en gris.
   Va al final a proposito: pisa lo de arriba sin tocarlo. */
:root{
  --f-tit:'Lato',Arial,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-txt:'Lato',Arial,system-ui,-apple-system,'Segoe UI',sans-serif;
  --b-tinta:#221A35;     /* titulos */
  --b-texto:#3b3350;     /* texto corrido */
  --b-gris:#756B86;      /* rotulos de campo */
  --b-borde:#ECE8F1;
  --b-tarjeta:#F9F7FB;
  --b-control:#D9D2E2;
}
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}
header .barra-buscar input:focus{border-color:var(--clinica-foco)}
nav.barra-formularios a,nav.barra-formularios span.aqui{font-family:var(--f-tit);font-weight:700}
/* Sin color por formulario: los chips quedan neutros y el de la pantalla
   donde uno está, lleno del color de la clínica. */
nav.barra-formularios a{background:#F4F1F7;color:var(--tinta2);border-color:transparent}
nav.barra-formularios a:hover{border-color:var(--clinica);color:var(--clinica)}
nav.barra-formularios span.aqui{background:var(--clinica);border-color:var(--clinica);color:#fff}
nav.barra-formularios .cuenta{background:var(--clinica)}
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:#a39bb1;color:var(--b-tinta)}
/* Las solapas de Caja y Liquidaciones (pastillas): la elegida, del color de
   la clínica en vez de negra. caja.css se carga despues: un escalon mas. */
body .solapas button.aqui{background:var(--clinica);border-color:var(--clinica);color:#fff}

/* ============================ pantalla de ingreso =======================
   El logo de la clínica (o de la sede de la dirección) arriba y "Medic Soft"
   chico abajo; los pone public/marca.js. Un escalon mas de precision que el
   <style> de public/index.html, que se lee despues. */
#login .caja{border-top-color:var(--clinica)}
#login .caja .logo-clinica{display:block;max-width:220px;max-height:96px;margin:0 auto 16px;object-fit:contain}
#login .caja:has(.logo-clinica) h1{text-align:center}
#login .caja:has(.logo-clinica) p.sub{text-align:center}
#login .caja button[type=submit]{background:var(--clinica-boton);border-color:var(--clinica-boton);border-radius:10px}
#login .caja button[type=submit]:hover{background:var(--clinica-boton-osc)}
#login .caja .pie button{color:var(--clinica)}
#login .caja .ms-firma{margin-top:18px;text-align:center;font:700 11px/1 var(--f-tit);
  color:#9a91a8;letter-spacing:.04em}