:root {
  --azul: #1b3a5c;          /* números y títulos */
  --azul-claro: #4a6b8a;    /* texto secundario */
  --gris: #6b7785;          /* etiquetas y subtítulos */
  --alerta: #c0392b;        /* el número cuando el dato exige acción */
  --borde: #c9d6e2;
  --fondo: #f4f7fa;
  --blanco: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 32px 60px;
  background: var(--fondo);
  color: var(--azul);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--azul); text-decoration: none; }

/* --- Encabezado -------------------------------------------------------- */
.migas { font-size: 13px; color: var(--gris); margin-bottom: 14px; }
.migas a { color: var(--azul-claro); }
.migas a:hover { text-decoration: underline; }

h1 { font-size: 21px; margin: 0 0 4px; font-weight: 700; }
.subtitulo { color: var(--gris); font-size: 14px; margin-bottom: 24px; }

/* La cabecera de la radiografía: hospital en negritas, el resto en gris,
   separado por puntos medios — como en el diseño de referencia. */
.cabecera-clave { font-size: 19px; margin: 0 0 22px; font-weight: 400; color: var(--gris); }
.cabecera-clave strong { color: var(--azul); font-weight: 700; }
.cabecera-clave .sep { margin: 0 10px; color: var(--borde); }

/* --- Tarjetas ---------------------------------------------------------- */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 22px 24px 24px;
  display: block;
  min-height: 190px;
  position: relative;
  transition: box-shadow .15s, transform .15s;
}
.tarjeta:hover { box-shadow: 0 4px 14px rgba(27,58,92,.13); transform: translateY(-2px); }

.tarjeta .etiqueta {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--azul); margin-bottom: 26px;
  padding-right: 44px;                 /* deja aire para el ícono */
}
.tarjeta .icono {
  position: absolute; top: 18px; right: 22px;
  font-size: 26px; line-height: 1; opacity: .85;
}
.tarjeta .valor { font-size: 44px; font-weight: 700; line-height: 1.05; }
.tarjeta .valor.alerta { color: var(--alerta); }
/* La separación la pone la nota y no la cifra, para que la marca pueda meterse
   entre las dos sin que la tarjeta cambie de alto. */
.tarjeta .nota { font-size: 13.5px; color: var(--gris); margin-top: 30px; }
/* Aviso de que la cifra es de otra naturaleza (p. ej. un pronóstico mensual donde
   se espera un lote): matiza el número sin gritarlo como una alerta. Va en el flujo,
   debajo de la cifra —la esquina superior derecha es del ícono, y ahí se encimaban. */
.tarjeta .marca {
  display: inline-block; margin-top: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gris); background: var(--fondo); border: 1px solid var(--borde);
  border-radius: 10px; padding: 3px 8px;
}
.tarjeta .marca + .nota { margin-top: 10px; }
/* Cuando la marca responde "de dónde salió el dato" se colorea, porque ahí las dos
   respuestas importan: verde = dato nuestro, ámbar = referencia externa. El gris
   de arriba queda para las marcas que solo matizan. */
