/* Gestión de guardias — HIBA Cirugía General */

:root {
  --verde: #00703c;
  --verde-osc: #005a30;
  --verde-claro: #e6f2ec;
  --rojo: #c8102e;
  --rojo-claro: #fdeaed;
  --ambar: #b45309;
  --ambar-claro: #fef3c7;
  --azul: #1d4ed8;
  --azul-claro: #eaf0ff;
  --tinta: #14181d;
  --texto: #2b3138;
  --suave: #6b7280;
  --linea: #e3e7ec;
  --fondo: #f5f7f9;
  --panel: #ffffff;
  --radio: 10px;
  --alto-cabecera: 69px;   /* la marca del lateral y el topbar arrancan parejos */
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--tinta); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 21px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
a { color: var(--verde); }
small, .muted { color: var(--suave); font-size: 12.5px; }
.txt { color: var(--texto); }

/* ---------- layout ---------- */
/* La aplicación ocupa la ventana y solo scrollea la vista: la cabecera y el
   panel lateral quedan siempre a la vista. */
.app { display: none; height: 100vh; overflow: hidden; }
.app.visible { display: flex; flex-direction: column; }
.app-cuerpo { flex: 1; display: flex; min-height: 0; }

.lateral {
  width: 214px; flex: none; background: var(--panel);
  border-right: 1px solid var(--linea);
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* Solo el logo de la barra: sin acotarlo, el padding deformaba los círculos
   de las etapas del planificador, que también usan .marca. */
.lateral .marca {
  display: flex; align-items: center; justify-content: center;
  height: var(--alto-cabecera); flex: none;
  padding: 10px 12px; border-bottom: 1px solid var(--linea);
}
.lateral .marca img { height: 40px; width: auto; max-width: 100%; }
.lateral .marca .iso { display: none; }
.lateral nav { padding: 10px 8px; }
.lateral .nav-pie { margin-top: auto; border-top: 1px solid var(--linea); }

/* ── Notebook: el panel se repliega a íconos y se abre al pasar el mouse ──
   Entre 761 y 1200 px la pantalla no da para 214 px de menú permanente, pero
   tampoco es un teléfono como para bajar la barra al pie. */
@media (min-width: 761px) and (max-width: 1200px) {
  .app-cuerpo { position: relative; }
  .lateral {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 60;
    width: 74px; transition: width .14s ease; overflow: hidden;
  }
  .lateral:hover { width: 214px; box-shadow: 6px 0 22px rgba(16, 24, 40, .13); }
  .principal { margin-left: 74px; }

  .lateral .marca { padding: 10px 6px; }
  .lateral .marca .completo { display: none; }
  .lateral .marca .iso { display: block; height: 34px; }
  .lateral:hover .marca .completo { display: block; height: 40px; }
  .lateral:hover .marca .iso { display: none; }

  .lateral nav { padding: 8px 6px; }
  .lateral nav button {
    flex-direction: column; gap: 3px; padding: 8px 2px; text-align: center;
    position: relative;
  }
  .lateral nav button .txt {
    font-size: 9.5px; line-height: 1.15; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lateral nav button .aviso-num {
    position: absolute; top: 4px; right: 12px; margin: 0;
    min-width: 15px; height: 15px; padding: 0 4px; font-size: 9.5px;
  }

  /* Abierto, vuelve a ser la lista de siempre */
  .lateral:hover nav button { flex-direction: row; gap: 10px; padding: 9px 11px; text-align: left; }
  .lateral:hover nav button .txt { font-size: 14px; }
  .lateral:hover nav button .aviso-num { position: static; margin-left: auto; }
}

/* El manual se muestra con la relación 16:9 de las diapositivas */
.lote { margin-bottom: 12px; }
.lote ul { margin: 0; padding-left: 18px; }
.lote li { padding: 3px 0; color: var(--tinta); }
.manual-caja { padding: 0; overflow: hidden; position: relative; }
.manual-caja .abrir-aparte {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--linea); color: var(--suave);
  box-shadow: var(--sombra);
}
.manual-caja .abrir-aparte:hover { color: var(--verde); border-color: var(--verde); }
.manual-caja iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border-bottom: 1px solid var(--linea);
  padding: 10px 20px; height: var(--alto-cabecera); flex: none;
}
.topbar .titulo { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .espacio { flex: 1; }

.usuario {
  display: flex; align-items: center; gap: 8px; background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer; padding: 4px 6px; border-radius: 8px;
}
.usuario:hover { background: #f1f4f7; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--verde); background-size: cover; background-position: center;
  color: #fff; display: inline-grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex: none; vertical-align: middle;
}
.avatar.chico { width: 24px; height: 24px; font-size: 10px; }
.avatar.grande { width: 72px; height: 72px; font-size: 24px; }
.perfil-foto { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.usuario .datos { line-height: 1.15; }
.usuario .datos strong { font-size: 13px; display: block; }
.usuario .datos span { font-size: 11.5px; color: var(--suave); }

.lateral nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 9px 11px; margin-bottom: 2px;
  border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--texto); text-align: left;
}
.lateral nav button:hover { background: #f1f4f7; }
.lateral nav button.activo { background: var(--verde-claro); color: var(--verde-osc); font-weight: 600; }
.lateral nav .ico { width: 18px; text-align: center; }
.lateral nav button .txt { flex: 1; min-width: 0; }

.vista { flex: 1; padding: 20px 24px 40px; max-width: 1240px; min-width: 0; overflow-y: auto; }

.cabecera-vista { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cabecera-vista .espacio { flex: 1; }

/* Sub-pestañas de la vista */
.subtabs {
  display: flex; gap: 2px; align-items: flex-end; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea); margin: -4px 0 14px;
}
.subtabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--suave); white-space: nowrap;
}
.subtabs button:hover { color: var(--tinta); }
.subtabs button.activo { color: var(--verde-osc); border-bottom-color: var(--verde); font-weight: 650; }

/* Paginación */
.paginador {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--linea); font-size: 13px;
}
.paginador .espacio { flex: 1; }

