/* ============================================================
   Sistema de Personal H&T
   Azul y rojo del logo. Fondo gris frio para que el semaforo
   sea lo unico con color fuerte en pantalla.
   ============================================================ */

:root {
  --azul:        #16375F;
  --azul-hondo:  #0F2647;
  --azul-claro:  #E4EAF2;
  --rojo:        #C8201A;

  --fondo:   #EEF1F5;
  --papel:   #FFFFFF;
  --borde:   #D5DCE5;
  --texto:   #16202C;
  --apagado: #5C6B7C;

  --verde: #12805C;
  --ambar: #B26B00;
  --rojo-s:#C0281F;
  --gris:  #93A1B0;

  --verde-f: #E3F3EC;
  --ambar-f: #FBF0DC;
  --rojo-f:  #FAE6E4;
  --gris-f:  #EBEFF3;

  --menu: 236px;
  --radio: 5px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Los DNI, fechas y notas se leen en columna: cifras del mismo ancho. */
.cifra, td.cifra, .dni, .fecha {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

a { color: var(--azul); }

/* ---------- Barra superior ---------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.barra .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.barra .logo img { height: 34px; width: auto; display: block; }
.barra .titulo {
  font-size: 15px; font-weight: 600; color: var(--azul);
  line-height: 1.15;
}
.barra .titulo small {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--apagado);
}
.barra .yo { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.barra .yo .quien { text-align: right; line-height: 1.2; }
.barra .yo .quien b { font-size: 13.5px; display: block; }
.barra .yo .quien span { font-size: 11.5px; color: var(--apagado); }

.hamburguesa {
  display: none; background: none; border: 1px solid var(--borde);
  border-radius: var(--radio); width: 40px; height: 36px;
  cursor: pointer; color: var(--azul); font-size: 19px; line-height: 1;
}

/* ---------- Menu lateral ------------------------------------ */
.envoltura { display: flex; min-height: calc(100vh - 58px); }

.menu {
  width: var(--menu); flex: 0 0 var(--menu);
  background: var(--azul-hondo);
  padding: 14px 10px 24px;
}
/* Titulo de grupo, con una linea arriba que separa de verdad las
   categorias. Antes eran solo tres palabras chicas y las secciones
   se leian como una lista larga sin corte. */
.menu .grupo {
  color: #8FA6C4; font-size: 10.5px; font-weight: 700;
  padding: 8px 11px 6px; letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: 12px; border-top: 1px solid rgba(255,255,255,.11);
}
.menu .grupo:first-child { margin-top: 4px; border-top: none; }

/* Las etapas del servicio van indentadas: cuelgan de Servicios,
   no son secciones aparte. */
.menu a.sub { padding-left: 24px; font-size: 13.5px; }
.menu a.sub .ic.paso {
  width: 17px; height: 17px; line-height: 17px; text-align: center;
  border-radius: 50%; background: rgba(255,255,255,.13);
  font-size: 10.5px; font-weight: 700; color: #D9E3F0;
}
.menu a.sub.activo .ic.paso { background: rgba(0,0,0,.25); color: #fff; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--radio);
  color: #D9E3F0; text-decoration: none; font-size: 14px;
}
.menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu a.activo { background: var(--rojo); color: #fff; font-weight: 600; }
.menu a .ic { width: 18px; text-align: center; opacity: .9; }
.menu a .globo {
  margin-left: auto; background: rgba(255,255,255,.16);
  border-radius: 10px; padding: 1px 7px; font-size: 11.5px;
}
.menu a.activo .globo { background: rgba(0,0,0,.22); }

.contenido { flex: 1; padding: 20px; min-width: 0; }

/* ---------- Encabezado de pagina ---------------------------- */
.cabecera {
  display: flex; align-items: flex-end; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px;
}
/* Titulo grande: es lo que dice en que pantalla estas parado.
   Antes era 21px y se perdia entre el resto del texto. */
.cabecera h1 {
  font-size: 30px; margin: 0; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15; color: var(--azul);
}
.cabecera p { margin: 4px 0 0; color: var(--apagado); font-size: 14px; }
.cabecera .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Ficha: foto a la izquierda, datos a la derecha, en una sola
   tarjeta. Antes eran dos y la pagina quedaba larguisima. */
.ficha-2col {
  display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap;
}
.ficha-foto  { flex: 0 0 190px; }
.ficha-datos { flex: 1; min-width: 300px; }
@media (max-width: 780px) {
  /* En el celular la foto va arriba y todo lo demas debajo, en una
     sola columna. Intente ponerlos lado a lado y salio mal: el
     bloque tiene cuatro hijos, quedaron los cuatro en fila y el
     formulario de subir foto se aplasto a cero de ancho. */
  .ficha-2col  { gap: 16px; }
  .ficha-foto  { flex: 1 1 100%; min-width: 0; }
  .ficha-datos { flex: 1 1 100%; min-width: 0; }
}

/* El selector de archivo no respeta el ancho del contenedor si no
   se le dice. */
.campo input[type="file"] { max-width: 100%; min-width: 0; }
.ficha-foto, .ficha-datos { max-width: 100%; }

/* Bloques de cliente que se abren y cierran */
.cliente-bloque {
  border: 1px solid var(--borde); border-radius: var(--radio);
  margin-bottom: 8px; background: var(--papel);
}
.cliente-bloque > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none;
  border-radius: var(--radio);
}
.cliente-bloque > summary::-webkit-details-marker { display: none; }
.cliente-bloque > summary:hover { background: #F7F9FC; }
.cliente-bloque > summary b { font-size: 14.5px; color: var(--azul); }
.cliente-bloque > summary .flecha {
  color: var(--apagado); font-size: 17px; line-height: 1;
  transition: transform .15s ease; display: inline-block;
}
.cliente-bloque[open] > summary { border-bottom: 1px solid var(--borde); }
.cliente-bloque[open] > summary .flecha { transform: rotate(90deg); }
.cliente-bloque .cliente-cuerpo { padding: 12px 14px 14px; }
.cliente-bloque summary .punto { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cliente-bloque > summary .flecha { transition: none; }
}
/* Al imprimir se abren todos, si no el papel sale vacio. */
@media print {
  .cliente-bloque > summary { display: none; }
  .cliente-bloque .cliente-cuerpo { display: block !important; }
  .cliente-bloque { border: none; }
}

/* Foto del trabajador */
.foto-persona {
  width: 58px; height: 58px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--borde); background: var(--gris-f); flex: 0 0 auto;
}
.foto-grande {
  width: 170px; height: 170px; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--borde); background: var(--gris-f); flex: 0 0 auto;
}
@media (max-width: 700px) {
  .foto-persona { width: 46px; height: 46px; }
  .foto-grande  { width: 130px; height: 130px; }
}

/* ---------- Calendario -------------------------------------- */
.cal-barra {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.cal-barra b { font-size: 16px; color: var(--azul); min-width: 140px; }
.cal-barra .boton { padding: 5px 12px; }

.cal-grilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.cal-dia-nombre {
  text-align: center; font-size: 11.5px; font-weight: 600;
  color: var(--azul); background: var(--azul-claro);
  padding: 5px 2px; border-radius: 3px;
}
.cal-celda {
  min-height: 74px; padding: 4px 5px;
  border: 1px solid var(--borde); border-radius: 4px;
  background: var(--papel);
}
.cal-celda.vacia { background: #F4F6F9; border-color: #E7ECF2; }
.cal-celda.finde { background: #FAFBFD; }
.cal-celda.hoy   { border: 2px solid var(--rojo); }
.cal-num {
  font-size: 12px; font-weight: 600; color: var(--apagado);
  font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
.cal-celda.hoy .cal-num { color: var(--rojo); }
.cal-eventos { display: flex; flex-direction: column; gap: 2px; }
.cal-ev {
  display: block; font-size: 10.5px; line-height: 1.3;
  padding: 2px 5px; border-radius: 3px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev.verde { background: var(--verde-f); color: var(--verde); }
.cal-ev.ambar { background: var(--ambar-f); color: var(--ambar); }
.cal-ev.rojo  { background: var(--rojo-f);  color: var(--rojo-s); }
.cal-ev.azul  { background: var(--azul-claro); color: var(--azul); }
.cal-ev.gris  { background: var(--gris-f); color: var(--apagado); }
.cal-mas { font-size: 10px; color: var(--apagado); padding-left: 5px; }

/* En celular la grilla de 7 columnas no entra legible: se pasa a
   lista de dias, y solo los que tienen algo. */
@media (max-width: 700px) {
  .cal-grilla { grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-celda { min-height: 46px; padding: 2px 3px; }
  .cal-dia-nombre { font-size: 10px; }
  .cal-num { font-size: 10.5px; margin-bottom: 1px; }
  .cal-ev { font-size: 0; padding: 0; height: 5px; border-radius: 3px;
            margin-bottom: 1px; }
  .cal-mas { display: none; }
}

/* ---------- Tarjetas ---------------------------------------- */
.tarjeta {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 16px;
}
/* Titulo de tarjeta: dice que se hace ahi adentro, asi que tiene
   que verse antes que el contenido. Antes era 15px y se perdia. */
.tarjeta > h2 {
  font-size: 19px; margin: 0 0 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--azul);
  padding: 0 0 10px 11px;
  border-bottom: 1px solid var(--borde);
  border-left: 4px solid var(--rojo);
}

/* Tarjeta destacada: la que asigna a un servicio. Va en otro color
   para que no se confunda con los datos de la ficha, que son fijos,
   mientras que esto cambia en cada servicio. */
.tarjeta.destacada {
  background: #FFF9F0;
  border: 1px solid #E8C89A;
  border-left: 5px solid #D97A0B;
}
.tarjeta.destacada > h2 {
  color: #A85A05; border-bottom-color: #EBD5B5;
  border-left-color: #D97A0B;
}
.tarjeta.destacada .campo input,
.tarjeta.destacada .campo select { background: #fff; }

/* ---------- Resumen del tablero ----------------------------- */
.resumen { display: grid; gap: 12px; margin-bottom: 18px;
           grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.resumen .caja {
  background: var(--papel); border: 1px solid var(--borde);
  border-left: 4px solid var(--gris);
  border-radius: var(--radio); padding: 13px 15px;
}
.resumen .caja .n { font-size: 27px; font-weight: 600; line-height: 1.1;
                    font-variant-numeric: tabular-nums; }
.resumen .caja .t { font-size: 12.5px; color: var(--apagado); margin-top: 2px; }
.resumen .caja.verde { border-left-color: var(--verde); }
.resumen .caja.verde .n { color: var(--verde); }
.resumen .caja.ambar { border-left-color: var(--ambar); }
.resumen .caja.ambar .n { color: var(--ambar); }
.resumen .caja.rojo  { border-left-color: var(--rojo-s); }
.resumen .caja.rojo .n { color: var(--rojo-s); }
.resumen .caja.azul  { border-left-color: var(--azul); }
.resumen .caja.azul .n { color: var(--azul); }

/* ---------- LOS CHIPS DE CLIENTE ----------------------------
   Cinco chips reemplazan noventa columnas. Cada chip lleva
   color Y letra: quien no distingue verde de rojo igual lee
   el estado en el titulo emergente y en la ficha.            */
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 3px 7px;
  border-radius: 3px; border: 1px solid;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  cursor: default;
}
.chip.verde { background: var(--verde-f); border-color: #A8D8C4; color: var(--verde); }
.chip.ambar { background: var(--ambar-f); border-color: #E2C68A; color: var(--ambar); }
.chip.rojo  { background: var(--rojo-f);  border-color: #E8B2AE; color: var(--rojo-s); }
.chip.gris  { background: var(--gris-f);  border-color: var(--borde); color: var(--apagado); }

/* Punto de estado para listas de requisitos */
.punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.punto.verde { background: var(--verde); }
.punto.ambar { background: var(--ambar); }
.punto.rojo  { background: var(--rojo-s); }
.punto.gris  { background: var(--gris); }

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 11.5px; font-weight: 600;
}
.etiqueta.verde { background: var(--verde-f); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-f); color: var(--ambar); }
.etiqueta.rojo  { background: var(--rojo-f);  color: var(--rojo-s); }
.etiqueta.gris  { background: var(--gris-f);  color: var(--apagado); }
/* Naranja: el escalon entre el ambar y el rojo. Lo usa "No contesta",
   que no es lo mismo que "Confirmara" —ese dijo algo— ni tan grave
   como "Desistio". Con los mismos tonos que el selector de etapa. */
.etiqueta.naranja { background: #FCEADB; color: #B14A05; }

/* Celeste y violeta: las tres fases de la cita se distinguen entre
   si, no solo del resto. Salen de la planilla de ella: celeste
   "por programar", ambar "programado", violeta "no asistio". */
.etiqueta.celeste { background: #DCF2F8; color: #0E6E85; }
.etiqueta.violeta { background: #F0E4F7; color: #6B2E8A; }
.etiqueta.azul    { background: var(--azul-claro); color: var(--azul); }
.chip.celeste  { background: #DCF2F8; border-color: #A6DCEA; color: #0E6E85; }
.chip.violeta  { background: #F0E4F7; border-color: #D3B0E4; color: #6B2E8A; }
.chip.azul     { background: var(--azul-claro); border-color: #B9CBE2; color: var(--azul); }
.punto.celeste { background: #0E6E85; }
.punto.violeta { background: #6B2E8A; }
.punto.azul    { background: var(--azul); }
.cal-ev.celeste{ background: #DCF2F8; color: #0E6E85; }
/* Las notas escritas a mano no usan ningun color de estado: fondo
   blanco y borde punteado. Antes compartian el verde de "Vigente"
   y parecia que la nota estuviera "al dia", que no significa nada. */
.cal-ev.nota  { background: #fff; border: 1px dashed #9AA8B8;
                color: var(--texto); font-weight: 500; }
.cal-ev.nota-hecha { background: #F4F6F9; border: 1px dashed #C8D2DD;
                color: var(--apagado); text-decoration: line-through; }
.etiqueta.nota { background: #fff; border: 1px dashed #9AA8B8;
                 color: var(--texto); }
.cal-ev.violeta{ background: #F0E4F7; color: #6B2E8A; }

/* Leyenda de colores. Chica y debajo de lo que explica, para
   consultarla cuando hace falta sin robar atencion. */
.leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--borde);
}
.leyenda .it {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--apagado);
}


/* ---------- Tablas ------------------------------------------ */
.marco-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.datos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.datos th {
  text-align: left; padding: 9px 10px; white-space: nowrap;
  background: var(--azul-claro); color: var(--azul);
  border-bottom: 1px solid var(--borde); font-size: 12.5px; font-weight: 600;
}
table.datos td { padding: 9px 10px; border-bottom: 1px solid #EDF1F5; vertical-align: middle; }
table.datos tbody tr:hover { background: #F7F9FC; }
table.datos a.nombre { font-weight: 600; text-decoration: none; }
table.datos a.nombre:hover { text-decoration: underline; }

/* ---------- Formularios ------------------------------------- */
.campos { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.campo label { display: block; font-size: 12.5px; font-weight: 600;
               margin-bottom: 4px; color: #33465C; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid #BFCAD8; border-radius: var(--radio);
  background: #fff; color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul);
}
.campo .ayuda { font-size: 11.5px; color: var(--apagado); margin-top: 3px; }

.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: 1px solid var(--azul);
  border-radius: var(--radio); background: var(--azul); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--azul-hondo); }
.boton.claro { background: #fff; color: var(--azul); }
.boton.claro:hover { background: var(--azul-claro); }
.boton.rojo { background: var(--rojo); border-color: var(--rojo); }
.boton:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* ---------- Avisos ------------------------------------------ */
.aviso { padding: 11px 14px; border-radius: var(--radio);
         margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.aviso.bien  { background: var(--verde-f); border-color: #A8D8C4; color: #0C5F44; }
.aviso.error { background: var(--rojo-f);  border-color: #E8B2AE; color: #8E1D17; }
.aviso.info  { background: var(--azul-claro); border-color: #B9CBE2; color: var(--azul); }

.vacio { text-align: center; padding: 38px 20px; color: var(--apagado); }
.vacio p { margin: 0 0 14px; }

/* ---------- Login ------------------------------------------- */
.pagina-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--azul-hondo); padding: 20px;
}
.caja-login {
  background: var(--papel); border-radius: 8px; padding: 30px 28px;
  width: 100%; max-width: 372px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.caja-login img { height: 54px; display: block; margin: 0 auto 18px; }
.caja-login h1 { font-size: 19px; text-align: center; margin: 0 0 3px; color: var(--azul); }
.caja-login .sub { text-align: center; color: var(--apagado);
                   font-size: 13px; margin: 0 0 22px; }
.caja-login .campo { margin-bottom: 14px; }
.caja-login .boton { width: 100%; justify-content: center; padding: 10px; }
.caja-login .pie { text-align: center; margin-top: 18px;
                   font-size: 11.5px; color: var(--apagado); }

/* ---------- Celular y tablet -------------------------------- */
@media (max-width: 900px) {
  .hamburguesa { display: block; }
  .envoltura { display: block; }
  .menu {
    position: fixed; inset: 58px auto 0 0; z-index: 50;
    width: var(--menu); height: calc(100vh - 58px);
    transform: translateX(-100%); transition: transform .2s ease;
    overflow-y: auto;
  }
  body.menu-abierto .menu { transform: translateX(0); }
  body.menu-abierto::after {
    content: ''; position: fixed; inset: 58px 0 0 0;
    background: rgba(10,20,35,.45); z-index: 45;
  }
  .contenido { padding: 14px; }
  .cabecera h1 { font-size: 24px; }
  .barra .titulo small { display: none; }
  .barra .yo .quien span { display: none; }

  /* La tabla se vuelve una ficha por persona: en un celular
     una tabla de 8 columnas no se lee ni con zoom. */
  table.datos.apilable thead { display: none; }
  table.datos.apilable, table.datos.apilable tbody,
  table.datos.apilable tr, table.datos.apilable td { display: block; width: 100%; }
  table.datos.apilable tr {
    background: var(--papel); border: 1px solid var(--borde);
    border-radius: var(--radio); margin-bottom: 10px; padding: 4px 2px;
  }
  table.datos.apilable td { border: none; padding: 5px 12px; }
  table.datos.apilable td::before {
    content: attr(data-rotulo); display: block;
    font-size: 11px; font-weight: 600; color: var(--apagado);
    margin-bottom: 1px;
  }
  table.datos.apilable td.sin-rotulo::before { content: none; }

  /* Los cinco clientes en una sola fila. Apilados uno por linea
     la ficha de cada persona quedaba larguisima en el celular.
     Las medidas estan calculadas para que los cinco entren en
     390 px de ancho, que es un celular comun. */
  table.datos.apilable td.celda-chip {
    display: inline-block; width: auto;
    padding: 4px 5px 8px; text-align: center;
  }
  table.datos.apilable td.celda-chip::before { text-align: center; }
  table.datos.apilable td.celda-chip .chip { min-width: 34px; padding: 3px 4px; }

  /* En el celular el titulo escrito sobra: el logo ya dice de
     quien es el sistema, y cada pantalla tiene su propio titulo.
     Dejarlo obligaba a partirlo en tres lineas. */
  .barra .titulo { display: none; }
  .barra .logo img { height: 30px; }
  .barra .yo .boton { padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

/* ---------- Impresion --------------------------------------- */
@media print {
  .barra, .menu, .cabecera .acciones, .hamburguesa, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .contenido { padding: 0; }
  .tarjeta { border: none; padding: 0; margin: 0 0 10px; }
  table.datos { font-size: 9.5pt; }
  table.datos th { background: #E4EAF2 !important; -webkit-print-color-adjust: exact;
                   print-color-adjust: exact; }
  .chip, .etiqueta, .punto { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* El pie de la hoja impresa, centrado: pegado a la izquierda
     parecia una nota suelta; en el medio se lee como el pie de un
     documento. */
  .pie-impresion { display: block !important; margin-top: 12px;
                   font-size: 8.5pt; color: #555;
                   text-align: center; }
  @page { size: A4 landscape; margin: 12mm; }
}
.pie-impresion { display: none; }

/* ============================================================
   AJUSTES PARA QUE TODO ENTRE EN CUALQUIER PANTALLA
   Celular (360-430), tablet (768-1024) y computadora.
   ============================================================ */

/* ---- 1. El desborde de los formularios --------------------
   .campos es una grilla de columnas que se acomodan solas. En
   la computadora entran tres o cuatro; en el celular, una.
   El problema: varios formularios tienen un campo marcado para
   ocupar DOS columnas. Cuando queda una sola, el navegador
   inventa una segunda columna que no cabe, y toda la pagina se
   hace mas ancha que la pantalla: por eso los botones Aplicar y
   Limpiar quedaban cortados a la derecha y aparecia la barra
   para desplazar de costado.

   Se arregla en dos lineas y sin tocar ningun archivo PHP:
     · min-width:0  deja que un campo se achique mas que su
       contenido, que es lo que por defecto NO hace una grilla.
     · grid-auto-columns deja que esa columna inventada valga
       cero cuando no hay lugar.
   En la computadora no cambia nada: ahi la columna extra existe
   de verdad y el campo sigue ocupando el doble. */
.campos { grid-auto-columns: minmax(0, 1fr); }
.campos > * { min-width: 0; }

/* Lo mismo para cualquier tabla ancha metida en una tarjeta. */
.marco-tabla { max-width: 100%; }
.tarjeta, .cliente-cuerpo { min-width: 0; }

/* Los botones que van juntos dentro de un campo (Aplicar y
   Limpiar, por ejemplo) pasan a la linea de abajo si no entran,
   en vez de salirse. */
.campo > div { flex-wrap: wrap; }

/* ---- 2. Tablet: 768 a 1024 --------------------------------
   El menu ya se esconde atras de la hamburguesa desde 900px.
   Aca solo se afloja el relleno para ganar ancho util. */
@media (max-width: 1024px) {
  .contenido { padding: 16px; }
  .cabecera h1 { font-size: 26px; }
}

/* ---- 3. Celular: un campo por linea -----------------------
   Hasta 560px la grilla se fija en UNA columna y se anula el
   "ocupar dos columnas" de los campos que lo piden.

   Sin esto, un campo marcado para dos columnas obliga a la
   grilla a tener dos tracks aunque no haya lugar: quedaba uno
   de 215px y otro de 82px, y en ese segundo no entraban
   "Aplicar" y "Limpiar", que terminaban uno encima del otro
   contra el borde. Con una sola columna, cada campo ocupa el
   ancho completo y los botones van juntos en su linea. */
@media (max-width: 560px) {
  .campos { grid-template-columns: minmax(0, 1fr); }
  .campos > * { grid-column: auto !important; }
}

/* ---- 4. Celular: hasta 700px ------------------------------ */
@media (max-width: 700px) {

  /* Los botones de la cabecera arrancan a la izquierda, debajo
     del titulo. Pegados a la derecha quedaban colgando solos en
     una linea vacia. */
  .cabecera { gap: 10px; }
  .cabecera .acciones { margin-left: 0; width: 100%; }
  .cabecera .acciones .boton { flex: 0 1 auto; }

  /* 16px es el minimo que no hace que el celular se acerque solo
     al tocar un recuadro. Con 14px, cada vez que alguien tocaba
     "Buscar" la pantalla pegaba un salto de zoom y despues habia
     que alejarla a mano. */
  .campo input, .campo select, .campo textarea { font-size: 16px; }

  /* Los botones un poco mas altos: con el dedo, 37px de alto se
     erran seguido. */
  .boton { padding: 10px 15px; }

  /* La barra del mes del calendario, en dos lineas si hace falta. */
  .cal-barra { flex-wrap: wrap; }
  .cal-barra b { min-width: 0; }

  /* Las tarjetas de resumen de a dos, aunque la pantalla sea de
     360px: con minmax(158px) justo no entraban dos y quedaba una
     sola por linea, larguisimo. */
  .resumen { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .resumen .caja { padding: 11px 12px; }
  .resumen .caja .n { font-size: 23px; }

  /* Menos relleno adentro de las tarjetas: 16px por lado se come
     32px de los 360 que hay. */
  .tarjeta { padding: 13px; }
  .tarjeta > h2 { font-size: 17px; margin-bottom: 12px; }
  .cliente-bloque .cliente-cuerpo { padding: 10px; }
  .cliente-bloque > summary { padding: 10px 11px; gap: 7px; }

  /* Los nombres largos de persona y de servicio se parten en vez
     de estirar la tarjeta. */
  table.datos.apilable td, .cliente-bloque > summary b {
    overflow-wrap: anywhere;
  }
}

/* ---- 5. Celulares angostos: hasta 400px ------------------- */
@media (max-width: 400px) {
  .contenido { padding: 11px; }
  .cabecera h1 { font-size: 21px; }
  .barra { gap: 10px; padding: 0 11px; }
  .resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 6. Tablet: la tabla vuelve a ser tabla ---------------
   Arriba, la regla de 900px convierte cada fila en una ficha
   apilada. Eso esta bien en un celular, donde una tabla de diez
   columnas no se lee. Pero en una tablet de 768 o 820px la
   tabla entra casi entera: la matriz de personal mide 747px y
   hay 702 de ancho util, o sea que falta un dedo de desplazar.
   Apilada, en la misma pantalla entraban tres personas; como
   tabla entran quince.

   Asi que entre 701 y 900px se deshace el apilado. El menu
   sigue atras de la hamburguesa, que ahi si hace falta. */
@media (min-width: 701px) and (max-width: 900px) {
  table.datos.apilable thead { display: table-header-group; }
  table.datos.apilable { display: table; width: 100%; }
  table.datos.apilable tbody { display: table-row-group; }
  table.datos.apilable tr {
    display: table-row;
    background: none; border: 0; border-radius: 0;
    margin: 0; padding: 0;
  }
  table.datos.apilable td {
    display: table-cell; width: auto;
    border: 0; border-bottom: 1px solid #EDF1F5;
    padding: 9px 10px; text-align: left;
  }
  table.datos.apilable td::before { content: none; }
  table.datos.apilable td.celda-chip { display: table-cell; width: auto; padding: 9px 10px; }
  table.datos.apilable td.celda-chip .chip { min-width: 42px; padding: 3px 7px; }
}

/* Cuando una tabla no entra y hay que desplazarla de costado,
   una sombrita en el borde avisa que sigue. Sin esto, la gente
   no sabe que hay mas columnas a la derecha. */
@media (min-width: 701px) {
  .marco-tabla {
    background:
      linear-gradient(to right, var(--papel) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--papel) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(12,30,50,.13), rgba(12,30,50,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(12,30,50,.13), rgba(12,30,50,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ---- 7. Detalles que quedaban feos ------------------------ */

/* Las cinco tarjetas de resumen de la matriz de personal
   entraban cuatro arriba y una sola abajo. Con un minimo mas
   chico entran las cinco en una linea en la tablet. */
@media (max-width: 1024px) {
  .resumen { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (max-width: 560px) {
  /* El rotulo en blanco que alinea los botones con los campos de
     al lado solo sirve cuando hay varias columnas. En una sola
     columna deja un renglon vacio arriba de Aplicar. */
  .campos > .campo:has(.boton) > label { display: none; }
  .campos > .campo:has(.boton) { margin-top: -4px; }
}

/* ---- 8. Que los botones se puedan tocar ------------------- */
/* Varios botones chicos ("Cargar", "Hecho", "Borrar", "Abrir la
   ficha") llevan su propio relleno escrito en la pagina, asi que
   no alcanza con cambiar el relleno general: el de la pagina
   gana. Con una altura minima se arregla igual, sin pelearle al
   relleno y sin cambiar como se ven en la computadora.
   40px es la medida que se usa para algo que se toca con el
   dedo; abajo de eso se erra seguido. */
@media (max-width: 560px) {
  .boton { min-height: 40px; }

  /* El de salir va en la barra de arriba, que mide 58px: ahi
     40px lo dejarian pegado contra los bordes. */
  .barra .yo .boton { min-height: 36px; }

  /* Los que estan adentro de una tabla van uno al lado del otro
     y, si no entran, pasan abajo en vez de desbordarse. */
  table.datos td > div { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------
   "NO APLICA"
   Un requisito que esa unidad pide en general pero que a esa persona
   no le corresponde. Va apagado y con el borde punteado: se tiene
   que ver que esta decidido (no es un olvido) y a la vez que no
   cuenta ni a favor ni en contra. Por eso no usa ninguno de los
   colores del semaforo.
   ------------------------------------------------------------------ */
.etiqueta.na {
  background: transparent; color: #8A99AB;
  border: 1px dashed #C3CDD9;
}
.chip.na   { background: transparent; border: 1px dashed #C3CDD9; color: #8A99AB; }
.punto.na  { background: transparent; border: 1.5px dashed #B3BFCD; }