.tarjeta .marca.propia { background: #dff0e4; color: #1e6b34; border-color: #bcdcc6; }
.tarjeta .marca.ajena  { background: #fdf1de; color: #8a5a12; border-color: #f0dcb8; }

/* --- Tablas ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: 14px; }
caption {
  text-align: left; font-weight: 700; font-size: 15px;
  padding: 18px 0 10px; color: var(--azul);
}
th {
  background: var(--azul); color: var(--blanco); text-align: left;
  padding: 9px 12px; font-weight: 600; font-size: 13px;
  letter-spacing: .02em; white-space: nowrap;
}
td { padding: 8px 12px; border-bottom: 1px solid var(--borde); }
tbody tr:hover { background: #eef3f8; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; }

/* --- Lista principal --------------------------------------------------- */
.resumen {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px;
  padding: 16px 20px; margin-bottom: 22px; display: flex; gap: 42px; flex-wrap: wrap;
}
.resumen div { min-width: 130px; }
.resumen .cifra { font-size: 25px; font-weight: 700; }
.resumen .rotulo { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }

tr.fila-clic { cursor: pointer; }
.pastilla {
  display: inline-block; padding: 2px 9px; border-radius: 11px;
  font-size: 12px; font-weight: 600; background: #e3ecf4; color: var(--azul);
}
.pastilla.ok { background: #dff0e4; color: #1e6b34; }
.pastilla.aviso { background: #fbe6e3; color: var(--alerta); }

.vacio { color: var(--gris); font-style: italic; }
.pie { margin-top: 30px; font-size: 12.5px; color: var(--gris); }

/* --- Selector de modo --------------------------------------------------- */
.modos { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.modo {
  padding: 7px 16px; border: 1px solid var(--borde); border-radius: 18px;
  background: var(--blanco); font-size: 13.5px; font-weight: 600; color: var(--azul-claro);
}
.modo:hover { border-color: var(--azul-claro); }
.modo.activo { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

/* Los dos selectores se alinean con su rótulo: sin él, dos filas de pastillas
   iguales no dicen que una elige el plazo y la otra cuántas filas se ven. */
.modos .rotulo-filtro {
  align-self: center; font-size: 12.5px; font-weight: 600; color: var(--gris);
  text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; min-width: 62px;
}
.filtro-plazo { margin-bottom: 10px; }
/* El conteo va dentro de la pastilla, atenuado: acompaña al plazo sin competir. */
.modo small { font-weight: 500; opacity: .6; margin-left: 4px; }
/* Un plazo sin candidatas: se ve que existe y que está vacío, y sigue siendo
   clicable —la lista vacía lo confirma— en vez de desaparecer sin explicación. */
.modo.vacio { color: var(--gris); font-style: normal; opacity: .55; }
/* Va ARRIBA, bajo el subtítulo: de qué fecha son los datos condiciona todo lo que
   sigue, y al pie se leía cuando la decisión ya estaba tomada. */
.vigencia { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.vigencia .pie { margin-top: 0; }
.selector-corrida { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.selector-corrida label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gris);
}
.selector-corrida select {
  font: inherit; font-size: 13px; padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--borde); background: var(--blanco); color: var(--azul);
  max-width: 100%;
}

/* Aviso de que lo que se ve NO es lo vigente. Ocupa el ancho y va arriba de todo:
   es lo primero que hay que saber antes de leer cualquier cifra de la página. */
.barra-historica {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px; padding: 9px 14px; border-radius: 6px;
  background: #fdf1de; border: 1px solid #f0dcb8; color: #8a5a12; font-size: 13.5px;
}
.barra-historica a { color: #8a5a12; font-weight: 600; text-decoration: underline; }

/* --- Encabezados filtrables (estilo Excel) ------------------------------ */
th.filtrable { cursor: pointer; padding-right: 26px; position: relative; user-select: none; }
th.filtrable::after {
  content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 11px; opacity: .65;
}
th.filtrable:hover { background: #24486e; }
/* La columna filtrada se marca: sin esto, filas ocultas se leen como "no hay datos". */
th.filtrada { background: #0f2740; }
th.filtrada::after { content: "▼"; opacity: 1; color: #7fc4a0; }

/* --- Panel de filtro ---------------------------------------------------- */
.panel {
  position: absolute; z-index: 40; width: 268px;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(27,58,92,.22); padding: 10px;
}
.panel input[type=search] {
  width: 100%; padding: 6px 9px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: 5px; color: var(--azul);
}
.panel-todos {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  padding: 9px 4px 7px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.panel-lista { max-height: 232px; overflow-y: auto; padding: 6px 0; }
.panel-item {
  display: flex; align-items: center; gap: 7px; padding: 4px 5px;
  font-size: 13px; cursor: pointer; border-radius: 4px;
}
.panel-item:hover { background: #eef3f8; }
.panel-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-nada { font-size: 13px; color: var(--gris); font-style: italic; padding: 10px 5px; }
.panel-pie {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 9px; border-top: 1px solid var(--borde);
}
.vinculo {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--azul-claro); text-decoration: underline; font-family: inherit;
}
.boton {
  background: var(--azul); color: var(--blanco); border: 0; border-radius: 5px;
  padding: 6px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* --- Sesión ------------------------------------------------------------- */
.barra-sesion {
  display: flex; align-items: center; gap: 16px; justify-content: flex-end;
  font-size: 12.5px; color: var(--gris); margin: -10px 0 16px;
}
.barra-sesion .restan { padding: 2px 9px; border-radius: 11px; background: #e3ecf4; color: var(--azul); }
.barra-sesion .restan.poco { background: #fbe6e3; color: var(--alerta); font-weight: 600; }
.barra-sesion a { color: var(--azul-claro); text-decoration: underline; }

/* --- Login -------------------------------------------------------------- */
.login {
  max-width: 380px; margin: 8vh auto 0; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 12px; padding: 34px 34px 26px;
  box-shadow: 0 6px 22px rgba(27,58,92,.08);
}
.login h1 { font-size: 20px; margin-bottom: 6px; }
.login form { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
.login label { font-size: 13px; font-weight: 600; color: var(--azul); display: flex; flex-direction: column; gap: 6px; }
.login input {
  padding: 9px 11px; font-size: 14px; font-family: inherit; font-weight: 400;
  border: 1px solid var(--borde); border-radius: 6px; color: var(--azul);
}
.login input:focus { outline: 2px solid var(--azul-claro); outline-offset: -1px; }
.boton.ancho { width: 100%; padding: 10px; font-size: 14px; margin-top: 4px; }
.aviso-error, .aviso-sesion {
  font-size: 13px; padding: 9px 12px; border-radius: 6px; margin-top: 16px;
}
.aviso-error { background: #fbe6e3; color: var(--alerta); }
.aviso-sesion { background: #fdf3e0; color: #8a5a12; }
.login .pie { margin-top: 20px; text-align: center; }

/* --- Generar recomendaciones -------------------------------------------- */
.barra-acciones { margin-bottom: 14px; }
.boton-sec {
  display: inline-block; padding: 7px 15px; border: 1px solid var(--azul-claro);
  border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--azul); background: var(--blanco);
}
.boton-sec:hover { background: var(--azul); color: var(--blanco); }

.panel-aviso {
  background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--azul-claro);
  border-radius: 8px; padding: 18px 22px; margin-bottom: 20px;
}
.panel-aviso.corriendo { border-left-color: #c98a12; }
.panel-aviso h2 { font-size: 16px; margin: 0 0 8px; }
.panel-aviso p { margin: 6px 0; font-size: 14px; }
.panel-aviso pre {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px;
  padding: 11px 13px; font-size: 12.5px; overflow-x: auto; margin-top: 10px;
}

.forma-generar {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px;
  padding: 22px 24px; max-width: 560px; display: flex; flex-direction: column; gap: 18px;
}
.forma-generar > label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 7px; }
.forma-generar input[type=date] {
  padding: 8px 11px; font-size: 14px; font-family: inherit; width: 210px;
  border: 1px solid var(--borde); border-radius: 6px; color: var(--azul);
}
.forma-generar .casilla { flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 500; }
.forma-generar .casilla small { display: block; color: var(--gris); font-weight: 400; margin-top: 3px; }
.forma-generar .boton { align-self: flex-start; padding: 9px 22px; font-size: 14px; }

.log {
  background: #12283f; color: #d6e4f0; border-radius: 8px; padding: 14px 16px;
  font-size: 12px; line-height: 1.55; max-height: 340px; overflow: auto;
  font-family: Consolas, "Courier New", monospace; white-space: pre-wrap; margin-top: 18px;
}
.aviso-ok {
  background: #dff0e4; color: #1e6b34; font-size: 13px;
  padding: 10px 13px; border-radius: 6px; margin-bottom: 16px;
}

/* Costo tomado del catálogo, no de una compra propia: se distingue sin gritar. */
td.aprox { color: var(--gris); font-style: italic; }

.forma-generar select {
  padding: 8px 11px; font-size: 14px; font-family: inherit; width: 290px;
  border: 1px solid var(--borde); border-radius: 6px; color: var(--azul); background: var(--blanco);
}
.forma-generar > label small { color: var(--gris); font-weight: 400; }

/* --- Selector de precio (en la barra de acciones) ------------------------ */
.barra-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.selector-precio { font-size: 13px; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.selector-precio .opcion {
  padding: 5px 12px; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--blanco); color: var(--azul-claro); font-weight: 600; font-size: 12.5px;
}
.selector-precio .opcion:hover { border-color: var(--azul-claro); }
.selector-precio .opcion.activa { background: var(--azul); border-color: var(--azul); color: var(--blanco); }

/* --- Subtotales --------------------------------------------------------- */
tfoot td {
  background: #eaf0f6; font-weight: 700; color: var(--azul);
  border-top: 2px solid var(--azul-claro); border-bottom: 0;
}
/* El borde grueso separa el cuerpo del pie UNA vez. Con varias filas de resumen
   (mediana, promedio, total) repetirlo en cada una las partiría en tres bloques
   sueltos en vez de leerse como un pie. */
tfoot tr:not(:first-child) td { border-top: 0; }
/* La fila que responde la pregunta de la tabla; las demás son contexto. */
tfoot tr.destacada td { background: #d8e4f0; }
tfoot td small { font-weight: 500; opacity: .7; margin-left: 5px; }

tr.subtotal td {
  background: #dce6ea; font-weight: 700; color: var(--azul);
  border-bottom: 2px solid var(--azul-claro); padding: 8px 12px;
}


/* --- Generar: bloques de acción ----------------------------------------- */
.campo-fecha, .campo-metodo {
  display: block; font-size: 13px; font-weight: 600; color: var(--gris);
  margin-bottom: 14px;
}
.campo-fecha input, .campo-metodo select {
  display: block; margin-top: 5px; font: inherit; font-size: 14px; padding: 6px 9px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--blanco);
  color: var(--azul);
}

.boton small { font-weight: 500; opacity: .75; margin-left: 5px; }

/* --- Usuarios ----------------------------------------------------------- */
.forma-invitar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.forma-invitar label { font-size: 12.5px; font-weight: 600; color: var(--gris); }
.forma-invitar input, .forma-invitar select {
  display: block; margin-top: 5px; font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--blanco);
  color: var(--azul); min-width: 230px;
}
.forma-invitar select { min-width: 130px; }
.forma-angosta { max-width: 380px; }
.en-linea { display: inline; }
/* La liga de invitación es un secreto de un solo uso: se muestra completa y
   seleccionable, para copiarla sin recortarla por accidente. */
.liga {
  width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--blanco); color: var(--azul); margin-top: 8px;
}
.barra-sesion a + a { margin-left: 14px; }