/* Barra única de la vista: filtros a la izquierda, acciones a la derecha */
.herramientas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 9px 11px; margin-bottom: 14px;
}
.herramientas .filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.herramientas .acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- componentes ---------- */
.tarjeta {
  min-width: 0; overflow-wrap: anywhere;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 16px; margin-bottom: 16px;
}
.tarjeta > h2, .tarjeta > h3 { margin-bottom: 10px; }
.grilla { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cuatro numeros no necesitan cuatro tarjetas altas: el dato es el numero. */
.kpi { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 9px 14px; }
.kpi .valor { font-size: 22px; font-weight: 700; color: var(--tinta); line-height: 1.15; }
.kpi .rotulo { font-size: 12px; color: var(--suave); }
.kpi.ok { border-left: 3px solid var(--verde); }
.kpi.alerta { border-left: 3px solid var(--ambar); }
.kpi.mal { border-left: 3px solid var(--rojo); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--verde); color: #fff; border: 1px solid var(--verde);
  text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--verde-osc); border-color: var(--verde-osc); }
.btn.ghost { background: #fff; color: var(--texto); border-color: var(--linea); font-weight: 500; }
.btn.ghost:hover { background: #f3f5f8; }
.btn.danger { background: var(--rojo); border-color: var(--rojo); }
.btn.chico { padding: 5px 10px; font-size: 13px; }
.btn.grande { padding: 11px 20px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Acciones de tabla: ver (azul), editar (ámbar), borrar (rojo), activar / pausar */
.aviso-num {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 6px; border-radius: 9px; background: var(--rojo); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle;
}

.acc {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  display: inline-grid; place-items: center; background: #fff;
  border: 1px solid var(--linea); color: var(--suave); vertical-align: middle;
}
.acc + .acc { margin-left: 4px; }
.acc.ver { color: var(--azul); border-color: #c7d7fe; background: var(--azul-claro); }
.acc.editar { color: var(--ambar); border-color: #fde68a; background: var(--ambar-claro); }
.acc.borrar { color: var(--rojo); border-color: #f6c6ce; background: var(--rojo-claro); }
.acc.pausar { color: var(--rojo); border-color: #f6c6ce; background: var(--rojo-claro); }
.acc.activar { color: var(--verde-osc); border-color: #bfe0cd; background: var(--verde-claro); }
.acc.meses { color: var(--azul); border-color: #c7d7fe; background: var(--azul-claro); }
.acc.aceptar { color: var(--verde-osc); border-color: #bfe0cd; background: var(--verde-claro); }
.acc.rechazar { color: var(--rojo); border-color: #f6c6ce; background: var(--rojo-claro); }
.acc:hover { filter: brightness(.95); }
.acc[disabled] { opacity: .35; cursor: default; filter: none; }

button.icono { background: none; border: 0; cursor: pointer; font-size: 15px; color: var(--suave); padding: 4px; border-radius: 6px; }
button.icono:hover { background: #eef1f4; color: var(--tinta); }

input[type=text], input[type=date], input[type=number], input[type=password], select, textarea {
  font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--linea);
  border-radius: 8px; background: #fff; color: var(--texto); max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde-claro); border-color: var(--verde); }

/* El mes que se está mirando es el dato que ordena toda la pantalla: se lee primero */
#selMes {
  font-size: 15px; font-weight: 700; color: var(--tinta);
  padding: 7px 10px; min-width: 170px;
}

/* Quien navega con el teclado tiene que ver donde esta parado. Solo :focus-visible,
   asi el anillo no aparece al hacer clic con el mouse. */
button:focus-visible, a:focus-visible, .acc:focus-visible, .rol-op:focus-visible,
.dia:focus-visible, summary:focus-visible, .interruptor input:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px;
}
.nav-movil button:focus-visible, .lateral button:focus-visible,
.pie-okun button:focus-visible, .firma-okun:focus-visible {
  outline: 2px solid #fff; outline-offset: -2px;
}
input:disabled, select:disabled, textarea:disabled {
  background: #f3f5f7; color: var(--suave); cursor: not-allowed;
}
label.campo { display: block; margin-bottom: 10px; }
label.campo > span { display: block; font-size: 12.5px; color: var(--suave); margin-bottom: 4px; }
label.campo > input, label.campo > select { width: 100%; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th, .tabla td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; }
.tabla tbody tr:hover { background: #fafbfc; }

/* Todas las filas de datos miden lo mismo, tengan texto o controles adentro:
   la nómina medía 46 px, análisis 28 y el ojo saltaba de una tabla a otra. */
.tabla tbody td { height: 34px; }
.tabla .acc { width: 26px; height: 26px; }
.tabla .acc + .acc { margin-left: 3px; }
.tabla select, .tabla input[type=text], .tabla input[type=number], .tabla input[type=date] {
  height: 26px; padding: 1px 6px; font-size: 12.5px;
}
.tabla .btn.chico { padding: 3px 9px; font-size: 12.5px; }
.tabla .stepper button { width: 22px; height: 22px; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Un encabezado de una palabra no se parte en dos renglones */
.tabla th.num { white-space: nowrap; }
.scroll-x { overflow-x: auto; }
.tabla.compacta th, .tabla.compacta td { padding: 4px 8px; font-size: 12.5px; }
/* Las listas largas hacen scroll dentro de su tarjeta, no estiran la página */
/* Las tablas largas scrollean adentro de su tarjeta: los filtros y el paginador
   quedan quietos y la vista no crece más que la ventana. */
/* Encabezado que ordena: se nota que es clickeable y el activo dice hacia donde. */
th.orden { cursor: pointer; user-select: none; white-space: nowrap; }
th.orden:hover { color: var(--tinta); }
th.orden.activo { color: var(--verde-osc); }
.galon-orden { display: inline-block; width: 10px; margin-left: 2px; font-size: 10px; }

.tabla-ventana { max-height: calc(100vh - 330px); min-height: 200px; overflow: auto; }
.tabla-ventana table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.alto-fijo { max-height: 300px; overflow-y: auto; }
.alto-fijo.corto { max-height: 190px; }
.alto-fijo table thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

.col-acceso { display: none; }
.col-acceso small { display: block; color: var(--suave); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--c) 12%, white);
  color: color-mix(in srgb, var(--c) 78%, black);
  border: 1px solid color-mix(in srgb, var(--c) 30%, white);
  border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pastilla { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef1f4; color: var(--suave); }
.pastilla.ok { background: var(--verde-claro); color: var(--verde-osc); }
.pastilla.alerta { background: var(--ambar-claro); color: var(--ambar); }
.pastilla.mal { background: var(--rojo-claro); color: var(--rojo); }
.pastilla.info { background: var(--azul-claro); color: var(--azul); }

.anio { display: inline-block; min-width: 26px; text-align: center; border-radius: 5px; font-size: 11px; font-weight: 700; padding: 1px 5px; }
.anio.aR4 { background: #fee2e2; color: #991b1b; }
.anio.aR3 { background: #dcfce7; color: #166534; }
.anio.aR2 { background: #fef9c3; color: #854d0e; }
.anio.aR1 { background: #e0f2fe; color: #075985; }

.barra { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: #eceff3; overflow: hidden; vertical-align: middle; }
.barra > span { display: block; height: 100%; border-radius: 4px; }

.aviso { border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 10px; border: 1px solid; }
.aviso.ok { background: var(--verde-claro); border-color: #bfe0cd; color: var(--verde-osc); }
.aviso.alerta { background: var(--ambar-claro); border-color: #fde68a; color: var(--ambar); }
.aviso.mal { background: var(--rojo-claro); border-color: #f6c6ce; color: var(--rojo); }
.aviso.info { background: var(--azul-claro); border-color: #c7d7fe; color: var(--azul); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

.vacio { text-align: center; color: var(--suave); padding: 26px 10px; font-size: 14px; }
.vacio strong { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 4px; }
.vacio span { display: block; max-width: 380px; margin: 0 auto; font-size: 13px; }
.vacio .btn-fila { justify-content: center; margin-top: 14px; }

.login-caja .sep { color: var(--linea); margin: 0 8px; }
/* La firma va afuera del cuadro de ingreso, sobre la foto */
.firma-okun {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 420px;
  background: none; border: 0; font: inherit; cursor: pointer; padding: 4px 8px;
  border-radius: 10px; text-align: left;
}
.firma-okun:hover { background: rgba(255, 255, 255, .12); }
.firma-okun img { height: 28px; margin: 0; flex: none; }
.firma-okun strong { display: block; font-size: 12.5px; color: #fff; font-weight: 600; }
.firma-okun span span { font-size: 11.5px; color: rgba(255, 255, 255, .82); }

/* Zocalo de la aplicacion: cruza toda la pantalla, tambien abajo del lateral */
.pie-okun {
  flex: none; text-align: center;
  padding: 0; font-size: 11.5px; color: rgba(255, 255, 255, .72);
  background: #0f2a1e;
}
.pie-okun button {
  width: 100%; padding: 8px 16px;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.pie-okun button:hover { background: rgba(255, 255, 255, .07); }
.pie-okun .sitio { color: #fff; }
.pie-okun strong { color: #fff; font-weight: 600; }
.pie-okun .sep { color: rgba(255, 255, 255, .35); margin: 0 8px; }

/* La ventana que cuenta de donde sale el prototipo */
.acerca-okun { text-align: center; padding-top: 4px; }
.acerca-okun img { height: 40px; margin-bottom: 6px; }
.acerca-okun .lema { font-size: 12.5px; color: var(--suave); margin-bottom: 16px; }
.acerca-okun .txt { text-align: left; }

/* ---------- calendario ---------- */
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendario .dow { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); padding-bottom: 2px; font-weight: 600; }
.dia {
  min-width: 0;
  background: var(--panel); border: 1px solid var(--linea); border-radius: 8px;
  min-height: 96px; padding: 6px 6px 7px; cursor: pointer; position: relative; text-align: left;
  font: inherit; color: inherit; display: flex; flex-direction: column; gap: 3px;
}
.dia:hover { border-color: var(--verde); }
.dia.vacio-dia { background: transparent; border: 0; cursor: default; }
.dia.finde { background: #fbfcfd; }
.dia.feriado { background: #fff8ee; border-color: #f5dcb8; }
.dia.incompleto { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo-claro); }
.dia .cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dia .lista { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dow-dia { display: none; }
/* El número del día manda; el del mes acompaña, porque el mes del hospital
   arranca en el mes anterior y sin eso no se sabe de qué día se habla. */
.dia .num { font-size: 11px; color: var(--suave); }
.dia .num b { font-weight: 700; font-size: 13px; color: var(--tinta); }
.dia .quirs { display: flex; flex-wrap: wrap; gap: 3px; }
.dia .quir {
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
/* Bloque lleno y no pastilla clara: el quirófano del día se busca de lejos */
.dia .quir.gen { background: var(--tinta); color: #fff; }
.dia .quir.esp { background: var(--verde); color: #fff; }
/* Referencias del mes: los feriados con su motivo, debajo de la grilla */
.refs-calendario {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--suave);
}
.refs-calendario span { display: inline-flex; align-items: center; gap: 6px; }
.refs-calendario strong {
  background: #fde68a; color: var(--tinta);
  padding: 1px 6px; border-radius: 5px; font-size: 11px;
}
/* Las hojas del ciclo solo existen para la impresora */
.hojas-ciclo { display: none; }

.refs-calendario .et {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 10.5px; color: var(--tinta);
}

/* Un apellido largo no puede partir la fila en dos: la celda crecería y el mes
   quedaría desparejo. Se corta con puntos suspensivos y el nivel y el sector,
   que son lo que se busca de un vistazo, no ceden lugar. */
.dia .asignado { font-size: 11.5px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.dia .asignado .anio { min-width: 0; font-size: 9.5px; padding: 0 3px; flex: none; }
.dia .asignado .sig { font-size: 9.5px; font-weight: 700; color: var(--suave); letter-spacing: .02em; flex: none; }
.dia .asignado .niv { display: none; }
.dia .asignado b {
  font-weight: 600; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 5px; border-radius: 5px;
}
/* Mismo codigo de color que los badges de nivel: el apellido es el badge */
.dia .asignado b.aR4 { background: #fee2e2; color: #991b1b; }
.dia .asignado b.aR3 { background: #dcfce7; color: #166534; }
.dia .asignado b.aR2 { background: #fef9c3; color: #854d0e; }
.dia .asignado b.aR1 { background: #e0f2fe; color: #075985; }
.dia .falta { font-size: 11px; color: var(--rojo); font-weight: 600; }

/* Las tres tarjetas del algoritmo: mismo alto minimo y separadas parejo */
/* Barra de avance de la planificacion: el motor corre en tajadas y le devuelve
   el control al navegador, asi que esto se mueve de verdad. */
.barra-avance { height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden;
  margin: 12px 2px 0; }
.barra-avance span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--verde); transition: width .15s linear; }

/* La fila de totales de una tabla de doble entrada. */
.tabla tr.totales td { border-top: 2px solid var(--linea); background: #fafbfc; }

/* Interruptor de si o no: la pastilla corre y el estado se ve sin leer. */
.switch { position: relative; display: inline-block; width: 40px; height: 23px; flex: 0 0 40px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; }
.switch .pista { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1;
  transition: background .15s; pointer-events: none; }
.switch .pista::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .pista { background: var(--verde); }
.switch input:checked + .pista::after { transform: translateX(17px); }
.switch input:disabled { cursor: default; }
.switch input:disabled + .pista { opacity: .45; }
.switch input:focus-visible + .pista { outline: 2px solid var(--verde); outline-offset: 2px; }

/* El si o el no de una preferencia, con el interruptor al lado. */
.si-no { display: inline-flex; align-items: center; gap: 8px; }
.si-no b { font-size: 12.5px; font-weight: 600; color: var(--suave); min-width: 20px; }
.si-no.activo b { color: var(--verde-osc); }

/* Los puntos que vale un grupo de reglas, en un circulo al lado del titulo. */
.circulo-puntos { display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-osc); line-height: 1; }
.circulo-puntos b { font-size: 15px; font-weight: 700; }
.circulo-puntos small { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em;
  opacity: .75; margin-top: 1px; }

.tarjeta.plegable.alg { margin-top: 14px; }
.tarjeta.plegable.alg:first-child { margin-top: 0; }
/* Sin alto minimo: cada tarjeta ocupa lo que tiene. Forzarlas parejas dejaba a
   la del modelo, que son tres renglones, con medio cuerpo vacio. */

/* Un dia de quirofano se prende y se apaga en la grilla */
.quir-celda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--linea);
  background: #fff; color: var(--suave); font: inherit; font-size: 14px; cursor: pointer;
}
.quir-celda.on { background: var(--azul-claro); border-color: #b6cdf7; color: var(--azul); }
button.quir-celda:hover { border-color: var(--verde); }

/* Cuantas reglas rompio un mes: rojo lo que bloquea, ambar lo que solo pesa */
.cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px;
  font-size: 11.5px; font-weight: 700; margin-left: 4px;
}
.cuenta .ico-alerta { margin-right: 3px; }
.cuenta.mal { background: var(--rojo-claro); color: var(--rojo); }
.cuenta.alerta { background: var(--ambar-claro); color: var(--ambar); }

/* Estado por especialidad: una tarjeta por sector y un renglon por residente */
.sectores-dia { gap: 10px; }
.sector-dia {
  border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; min-width: 0;
}
.sector-dia.critico { border-color: #f3c7ce; background: var(--rojo-claro); }
.sector-dia .cab-sector {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
}
.sector-dia .fila-res { padding: 4px 0; font-size: 12px; border-bottom: 0; }
.sector-dia .fila-res .nom {
  font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El estado no se parte en dos renglones: cede el apellido, que ya se corta */
.sector-dia .fila-res .pastilla {
  flex: none; white-space: nowrap; overflow-wrap: normal; padding: 1px 6px; font-size: 10.5px;
}
.sector-dia .fila-res .anio { flex: none; }

/* Los días en que una regla quedó rota: fecha y apellido, para poder ir a mirar */
.dia-roto {
  display: inline-block; margin: 1px 4px 1px 0; padding: 0 6px; border-radius: 5px;
  background: var(--ambar-claro); color: var(--ambar); font-size: 11px; white-space: nowrap;
}
.dia-roto b { font-weight: 700; }

/* Tarjeta plegable: lo que se consulta solo si algo llama la atención */
.tarjeta.plegable { padding: 0; }
.tarjeta.plegable > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
}
.tarjeta.plegable > summary::-webkit-details-marker { display: none; }
.tarjeta.plegable > summary h2 { margin: 0; }
.tarjeta.plegable > summary .espacio { flex: 1; }
/* Sin esto no se entiende que la tarjeta esconde algo: el galón solo no alcanza. */
.tarjeta.plegable > summary .abrir {
  font-size: 12.5px; font-weight: 600; color: var(--verde);
}
.tarjeta.plegable > summary .galon { color: var(--verde); transition: transform .15s ease; }
.tarjeta.plegable[open] > summary .galon { transform: rotate(180deg); }
.tarjeta.plegable[open] > summary .abrir { color: var(--suave); }
.tarjeta.plegable[open] > summary .galon { color: var(--suave); }
.tarjeta.plegable > summary { background: #fbfcfd; border-radius: var(--radio); }
.tarjeta.plegable[open] > summary { border-bottom: 1px solid var(--linea); border-radius: var(--radio) var(--radio) 0 0; }
.tarjeta.plegable > summary:hover { background: var(--verde-claro); }
.tarjeta.plegable > summary:hover .abrir, .tarjeta.plegable > summary:hover .galon { color: var(--verde-osc); }
.tarjeta.plegable > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.tarjeta.plegable > *:last-child { margin-bottom: 14px; }

.btn.ghost.peligro { color: var(--rojo); border-color: #f3c7ce; }
.btn.ghost.peligro:hover { background: var(--rojo-claro); }

/* ---------- detalle día ---------- */
.fila-res { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.fila-res:last-child { border-bottom: 0; }
.fila-res .nom { font-weight: 600; }
.fila-res .espacio { flex: 1; }

.semaforo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.fila-esp { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linea); }
.fila-esp input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--linea); border-radius: 6px; background: none; cursor: pointer; flex: none; }
.fila-esp input[type="text"] { flex: 1 1 auto; min-width: 0; }
.fila-esp input.sigla { flex: 0 0 74px; text-transform: uppercase; }
.fila-esp select { flex: 0 0 auto; }

.tabla.rotaciones th { white-space: nowrap; vertical-align: top; }
.tabla.rotaciones th.actual { background: var(--verde-claro); color: var(--verde-osc); }
/* El apellido no se parte y la columna queda fija: la grilla es mas ancha que la
   pantalla, y sin eso uno pierde de vista de quien es la fila al desplazarse. */
.tabla.rotaciones th:first-child, .tabla.rotaciones td:first-child {
  white-space: nowrap; min-width: 190px;
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  box-shadow: 1px 0 0 var(--linea);
}
.tabla.rotaciones thead th:first-child { z-index: 3; }
.tabla.rotaciones td select {
  font-size: 12px; padding: 3px 6px; max-width: 130px;
  background: #fff; color: var(--texto);
}
.tabla.rotaciones td select:hover { border-color: var(--verde); }
/* Solo las rotaciones externas y las licencias llevan color: no son un sector más */
.tabla.rotaciones td.cl-externo select {
  background: #eef2f7; border-color: #cbd5e1; color: #44546a; font-weight: 700;
}
.tabla.rotaciones td.cl-licencia select {
  background: var(--ambar-claro); border-color: #fde68a; color: var(--ambar); font-weight: 700;
}
.tabla.rotaciones td.cl-externo { color: #44546a; font-weight: 700; }
.tabla.rotaciones td.cl-licencia { color: var(--ambar); font-weight: 700; }

/* Clase del sector: interno, rotación externa o licencia */
.chip.externo { border-style: dashed; }
.chip.licencia { background: var(--ambar-claro); border-color: #fde68a; color: var(--ambar); }
.muestra.cl-interno { background: var(--verde); }
.muestra.cl-externo { background: #94a3b8; }
.muestra.cl-licencia { background: var(--ambar); }

.sector-caja { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; border-left: 3px solid var(--c); }
.sector-caja.critico { background: var(--rojo-claro); border-color: #f6c6ce; }
.sector-caja h4 { font-size: 12.5px; margin-bottom: 4px; }
.sector-caja .m { font-size: 12px; display: flex; align-items: center; gap: 5px; }
.est { font-size: 10.5px; padding: 0 5px; border-radius: 4px; font-weight: 700; }
.est.guardia { background: var(--verde); color: #fff; }
.est.post { background: var(--ambar-claro); color: var(--ambar); }
.est.activo { background: #eef1f4; color: var(--suave); }

/* ---------- login ---------- */
.login {
  min-height: 100vh; display: grid; place-items: center; gap: 16px; align-content: center;
  padding: 24px;
  position: relative; isolation: isolate;
  background: #0f2a1e url('../assets/background.jpg') center/cover no-repeat;
}
.login::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(0, 60, 32, .14) 0%, rgba(4, 26, 16, .55) 70%),
    linear-gradient(180deg, rgba(4, 26, 16, .18) 0%, rgba(4, 26, 16, .48) 100%);
  backdrop-filter: saturate(1.1) blur(1px);
}
.login-caja {
  width: 100%; max-width: 420px; background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 16px; padding: 28px;
  box-shadow: 0 24px 60px rgba(4, 20, 12, .45);
  backdrop-filter: blur(6px);
}
.login-caja img { height: 54px; margin: 0 auto 16px; display: block; }
.login-caja h1 { margin-bottom: 4px; }
.opciones-rol { display: grid; gap: 8px; margin: 14px 0; }
.rol-op { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--linea); border-radius: 10px; padding: 11px 13px; cursor: pointer; background: #fff; text-align: left; font: inherit; }
.rol-op:hover { border-color: var(--verde); }
.rol-op.sel { border-color: var(--verde); background: var(--verde-claro); }
.rol-op .ico { font-size: 19px; line-height: 1; }
/* Lista para elegir a quien poner de guardia: nombre, nivel, sector y por que */
/* La lista es larga: cuanto más entre sin desplazarse, mejor se compara */
.lista-elegir { max-height: 52vh; overflow-y: auto; gap: 4px; }
.lista-elegir .rol-op { align-items: center; gap: 8px; padding: 5px 10px; }
.lista-elegir .nom { font-weight: 600; color: var(--tinta); font-size: 14px; }
.lista-elegir .espacio { flex: 1; }
.rol-op strong { display: block; font-size: 14px; color: var(--tinta); }
.rol-op span { font-size: 12.5px; color: var(--suave); }

/* ---------- modal / toast ---------- */
#modal { display: none; position: fixed; inset: 0; z-index: 90; }
#modal.visible { display: block; }
.modal-fondo { position: absolute; inset: 0; background: rgba(16, 24, 40, .45); }
.modal-caja {
  position: relative; margin: 5vh auto; background: #fff; border-radius: 12px;
  width: min(620px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25);
}
.modal-caja.ancho { width: min(940px, 96vw); }
.modal-cab { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.modal-cab h3 { flex: 1; }
.modal-cuerpo { padding: 16px; overflow: auto; }
.modal-pie { padding: 12px 16px; border-top: 1px solid var(--linea); display: flex; gap: 8px; justify-content: flex-end; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 90px);
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 13.5px; z-index: 100; opacity: 0; transition: .22s; max-width: 92vw; text-align: center;
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.ok { background: var(--verde-osc); }
.toast.mal { background: var(--rojo); }

/* ---------- stepper ---------- */
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--texto); }
.stepper button:hover { border-color: var(--verde); color: var(--verde); }
.stepper .v { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.interruptor { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
/* Dentro de una tabla el interruptor no agrega alto: la fila la manda la celda */
.tabla .interruptor { padding: 0; }
.interruptor input { width: 17px; height: 17px; accent-color: var(--verde); }



/* ---------- botón azul con ícono ---------- */
.btn.azul { background: var(--azul); border-color: var(--azul); }
.btn.azul:hover { background: #1a3fb5; border-color: #1a3fb5; }
.btn.icono-btn { padding: 8px 11px; }

/* ---------- barra sobre el calendario ---------- */
.barra-calendario {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.filtros-nivel { display: flex; align-items: center; gap: 6px; }
.circulo-nivel {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea);
  background: #fff; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--suave);
}
/* Ademas de filtrar, dicen que color es cada nivel en el calendario */
.circulo-nivel.aR4 { background: #fee2e2; color: #991b1b; border-color: #f6c6ce; }
.circulo-nivel.aR3 { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.circulo-nivel.aR2 { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.circulo-nivel.aR1 { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.circulo-nivel:hover { box-shadow: 0 0 0 2px var(--verde-claro); }
.circulo-nivel.activo { box-shadow: 0 0 0 2px var(--verde); }
.leyenda {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--suave);
}
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.muestra { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--linea); }
.muestra.nivel-pendiente { background: #eef1f4; }
.muestra.nivel-planificado { background: var(--azul-claro); border-color: #c7d7fe; }
.muestra.nivel-publicado { background: var(--verde); border-color: var(--verde); }

/* ---------- línea de pasos ---------- */
.pasos { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.pasos li {
  flex: 1; min-width: 150px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--suave); padding: 8px 12px;
  border-radius: 8px; background: var(--panel); border: 1px solid var(--linea);
}
.pasos .num { font-weight: 700; font-size: 11px; opacity: .7; }
.pasos li { cursor: default; }
.pasos li.hecho, .pasos li.actual { cursor: pointer; }
.pasos li.actual { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-osc); font-weight: 600; }
.pasos li.hecho { background: var(--verde); border-color: var(--verde); color: #fff; }
.pasos li.hecho .num { opacity: .9; }
.pasos li.hecho .num::after { content: ' ✓'; }
.pasos li.hecho:hover { background: var(--verde-osc); }

/* ---------- planificador ---------- */
.meses-lista { display: flex; flex-direction: column; gap: 5px; }
.mes-fila {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid #cbd5e1;
  border-radius: var(--radio); padding: 5px 12px;
}
/* Una fila por perfil en el alta de usuarios: los tres campos y la cruz de
   quitar, en una sola línea mientras entre. */
.fila-perfil {
  display: grid;
  grid-template-columns: 1fr 1fr 90px 34px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.fila-perfil .campo { margin: 0; }
.fila-perfil button { height: 38px; padding: 0; }
@media (max-width: 640px) {
  .fila-perfil { grid-template-columns: 1fr 1fr; }
  .fila-perfil button { grid-column: 2; justify-self: end; width: 38px; }
}

/* El estado del mes se lee en el fondo del nombre, sin gastar una pastilla. */
.mes-nombre {
  font-size: 14px; font-weight: 650; color: var(--tinta);
  background: #eef1f4; border-radius: 999px; padding: 3px 12px;
}
.mes-fila.parcial .mes-nombre { background: var(--azul-claro); color: var(--azul); }
.mes-fila.completo .mes-nombre { background: var(--verde-claro); color: var(--verde-osc); }

/* Un dato del mes con su icono: semanas, equipo disponible. */
.dato-mes {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--suave);
}
.dato-mes.alerta { color: var(--ambar); }
.dato-mes.mal { color: var(--rojo); }

.circulo-puntos.chico { width: 34px; height: 34px; }
.circulo-puntos.chico b { font-size: 12.5px; }
.circulo-puntos.chico small { font-size: 7px; }
.circulo-puntos.alerta { background: var(--ambar-claro); color: var(--ambar); }
.circulo-puntos.mal { background: var(--rojo-claro); color: var(--rojo); }

.mes-fila strong { font-size: 14px; color: var(--tinta); }
.mes-fila .btn { padding: 4px 10px; }
.mes-fila .espacio { flex: 1; }
.mes-fila.parcial { border-left-color: var(--ambar); }
.mes-fila.completo { border-left-color: var(--verde); }

/* Cabecera de tarjeta: el titulo, lo que lo califica y la accion, en una linea */
.cab-tarjeta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cab-tarjeta .espacio { flex: 1; }

/* En la tabla de cupos el control es el dato: la celda se arma alrededor del stepper */
.tabla.cupos td { vertical-align: middle; }
/* El rotulo del tipo de dia no se parte en letras cuando la tabla aprieta. */
.tabla.cupos td:first-child, .tabla.cupos th:first-child { white-space: nowrap; }
.tabla.cupos .stepper { display: inline-flex; }
.tabla.cupos td.num { text-align: center; }
.tabla.cupos th.num { text-align: center; }

.tabla.finas th, .tabla.finas td { padding: 2px 8px; }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover { background: var(--verde-claro); }
.tabla th.orden { cursor: pointer; user-select: none; white-space: nowrap; }
.tabla th.orden:hover { color: var(--verde); }
.pastilla.con-lapiz { display: inline-flex; align-items: center; gap: 5px; }
.con-barra { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.con-barra .barra { width: 70px; }

.mes-caja {
  background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid #cbd5e1;
  border-radius: var(--radio); padding: 14px 16px; cursor: pointer; text-align: left;
  font: inherit; color: inherit; display: flex; flex-direction: column; gap: 8px;
}
.mes-caja:hover { border-color: var(--verde); }
.mes-caja.activo { box-shadow: 0 0 0 2px var(--verde-claro); }
.mes-caja.parcial { border-left-color: var(--ambar); }
.mes-caja.completo { border-left-color: var(--verde); background: var(--verde-claro); }
.mes-caja strong { font-size: 15px; color: var(--tinta); }
.mes-caja .niveles { display: flex; gap: 5px; }
.nivel {
  flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; padding: 6px 0;
  border-radius: 6px; background: #eef1f4; color: var(--suave);
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.nivel:hover { border-color: var(--verde); color: var(--verde-osc); }
.nivel.planificado { background: var(--azul-claro); color: var(--azul); }
.nivel.publicado { background: var(--verde); color: #fff; }
.nivel.bloqueado { opacity: .45; cursor: not-allowed; }
.mes-caja { cursor: default; }
.mes-caja:hover { border-color: var(--linea); }

.asignado.sin-publicar { opacity: .55; font-style: italic; }


/* ---------- planificador: título y proceso ---------- */
.titulo-plan {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 0;
}
.nivel-plan {
  background: var(--verde); color: #fff; border-radius: 8px;
  padding: 2px 10px; font-size: 15px; font-weight: 700;
}

.etapas { list-style: none; margin: 0; padding: 0; }
.etapas li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; color: var(--suave); font-size: 14px;
  border-bottom: 1px solid var(--linea);
}
.etapas li:last-child { border-bottom: 0; }
.etapas .marca {
  width: 18px; height: 18px; padding: 0; border-radius: 50%; flex: none;
  box-sizing: border-box; border: 2px solid var(--linea);
}
.etapas li.activa { color: var(--tinta); font-weight: 600; }
.etapas li.activa .marca {
  border-color: var(--verde); border-top-color: transparent;
  animation: girar .7s linear infinite;
}
.etapas li.hecha { color: var(--verde-osc); }
.etapas li.hecha .marca { background: var(--verde); border-color: var(--verde); }
.etapas li.hecha .marca::after {
  content: '✓'; color: #fff; font-size: 11px; display: block; text-align: center; line-height: 14px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- responsive ---------- */
.nav-movil { display: none; }

@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leyenda { margin-left: 0; width: 100%; }
}

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  h1 { font-size: 19px; }
  h2 { font-size: 16px; }

  .lateral { display: none; }
  .principal { width: 100%; }
  .vista { padding: 14px 12px 88px; }
  /* En un telefono el zocalo pelearia con la barra de navegacion */
  .pie-okun { display: none; }

  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .titulo { font-size: 16px; }
  .usuario { padding: 2px; }
  .usuario .datos { display: none; }

  /* Una tarjeta por fila: dos tablas lado a lado no entran en un teléfono */
  .grilla { grid-template-columns: 1fr; gap: 10px; }
  /* Los KPI son la excepción: se leen de un vistazo de a dos por fila */
  .grilla.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 11px 12px; }
  .kpi .valor { font-size: 21px; }
  .kpi .rotulo { font-size: 11.5px; }
  .kpi .pie { font-size: 11px; }

  /* Los formularios de dos columnas vuelven a una sola */
  .modal-cuerpo .g2, .modal-cuerpo .g3, .modal-cuerpo .g4 { grid-template-columns: 1fr; }

  .tarjeta { padding: 12px; margin-bottom: 12px; }
  .tabla { font-size: 12.5px; }
  .tabla th, .tabla td { padding: 6px 7px; }
  /* La tabla conserva su ancho natural y se desplaza: nunca parte las palabras */
  .scroll-x > table { min-width: max-content; }
  .scroll-x > table th, .scroll-x > table td { white-space: nowrap; }

  /* Sin zoom automático al enfocar un campo en iOS */
  input[type=text], input[type=date], input[type=number], input[type=password], select, textarea {
    font-size: 16px;
  }
  .herramientas .filtros > input[type=text] { flex: 1 1 100%; min-width: 0; }
  .herramientas .filtros > select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .herramientas .acciones { margin-left: 0; width: 100%; }
  .btn-fila > input[type=text] { flex: 1 1 100%; min-width: 0; }
  .cabecera-vista { gap: 8px; }
  .cabecera-vista > select { flex: 1 1 100%; }

  /* Objetivos táctiles cómodos */
  button.icono { padding: 8px; font-size: 16px; }
  .stepper button { width: 32px; height: 32px; font-size: 17px; }
  .interruptor input { width: 20px; height: 20px; }
  /* La etiqueta entera conmuta, así que el area util es la fila y no el cuadrito */
  .interruptor { min-height: 36px; }
  .circulo-nivel { width: 40px; height: 40px; }
  /* Los iconos de accion de las filas y los botones chicos se dejan tocar */
  .acc { width: 36px; height: 36px; }
  .acc + .acc { margin-left: 6px; }
  .btn { padding: 9px 14px; }
  .btn.chico { padding: 8px 12px; }
  .mes-fila .btn { padding: 8px 12px; }
  .tabla .btn, .tabla select, .tabla input { min-height: 34px; }

  /* La cabecera no necesita el alto del logo: en el telefono el logo no esta */
  :root { --alto-cabecera: 56px; }

  .calendario { gap: 3px; }
  .dow { font-size: 10px; }
  .dia { min-height: 58px; padding: 3px; gap: 2px; }
  .dia .num { font-size: 12px; }
  .dia .asignado { font-size: 9.5px; gap: 3px; }
  .dia .asignado .muted, .dia .asignado .sig { display: none; }
  .dia .quir { font-size: 8.5px; padding: 0 3px; }
  .dia .falta { font-size: 10px; }

  .barra-calendario { gap: 10px; }
  .leyenda { font-size: 11px; gap: 8px; }

  .pasos li { min-width: 0; flex: 1 1 calc(50% - 4px); font-size: 11.5px; padding: 7px 9px; }

  /* El planificador en el teléfono: cada mes en su fila y el botón a lo ancho */
  .mes-fila { padding: 10px 12px; }
  .mes-fila .espacio { flex: 1 1 100%; height: 0; }
  .mes-fila .btn { flex: 1 1 100%; }

  /* Tarjetas con tabla adentro: la tabla manda su propio scroll */
  .alto-fijo { max-height: 320px; }
  .con-barra .barra { width: 44px; }
  .titulo-plan { font-size: 18px; }
  .fila-res { flex-wrap: wrap; }
  .fila-esp { flex-wrap: wrap; }
  .fila-esp input[type="text"] { flex: 1 1 60%; }

  .semaforo { grid-template-columns: 1fr; }
  .sector-caja { padding: 8px; }

  /* Usuarios de prueba: el perfil manda y el acceso va en una sola celda */
  .col-acceso { display: table-cell; }
  .col-usuario, .col-clave { display: none; }
  /* Esta tabla entra sin scroll: el botón de entrar tiene que quedar a la vista */
  .scroll-x > table.tabla-demo { min-width: 0; }
  .scroll-x > table.tabla-demo th,
  .scroll-x > table.tabla-demo td { white-space: normal; overflow-wrap: anywhere; }
  .tabla-demo td:first-child, .tabla-demo th:first-child { width: 45%; }
  .tabla-demo td:last-child { width: 1%; }

  /* La ventana se estira solo si el contenido lo pide: una ventana corta que
     ocupa la pantalla entera se lee como un error. */
  .modal-caja {
    margin: 0; width: 100vw; height: auto; max-height: 100vh; border-radius: 0;
    position: absolute; bottom: 0;
  }
  .modal-pie { flex-wrap: wrap; }
  .modal-pie .btn { flex: 1 1 auto; }

  .nav-movil {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--tinta); border-top: 1px solid #000;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .nav-movil button {
    flex: 1; background: none; border: 0; font: inherit; font-size: 10px; color: rgba(255, 255, 255, .72);
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; cursor: pointer;
    border-radius: 8px; min-width: 0;
  }
  .nav-movil button .ico { font-size: 19px; line-height: 1; }
  /* Siete botones en un teléfono dan cincuenta píxeles cada uno, y ahí no entra
     "Planificador". Se muestra el rótulo del que está abierto y nada más: el resto
     se reconoce por el ícono, que es como funciona cualquier barra de abajo. */
  .nav-movil button .txt { display: none; }
  .nav-movil button.activo .txt {
    display: block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-movil button.activo { flex: 1.6; }
  /* El aviso se monta sobre el icono: como renglon propio estiraba la barra */
  .nav-movil button { position: relative; }
  .nav-movil .aviso-num {
    position: absolute; top: 2px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
  .nav-movil button.activo { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .12); }
}

/* En un teléfono, siete columnas dejan cincuenta píxeles por día y los apellidos
   quedan cortados a la mitad. Abajo de 560 el mes se lee como agenda: un día por
   renglón, la fecha a la izquierda y el equipo de esa noche al lado, entero. */
@media (max-width: 560px) {
  .calendario { grid-template-columns: 1fr; gap: 4px; }
  .calendario .dow { display: none; }
  .dia.vacio-dia { display: none; }
  .dia {
    flex-flow: row nowrap; align-items: center; gap: 8px;
    min-height: 0; padding: 7px 9px;
  }
  .dia .cab { flex: 0 0 74px; flex-wrap: nowrap; }
  .dia .num { font-size: 13px; }
  /* El equipo ocupa lo que le queda y se acomoda en dos renglones si hace falta. */
  .dia .lista { flex-direction: row; flex-wrap: wrap; gap: 3px 8px; flex: 1 1 auto; min-width: 0; }
  .dia .lista .asignado { flex: 0 1 calc(50% - 4px); }
  .dow-dia { display: inline; font-size: 10.5px; color: var(--suave); text-transform: uppercase; }
  .dia .asignado { font-size: 11.5px; gap: 4px; }
  .dia .asignado b { font-size: 11.5px; padding: 0 4px; }
  .dia .asignado .muted { display: none; }
  .dia .quirs { display: none; }
  .leyenda span:nth-child(n+4) { display: none; }
}

@media (max-width: 420px) {
  .g4, .g3, .g2 { gap: 8px; }
  .kpi .valor { font-size: 19px; }
  .pasos li { flex: 1 1 100%; }
  .nav-movil button { font-size: 9.5px; }
}

/* Lo que no va al papel: avisos y listas de trabajo. */
@media print { .no-imprimir { display: none !important; } }

/* Encabezado que solo existe en el papel */
.hoja-print { display: none; }

@media print {
  .hoja-print {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 2px solid var(--verde);
  }
  .hoja-print img { height: 42px; width: auto; }
  .hoja-print .datos { flex: 1; min-width: 0; }
  .hoja-print h1 { font-size: 18px; margin: 0 0 2px; }
  .hoja-print p { margin: 0; font-size: 10.5px; color: var(--texto); }
  .hoja-print .sello { text-align: right; font-size: 9.5px; color: var(--suave); }
  .hoja-print .sello p { font-size: 9.5px; color: var(--suave); }

  /* El calendario del mes entra en una hoja apaisada y no en una vertical. */
  @page { size: landscape; margin: 10mm; }

  .topbar, .lateral, .nav-movil, .btn, .btn-fila, #modal, .toast,
  .subtabs, .herramientas, .paginador, .pie-okun { display: none !important; }
  html, body { background: #fff; }
  .app { height: auto; overflow: visible; display: block; }
  .principal { height: auto; }
  .vista { padding: 0; max-width: none; overflow: visible; }
  .tarjeta { break-inside: avoid; box-shadow: none; border: 0; padding: 0; }
  .scroll-x, .tabla-ventana, .alto-fijo { max-height: none; overflow: visible; }
  .dia { min-height: 74px; }

  /* La hoja sale en color: el fondo del nivel, el del quirófano y el del feriado
     son el código que se lee de un vistazo, así que se fuerzan a imprimirse. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Aun con color, el nivel va escrito y la sigla del sector al lado del
     apellido: la hoja se fotocopia y ahí el color se pierde. */
  .dia .asignado .niv {
    display: inline; font-size: 8.5px; font-weight: 700; flex: none;
    border: 1px solid currentColor; border-radius: 3px; padding: 0 3px;
  }
  .dia .asignado .sig { display: inline; }
  /* Un mes por hoja cuando se imprime el ciclo entero */
  body.print-ciclo .app { display: none !important; }
  body.print-ciclo .hojas-ciclo { display: block; }
  .hojas-ciclo .hoja-mes { break-after: page; page-break-after: always; }
  .hojas-ciclo .hoja-mes:last-child { break-after: auto; page-break-after: auto; }

  /* Los feriados del mes van enmarcados y no se parten entre hojas */
  .refs-calendario {
    border: 1px solid var(--linea); border-radius: 6px;
    padding: 8px 10px; break-inside: avoid;
  }
}