/* Consola de Centauro. Misma identidad que el task sheet. */
:root {
  --centauro: #1B1546;
  --suave: #f0f3f5;
  --linea: #e0e4e8;
  --gris: #78828c;
  --texto: #1a1d21;
  --ok: #1e7a4d;
  --alerta: #b8860b;
  --grave: #c0392b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--suave);
}
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------- estructura */
/* Misma cabecera del task sheet: filo azul arriba, logo a la izquierda
   y el sello de identidad a la derecha. */
/* Dos renglones: arriba la marca y quien esta trabajando, abajo el
   menu. Apretado en una sola linea, el menu quedaba entre el logo y los
   datos del usuario y se perdia justo lo que mas se usa. */
header.barra {
  background: #fff; border-bottom: 1px solid var(--linea);
  border-top: 5px solid var(--centauro);
  padding: 12px 20px 0; display: block;
  position: sticky; top: 0; z-index: 10;
}
header.barra .cinta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 10px;
}
header.barra img { height: 40px; }
header.barra .identidad { display: flex; align-items: center; gap: 14px; }

/* La linea de operacion, con el mismo prefijo de los folios. */
.linea { display: flex; align-items: baseline; gap: 8px; }
.linea .clave {
  font-weight: 700; font-size: 13px; letter-spacing: .5px;
  color: #fff; background: var(--centauro);
  padding: 3px 9px; border-radius: 5px;
}
.linea .nombre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--gris); font-weight: 650;
}
/* El menu, en su propio renglon y con el renglon entero para el. Es lo
   unico de aqui arriba que se usa todo el dia; lo demas --quien eres, en
   que idioma, la salida-- vive recogido en la pastilla de la derecha. */
header.barra nav {
  display: flex; gap: 4px; margin: 12px 0 0; padding-bottom: 8px;
  border-top: 1px solid var(--linea); padding-top: 10px;
  overflow-x: auto;      /* en el celular se recorre, no se encima */
}
header.barra nav a {
  padding: 7px 13px; border-radius: 6px; text-decoration: none;
  color: var(--gris); font-weight: 600; font-size: 13px;
}
header.barra nav a:hover { background: var(--suave); color: var(--centauro); }
header.barra nav a.activo { background: var(--centauro); color: #fff; }
header.barra nav a { white-space: nowrap; }

/* ------------------------------------------------ quien esta trabajando
   Una pastilla con el nombre, y adentro lo que no cambia nunca: el rol,
   el correo, el idioma y la salida. Antes estaba todo desplegado arriba
   y el encabezado se leia como un solo bloque apretado. */
header.barra .yo { margin-left: auto; position: relative; }
.pastilla {
  display: flex; align-items: center; gap: 9px; background: #fff;
  /* El color va dicho: el `button` de la casa es azul con letra blanca,
     y una pastilla blanca que no lo diga sale con el nombre en blanco
     sobre blanco. */
  color: var(--texto);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 4px 12px 4px 4px; cursor: pointer;
}
.pastilla:hover { background: var(--suave); }
.pastilla .iniciales {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--centauro); color: #fff; display: grid;
  place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.pastilla .nom { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pastilla .flecha { color: var(--gris); font-size: 10px; }

.menu-yo {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: 232px; background: #fff; border: 1px solid var(--linea);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(27, 21, 70, .14);
  padding: 12px 14px; text-align: left;
}
.menu-yo .rol {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--centauro);
}
.menu-yo .nombre { font-size: 13px; font-weight: 600; }
.menu-yo .correo { font-size: 11.5px; color: var(--gris); word-break: break-all; }
.menu-yo hr { border: 0; border-top: 1px solid var(--linea); margin: 10px 0; }
.menu-yo .idiomas { display: flex; gap: 6px; }
.menu-yo .salir {
  display: block; width: 100%; margin-top: 10px; background: var(--suave);
  color: var(--texto);
  border: 1px solid var(--linea); border-radius: 6px; padding: 7px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.menu-yo .salir:hover { background: var(--linea); }
/* El menu de arriba esta pegajoso y la pantalla empieza justo
   debajo: con poco aire, el titulo se lee como un renglon mas del
   menu. */
main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 10px; }
.sub { color: var(--gris); margin: 0 0 20px; }

/* ---------------------------------------------------------- tarjetas */
/* La tarjeta es la "hoja" del task sheet: blanca, con su filo azul. */
.tarjeta {
  background: #fff; border: 1px solid var(--linea); border-radius: 8px;
  border-top: 5px solid var(--centauro);
  padding: 16px 18px; margin-bottom: 14px;
}
.tarjeta.lisa { border-top: 1px solid var(--linea); }
.tarjeta > h3 { margin: 0 0 12px; font-size: 15px; }
/* Etiqueta de apartado, igual que en el task sheet. */
h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--gris); margin: 0 0 8px; font-weight: 650;
}
.rejilla { display: grid; gap: 14px; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }
/* Un grupo nuevo dentro de la misma tarjeta: su titulo se separa con una
   linea, como los apartados del task sheet. */
h4.grupo {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea);
}

/* ---------------------------------------------------------- tablas */
table { width: 100%; border-collapse: collapse; background: #fff; }
table.lista {
  border: 1px solid var(--linea); border-top: 5px solid var(--centauro);
  border-radius: 8px; overflow: hidden;
}
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--gris); padding: 10px 14px;
  border-bottom: 1px solid var(--linea); background: #fafbfc;
}
td { padding: 11px 14px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.clic { cursor: pointer; }
tr.clic:hover { background: #fafbfc; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- controles */
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--linea);
  border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--centauro); outline-offset: -1px; border-color: var(--centauro);
}
.campo { margin-bottom: 12px; }
button {
  background: var(--centauro); color: #fff; border: 0; border-radius: 6px;
  padding: 9px 16px; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.25); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.claro { background: #fff; color: var(--centauro); border: 1px solid var(--linea); }
button.chico { padding: 5px 11px; font-size: 12.5px; }
button.peligro { background: var(--grave); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------ lo que paso ese dia */
/* El meet and greet arriba, con una barra de color a la izquierda: es
   la respuesta corta --¿ya estan con el principal?-- y tiene que leerse
   sin buscarla. Verde cuando hay marca, ambar cuando falta; el ambar no
   es una falta grave, es "revisa esto antes de que el cliente llame". */
.dia_real { margin-top: 18px; }
.dia_mg {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  border-left: 4px solid var(--gris);
  background: var(--suave);
}
.dia_mg.ok { border-left-color: var(--ok); background: #e6f4ec; }
.dia_mg.falta { border-left-color: var(--alerta); background: #fdf6e3; }

/* Las horas del dia (seccion 65): lo programado, desde cuando corren,
   a que hora termino y cuantas extra, con quien las corrigio. */
.horas-dia { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--linea);
             border-radius: 8px; background: #fff; }
.horas-dia table { width: auto; border: 0; background: transparent; margin: 2px 0 8px; }
.horas-dia td { border: 0; padding: 3px 18px 3px 0; font-size: 13.5px;
                vertical-align: baseline; }
.horas-dia td:first-child { color: var(--gris); width: 150px; }
.horas-dia .antes { text-decoration: line-through; color: var(--gris); margin-right: 6px; }
.horas-dia .prev { margin: 4px 0 10px; font-size: 13.5px; }
.horas-dia .prev b { color: var(--alerta); }
.sello-corr { margin: 2px 0 8px; font-size: 12.5px; color: #5d4a12; background: #fdf6e3;
              border-left: 3px solid var(--alerta); padding: 6px 10px; border-radius: 4px; }

/* La bitacora dentro de la ficha del dia del implantado: separada de
   las posiciones por una linea, porque son dos cosas --quien iba y que
   paso-- y leerlas pegadas las confunde. */
.bit_del_dia {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--linea);
}

/* Lo que se escribe en la bitacora va al final, separado de lo que ya
   paso: primero se lee el dia y luego se le agrega. */
.bit_escribir {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.bit_escribir .fila { display: flex; gap: 8px; flex-wrap: wrap;
                      align-items: center; margin-top: 6px; }
/* El formulario de corregir una hora cuelga de su propio renglon y se
   nota que pertenece a esa marca y no al dia entero. */
.bit_corregir {
  margin: 8px 0 4px; padding: 10px 12px;
  background: var(--suave); border-radius: 8px;
}
.paso.nota .punto { border-color: var(--centauro); color: var(--centauro); }
.paso.nota .titulo { font-weight: 600; }

/* Secciones que se pliegan. El titulo entero es el boton --no una
   flechita de doce pixeles-- porque se usa con prisa y con el raton
   encima de otra cosa. */
.cabeza-plegable {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  cursor: pointer; user-select: none;
  padding: 6px 0; border-radius: 6px;
}
.cabeza-plegable:hover { background: var(--suave); }
.cabeza-plegable:focus-visible { outline: 2px solid var(--centauro);
                                 outline-offset: 2px; }
.flecha-plegable { color: var(--gris); font-size: 12px; width: 12px; }
/* El resumen de lo plegado: gris y en la misma linea del titulo, para
   que se lea de corrido y no compita con el. */
.resumen-plegable {
  color: var(--gris); font-size: 13px; font-weight: 400;
}
.plegable + .plegable { border-top: 1px solid var(--linea);
                        margin-top: 10px; padding-top: 4px; }

/* ---------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 20px; background: var(--suave);
  color: var(--centauro);
}
/* Semaforo del dinero: gris sin decidir, azul decidido, ambar con
   finanzas, verde ya depositado. Un color por renglon y nada mas: el
   consultor tiene que leer la columna de un golpe. */
.etiqueta.info { background: #e8ecf7; color: var(--centauro); }
.etiqueta.ok { background: #e6f4ec; color: var(--ok); }
/* Azul de verdad, no el azul de la marca: "info" usa el tono Centauro y
   con el asignado al lado se leian como el mismo estado. */
.etiqueta.azul { background: #e4edfd; color: #1f4fbf; }
/* Arribado: entre el azul de "armado y esperando el dia" y el verde de
   "corriendo". El equipo ya esta parado en el punto y el servicio
   todavia no arranca; si fuera verde se leeria como que ya arranco, y
   si fuera azul no se distinguiria de un servicio que no ha salido. */
.etiqueta.arribo { background: #ddf1f2; color: #0f6b74; }
.etiqueta.alerta { background: #fdf6e3; color: var(--alerta); }
.etiqueta.grave { background: #fdecea; color: var(--grave); }
/* El cierre en dos tiempos, decision de Salvador. Cafe es "el dia ya
   se cumplio" y negro es "el expediente ya se cerro": dos estados
   apagados, pero distintos, y con el gris de `borrador` a un lado se
   confundian los tres. Los dos van sin saturacion a proposito --lo que
   ya no pide nada no compite con el verde de lo que esta en curso--. */
.etiqueta.cafe { background: #efe7df; color: #6b4a2f; }
.etiqueta.negro { background: #e2e4e6; color: #1c1f22; }
.gris { color: var(--gris); }
/* El mismo semaforo del dinero, en texto: verde ya salio, ambar va en
   camino. Sin esto los tres renglones del desglose se leen igual. */
.verde { color: var(--ok); }
.ambar { color: var(--alerta); }
.chico { font-size: 12px; }

/* Cada pais es una caja aparte en la bandeja de finanzas. */
.cabeza-pais {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 8px;
}
.cabeza-pais h2 { font-size: 17px; color: var(--centauro); }

/* ---------------------------------------------------------- avisos */
.aviso {
  border-radius: 6px; padding: 11px 14px; margin: 12px 0; font-size: 13px;
  border: 1px solid var(--linea); background: #fff;
}
.aviso.ok { background: #e6f4ec; border-color: #c2e2d0; color: #14603a; }
.aviso.alerta { background: #fdf6e3; border-color: #f0e2bd; color: #7a5c07; }
.aviso.grave { background: #fdecea; border-color: #f5cdc8; color: #8f2b20; }
.vacio { color: var(--gris); padding: 26px; text-align: center; }

/* ---------------------------------------------------------- entrada */
/* La puerta de la app: el navy de la casa con una luz detras de la tarjeta,
   y ahi la tarjeta blanca. El logo es navy y sobre oscuro se
   pierde (assets/LEEME.txt), por eso vive adentro de la tarjeta. El
   fondo va tambien en el body para que el rebote del telefono al
   recorrer no ensene el gris de las demas pantallas. */
body:has(.entrada) { background: #120e33; }
.entrada {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 16px;
  background:
    radial-gradient(760px 520px at 50% 42%, rgba(96, 84, 200, .34), transparent 70%),
    linear-gradient(165deg, #211a5a 0%, #1B1546 48%, #0f0b2a 100%);
}
.hoja-entrada { width: 100%; max-width: 400px; }
.entrada form {
  background: #fff; border: 0; border-top: 4px solid #c9a227;
  border-radius: 14px; padding: 30px 30px 24px;
  box-shadow: 0 30px 70px rgba(5, 3, 20, .45), 0 2px 6px rgba(5, 3, 20, .25);
}
.portada { text-align: center; margin: 0 0 30px; }
.portada img { display: block; margin: 0 auto; max-width: 100%; object-fit: contain; }
/* El nombre de la consola, pegado a la marca de la empresa y sin
   repetirla: el logo ya dice Centauro (seccion 71). Chico y en dorado,
   entre dos rayas: de las tres que se le ensenaron, Salvador eligio la
   mas discreta, la que deja mandar al logo. */
.portada .app-sello {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; font-size: 13px; font-weight: 700; letter-spacing: 7px;
  text-transform: uppercase; color: #8c6f14;
}
/* El espaciado de las letras deja aire despues de la ultima: se le
   quita para que el nombre quede centrado entre sus dos rayas. */
.portada .app-sello span { margin-right: -7px; }
.portada .app-sello::before, .portada .app-sello::after {
  content: ""; width: 44px; height: 1px; background: #c9a227;
}
.pie-entrada {
  margin: 18px 0 0; text-align: center; font-size: 12px; letter-spacing: .3px;
  color: rgba(255, 255, 255, .62);
}
.entrada button { width: 100%; margin-top: 6px; }
/* Las pantallas de antes de entrar --crear la contrasena, pedir el
   enlace-- viven en la misma tarjeta, con su titulo y su texto. */
.entrada form h2 { margin: 4px 0 6px; color: var(--centauro); font-size: 18px; }
.entrada form p { margin: 0 0 14px; }
.entrada .centro { text-align: center; margin-top: 14px; }

@media (max-width: 800px) {
  .rejilla.dos, .rejilla.tres { grid-template-columns: 1fr; }
  .rejilla.cuatro { grid-template-columns: 1fr 1fr; }
  header.barra { flex-wrap: wrap; }
  main { padding: 16px 14px 50px; }
}

/* --------------------------------------------- bloque destacado
   El mismo recurso del meet and greet: fondo azul, filo dorado. */
.destacado {
  background: var(--centauro); color: #fff; border-radius: 6px;
  border-left: 5px solid #c9a227; padding: 12px 16px; margin: 14px 0;
}
.destacado h4 { color: rgba(255,255,255,.75); }
.destacado .valor { font-size: 15px; font-weight: 650; line-height: 1.35; }
.destacado .nota { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 3px; }

/* Sello de la esquina, como el Confidencial del task sheet. */
.sello { text-align: right; }
.sello .rol {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--centauro);
}
.sello .nombre { font-size: 12.5px; font-weight: 600; }
.sello .correo { display: block; font-size: 10.5px; color: var(--gris); }

/* Placas y datos tabulares, como en el task sheet. */
.placas {
  font-family: ui-monospace, Menlo, monospace; background: var(--suave);
  padding: 1px 6px; border-radius: 4px;
}
.persona { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.foto { width: 38px; height: 38px; border-radius: 6px; background: #e7e9ec;
        object-fit: cover; flex: 0 0 38px; }

/* --------------------------------------------- alta de servicio
   La lista de arriba dice, en todo momento, que falta para que el
   servicio quede programado. */
.minimo-caja { margin-bottom: 18px; }
.minimo { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.punto { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.punto .marca {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--suave); color: var(--gris);
}
.punto .marca.si { background: #e6f4ec; color: var(--ok); }
td.dia-num { white-space: nowrap; padding-top: 16px; }
details.plegable { margin-top: 14px; border-top: 1px solid var(--linea);
                   padding-top: 12px; }
details.plegable summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--centauro);
}
details.plegable p { margin: 10px 0; }
form textarea { resize: vertical; }
/* El punto de encuentro: la direccion a la izquierda y su mapa en un
   cuadro chico a la derecha, para verificar de un vistazo. */
.punto-inicio {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px; align-items: start;
}
.mapa-caja {
  border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  background: var(--suave);
}
.mapa-caja .mapa-vista {
  display: block; width: 100%; height: 240px; object-fit: cover;
}
.mapa-caja .mapa-vacio {
  height: 240px; display: grid; place-items: center; padding: 20px;
  text-align: center; color: var(--gris); font-size: 12.5px;
}
/* Lo que Google encontro. Se elige uno y de ahi sale el pin. */
.resultados { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
button.resultado {
  display: block; width: 100%; text-align: left; background: #fff;
  color: var(--texto); border: 1px solid var(--linea); border-radius: 6px;
  padding: 8px 11px; font-weight: 400; line-height: 1.35;
}
button.resultado:hover { border-color: var(--centauro); filter: none; }
button.resultado b { display: block; font-size: 13px; }
.mapa-caja .mapa-pie {
  padding: 6px 10px; font-size: 11.5px; background: #fff;
  border-top: 1px solid var(--linea);
}
.mapa-caja .mapa-pie a { color: var(--centauro); font-weight: 600; }
@media (max-width: 800px) { .punto-inicio { grid-template-columns: 1fr; } }

/* Una casilla con su texto al lado, no encima. */
label.casilla {
  display: flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: 13px; margin: 4px 0 6px; cursor: pointer;
}
label.casilla input { width: auto; margin: 0; }

/* Telefono en dos: la clave del pais y el numero. */
.telefono { display: flex; gap: 6px; }
.telefono .tel-pais { width: 68px; text-align: center; }
.telefono input:last-child { flex: 1; min-width: 0; }

/* Dato que viene de un registro ya guardado: se lee, no se edita. */
input.fijo, input.fijo:focus {
  background: var(--suave); color: var(--gris); border-color: var(--linea);
  outline: none;
}
/* La previa de la senal: se ve de un vistazo que es la imagen correcta,
   sin que se coma la pantalla. */
img.senal-previa {
  max-height: 140px; max-width: 100%; margin-top: 8px;
  border: 1px solid var(--linea); border-radius: 6px; padding: 6px;
  background: #fff;
}

/* La senal: las tres formas como tarjetas, la recomendada marcada; los
   colores en circulos grandes, el elegido con su anillo; y el telefono
   como lo vera el principal. */
.senal-opciones { display: flex; gap: 10px; margin: 8px 0 14px; }
.senal-opcion { flex: 1; border: 1.5px solid var(--linea); border-radius: 10px;
                padding: 10px 12px; position: relative; cursor: pointer; }
.senal-opcion:has(input:checked) { border-color: var(--centauro);
                                   box-shadow: 0 0 0 2px rgba(27, 21, 70, .12); }
.senal-opcion input { width: auto; padding: 0; margin: 0 6px 0 0; vertical-align: -1px; }
.senal-etiqueta { position: absolute; top: -9px; right: 10px; background: var(--centauro);
                  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .6px;
                  padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.senal-armado { display: flex; gap: 22px; align-items: flex-start; }
.senal-armado > div:first-child { flex: 1; min-width: 0; }
.senal-colores { display: flex; flex-wrap: wrap; gap: 10px; }
.senal-color { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
               cursor: pointer; font-weight: 800; font-size: 18px; }
.senal-color.sel { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--centauro); }
.senal-telefono { width: 118px; height: 236px; border-radius: 18px; border: 6px solid #111;
                  display: grid; place-items: center; text-align: center; padding: 8px;
                  font-weight: 800; font-size: 20px; line-height: 1.05; word-break: break-word;
                  background: var(--suave); flex: 0 0 auto; }

/* "Aborda" y su selector en un solo renglon, debajo de la persona. */
.abordo {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.abordo select { width: auto; padding: 3px 6px; font-size: 12px; }

/* La cabeza de cada equipo en el alta: su alias a la izquierda y el
   boton de quitarlo a la derecha, sin que se encimen en el celular. */
.cabeza-equipo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
/* Un equipo es una tarjeta propia: se ve donde empieza uno y donde el otro. */
.tarjeta.equipo { border-left: 3px solid var(--centauro); }

/* En la columna de la presentacion caben la hora del dia 1 y el boton de
   la agenda, que es de todos los dias. */
td.col-hora { white-space: nowrap; }
td.col-hora input[type="time"] { width: auto; margin-right: 6px; }
td.caja-agenda { background: #f7f9fa; }

/* Lo que se puede hacer con el servicio, debajo de su estatus y
   alineado con el: el estatus es el que dice cual de los dos aplica. */
.acciones.bajo-sello {
  justify-content: flex-end; margin-top: 8px; gap: 6px;
}

/* Lo escondido se esconde, aunque su clase traiga display propio: una
   .casilla es flex y ese flex le ganaba al hidden del navegador. */
[hidden] { display: none !important; }

/* Los km son tres digitos: no necesitan mas ancho, y lo que sobra le
   sirve a la modalidad, que ahi si se lee el nombre completo. */
.col-km { width: 88px; }
.col-km input { width: 100%; }

/* La hora y su aviso arriba del boton del dia, no a un lado: en la
   columna angosta se encimaban. */
td.col-hora .chico { margin: 2px 0 4px; }

/* Las banderas del idioma. Viven dentro del menu de quien esta
   trabajando: se cambia una vez al dia, no cada rato. */
button.bandera {
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px; font-size: 17px; line-height: 1; cursor: pointer;
  filter: grayscale(1); opacity: .55;
}
button.bandera:hover { filter: none; opacity: .85; }
button.bandera.activa {
  filter: none; opacity: 1; border-color: var(--linea);
  background: var(--suave);
}


/* El mes del implantado. Siete columnas de lunes a domingo: el color
   dice de un vistazo que dia esta cubierto, cual falta y cual no es
   servicio, que es lo que se pregunta viendo un calendario. */
.calendario-mes { margin: 4px 0 8px; text-transform: capitalize; }
.calendario {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  max-width: 420px;
}
.calendario-cabeza {
  font-size: 11px; color: #7a8290; text-align: center;
  text-transform: uppercase; letter-spacing: .04em;
}
.calendario-hueco { height: 38px; }
.calendario-dia {
  height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13px; font-weight: 600;
}
.calendario-dia.verde { background: #e3f4e8; color: #1c6b39; }
.calendario-dia.ambar { background: #fdf1d6; color: #8a6216; }
.calendario-dia.gris { background: #f0f3f5; color: #aeb6c0; font-weight: 400; }
.calendario-leyenda {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12px; color: #5b6472;
}
.calendario-leyenda span { display: flex; align-items: center; gap: 6px; }
.calendario-leyenda .punto {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
}
.calendario-leyenda .punto.verde { background: #7fc79a; }
.calendario-leyenda .punto.ambar { background: #f0c65c; }
.calendario-leyenda .punto.gris { background: #dfe4ea; }

/* Las zonas elegidas, una ficha cada una: se ven todas de un vistazo y
   se quitan de una en una. */
.zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zona {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef1f6; border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 12px; color: #2c3442;
}
.quitar-zona {
  border: 0; background: #dfe4ee; color: #5b6472; cursor: pointer;
  border-radius: 999px; width: 18px; height: 18px; line-height: 1;
  padding: 0; font-size: 13px;
}
.quitar-zona:hover { background: #cdd4e0; color: #1B1546; }

/* Un bloque de campos que se traba entero mientras falte lo de arriba.
   El fieldset no se ve —sin marco ni margenes— y solo se nota cuando
   esta trabado: apagado y sin cursor. */
.grupo-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo-campos[disabled] { opacity: .45; }
.grupo-campos[disabled] * { cursor: not-allowed; }
.bloqueo {
  background: #fdf1d6; border-radius: 8px; padding: 10px 14px;
  margin-bottom: 14px; font-size: 13px; color: #8a6216;
}
.bloqueo .minimo { margin: 6px 0 0; }

/* El encabezado de un servicio: folio y cliente a la izquierda, en que
   va a la derecha. */
.cabeza-servicio {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.dato { margin-bottom: 10px; }
.dato > div { white-space: pre-wrap; }

/* La ficha del dia, debajo del calendario: se abre al picar un dia y se
   cierra sola al elegir otro. */
.ficha-dia:not(:empty) {
  margin-top: 16px; padding: 14px; border-radius: 10px;
  background: #f7f9fb; border: 1px solid #e6eaef;
}
.calendario-dia.se-puede { cursor: pointer; }
.calendario-dia.se-puede:hover { outline: 2px solid #1B1546; outline-offset: 1px; }


/* --------------------------------------------- revision de la unidad

   Dos columnas fijas, siempre: antes y despues. Lo que hace evidente un
   golpe nuevo es que las dos fotos del mismo angulo esten pegadas, del
   mismo tamano y a la misma altura. */

.rejilla-revision {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 10px;
}
.rejilla-revision.par-foto { margin-top: 8px; }
.encabeza-revision {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.titulo-revision {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--gris); font-weight: 650; margin-bottom: 4px;
}
.marco-foto { display: block; position: relative; border-radius: 8px;
              overflow: hidden; border: 1px solid var(--linea); }
.marco-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
                  display: block; }
.marco-foto .pie {
  position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.55);
  color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 0 6px 0 0;
}
.sin-foto { border: 1px dashed var(--linea); border-radius: 8px;
            aspect-ratio: 4/3; display: flex; align-items: center;
            justify-content: center; text-align: center; padding: 8px; }
.tira-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tira-fotos .mini { width: 110px; height: 82px; object-fit: cover;
                    border-radius: 6px; border: 1px solid var(--linea); }

@media (max-width: 720px) {
  .rejilla-revision { grid-template-columns: 1fr; }
}


/* ------------------------------------------------ dias sin cerrar */

.renglon-sin-cerrar { border-top: 1px solid var(--linea); padding: 12px 0; }
.renglon-sin-cerrar:first-of-type { border-top: 0; }
.linea-sin-cerrar { display: flex; gap: 14px; align-items: center;
                    flex-wrap: wrap; }
.linea-sin-cerrar > :first-child { flex: 1 1 220px; min-width: 0; }
.marco-cierre { border-left: 3px solid var(--alerta); padding: 12px 0 4px 14px;
                margin-top: 10px; }
.marco-cierre textarea {
  width: 100%; font: inherit; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--linea); resize: vertical;
}

/* ------------------------------------------------------------ panorama

   El recuadro de estado es lo unico que se lee de lejos. Un dia normal
   es un punto verde y un conteo; el filo de la izquierda es lo que
   cambia de color, porque es lo que se ve sin enfocar la vista. */
.tarjeta.estado { border-left: 4px solid var(--ok); }
.tarjeta.estado.atender { border-left-color: var(--alerta); }
.tarjeta.estado.grave { border-left-color: var(--grave); }

.estado_fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.estado_conteo { margin: 10px 0 4px; font-size: 16px; }

/* El semaforo del renglon de arriba. Se llamaba `.punto`, que ya era el
   renglon de "una persona con su palomita" de la central: la regla nueva
   ganaba por venir despues y convertia a cada integrante del equipo en
   una bolita de nueve pixeles, con el nombre y el rol desbordados
   encima de la lista de pendientes. Es el mismo choque que `.barra`, en
   el mismo commit: nombres genericos que ya estaban ocupados. */
.luz {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); vertical-align: middle;
}
.luz.atender { background: var(--alerta); }
.luz.grave { background: var(--grave); }

/* Y lo mismo con `.atender`, que ademas de renglon es el nivel de una
   tarjeta: `tarjeta estado atender` se llevaba el `display:flex` y el
   relleno de aqui, y el recuadro de estado se armaba en renglon. Un
   modificador --atender, grave-- no puede llamarse igual que un
   componente. */
.renglon_atender {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--linea); padding: 10px 0 0; margin-top: 10px;
}
.renglon_atender > div:first-child { flex: 1 1 260px; }
.renglon_atender.grave > div:first-child b { color: var(--grave); }
/* La bitacora abierta ocupa el ancho completo del renglon y no una
   columna del flex: es un bloque para leer, no un dato al lado de los
   otros. `flex-basis: 100%` la empuja a su propio renglon sin tener que
   cambiar como esta armado lo de arriba. */
.bitacora_pegada {
  flex: 0 0 100%; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--linea);
}
.rojo { color: var(--grave); font-weight: 600; }

/* La tira del dia. Una barra por equipo sobre su propio eje: las 14:00
   de la tira son las 14:00 de donde esta parado ese equipo. */
.tira { position: relative; }
.renglon_tira {
  display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.etiqueta_tira { flex: 0 0 150px; }
.carril {
  position: relative; flex: 1; height: 16px; border-radius: 4px;
  background: var(--suave);
}
/* El tramo que pinta un servicio sobre el eje del dia.

   Se llamaba `.barra`, y el encabezado de la consola es
   `<header class="barra">`. La regla suelta le pegaba tambien al
   encabezado: `height: 10px` con `box-sizing: border-box` lo dejaba en
   dieciocho pixeles de alto --el filo, el relleno y nada mas--, con el
   logo y el menu colgando por fuera de su caja. Como la caja no
   ocupaba lugar, la pantalla entera arrancaba debajo del filo azul y el
   titulo se pintaba ENCIMA del menu. Eso es lo que se veia amontonado.
   `header.barra` gana en especificidad para `position` y `top`, que si
   declara, y por eso el desastre no era completo: solo el alto se
   colaba. Un nombre que dos cosas distintas comparten no falla el dia
   que se escribe, falla el dia que alguien toca la otra. */
.tramo {
  position: absolute; top: 3px; height: 10px; border-radius: 5px;
  background: var(--centauro);
}
.tramo.proxima_a_iniciar, .tramo.confirmada, .tramo.planeada {
  background: #cfd6dd;
}
/* Llego al punto y espera al principal. Mas claro que el azul de
   "corriendo" y mas solido que el gris de "todavia no sale": de un
   vistazo se ve que hay alguien parado alla y que el servicio aun no
   arranca. */
.tramo.arribado { background: #7fa8cf; }
.tramo.terminada { background: #aeb8c2; }
.tramo.s_ambar { background: var(--alerta); }
.tramo.s_rojo, .tramo.s_sin_reporte { background: var(--grave); }
.muesca {
  position: absolute; top: 0; width: 2px; height: 16px;
  background: rgba(0,0,0,.35);
}
.capa_ahora {
  position: absolute; inset: 0; display: flex; gap: 10px;
  pointer-events: none;
}
.capa_ahora .pista { position: relative; flex: 1; }
.ahora {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grave);
}
.horas { position: relative; height: 16px; margin-left: 160px; }
.horas span { position: absolute; transform: translateX(-50%); }

/* En el telefono el panorama se aprieta a lo esencial: pais, hora,
   gente y si alguien no reporta. El desglose por plaza y la cuenta de
   servicios son el detalle, y el detalle no cabe en un semaforo. */
@media (max-width: 700px) {
  .etiqueta_tira { flex: 0 0 96px; }
  .horas { margin-left: 106px; }
  .solo_ancho { display: none; }
  .paises th, .paises td { padding-left: 8px; padding-right: 8px; }
  .paises .etiqueta { white-space: normal; }
}


/* ------------------------------------------- codigo de acceso de campo
   Pensada para telefono: la llamada de las 5:40 le llega al consultor en
   su casa. Los digitos grandes son para dictarlos sin equivocarse. */

.lista-codigo { margin-top: 12px; }

.persona-codigo {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--linea); padding: 12px 0;
}
.persona-codigo:first-child { border-top: 0; }
.persona-codigo .foto {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--linea); flex: 0 0 auto;
}
.datos-codigo { flex: 1 1 180px; min-width: 0; }
.persona-codigo button { flex: 0 0 auto; }

.codigo-grande { text-align: center; margin-top: 14px; }
.codigo-grande .digitos {
  font-size: 54px; font-weight: 700; letter-spacing: 6px;
  font-variant-numeric: tabular-nums; color: var(--centauro);
  margin: 6px 0 2px;
}

@media (max-width: 480px) {
  /* El boton baja a su propio renglon y ocupa el ancho: con una mano y
     medio dormido, un boton chico al lado de la foto se falla. */
  .persona-codigo button { flex: 1 1 100%; }
  .codigo-grande .digitos { font-size: 46px; letter-spacing: 4px; }
}


/* ------------------------------------------------------ panel de accesos */

.renglon-acceso {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--linea); padding: 12px 0;
}
.renglon-acceso > :first-child { flex: 1 1 220px; min-width: 0; }
.renglon-acceso > :nth-child(2) { flex: 0 0 150px; }
.renglon-acceso > :nth-child(3) { flex: 0 0 110px; }
.quien-acceso { min-width: 0; }
.quien-acceso .chico { overflow-wrap: anywhere; }

/* El acceso cerrado se ve apagado, no escondido: sigue siendo una
   cuenta que existe y a la que alguien le puede volver a abrir. */
.cerrado .renglon-acceso { opacity: .55; }

@media (max-width: 700px) {
  /* En telefono cada dato baja a su renglon: el puesto y el ultimo
     acceso apretados en 110px no se leen. */
  .renglon-acceso > :nth-child(2),
  .renglon-acceso > :nth-child(3) { flex: 1 1 auto; }
}


/* ------------------------------------------------- puestos y permisos

   Veintinueve casillas en una lista plana no se leen: hay que bajar por
   todas para encontrar las cuatro que importan. Agrupadas por familia,
   armar un puesto es apagar un bloque —el dinero— y seguir. */

.familia { border-top: 1px solid var(--linea); padding: 10px 0 4px; }
.familia-titulo {
  display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; margin-bottom: 4px;
}
.acciones-familia { display: flex; gap: 10px; flex: 0 0 auto; }

/* Dos columnas en pantalla grande: las 29 caben de un vistazo y se ve
   el bloque entero sin bajar. En telefono, una. */
.casillas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.casillas label.casilla { font-weight: 400; align-items: flex-start; }
.casillas label.casilla input { margin-top: 3px; }

/* El nombre tecnico de la actividad va al lado, en gris: quien reparte
   accesos lee la descripcion, pero el dia que algo no cuadra, lo que se
   busca en el codigo es `viaticos.transferir`. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px; }

.renglon-permiso {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0; justify-content: space-between;
}
.renglon-permiso > :first-child { flex: 1 1 auto; min-width: 0; }
.renglon-permiso .marca {
  flex: 0 0 auto; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px;
  background: var(--suave); color: var(--gris);
}
.renglon-permiso .marca.si { background: #e6f4ec; color: var(--ok); }
.renglon-permiso > :last-child { flex: 0 0 52px; text-align: right; }

/* Un boton que no parece boton: dar o quitar un permiso suelto es una
   accion menor al lado de guardar el puesto entero, y con el mismo peso
   visual se confunden. */
button.enlace {
  background: none; border: none; padding: 0; width: auto;
  color: var(--centauro); text-decoration: underline; cursor: pointer;
  font-weight: 600;
}
button.enlace:hover { opacity: .75; }

@media (max-width: 700px) {
  .casillas { grid-template-columns: 1fr; }
}


/* ------------------------------------------------ la ayuda en pantalla

   El "?" vive pegado al título del bloque que explica, no en una
   pantalla de ayuda aparte: obligar a salir de donde estás para
   preguntar por donde estabas es la forma más segura de que nadie
   pregunte. */

.con-ayuda { margin-bottom: 2px; position: relative; }
.fila-ayuda { display: flex; align-items: baseline; gap: 8px; }
.fila-ayuda > :first-child { flex: 1 1 auto; min-width: 0; }

/* Discreto a propósito. Un signo que compite con el título se toca por
   accidente, y el que se toca por accidente se aprende a ignorar. */
button.boton-ayuda {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 1px solid var(--linea);
  background: var(--suave); color: var(--gris);
  font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
}
button.boton-ayuda:hover {
  border-color: var(--centauro); color: var(--centauro);
}

/* Flota sobre el bloque en vez de empujarlo: abierto dentro, quedaba
   pegado al pie que el bloque ya trae y los botones se iban hacia abajo.
   Se ancla al "?", que vive al final del renglon del titulo. */
.panel-ayuda {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: min(380px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(27, 21, 70, .16);
  padding: 12px 14px; text-align: left;
}
.panel-ayuda b { color: var(--texto); }
.panel-ayuda p { color: var(--gris); }
.panel-ayuda p:first-child { margin-top: 0; }

/* --------------------------------------------- el recorrido de la primera vez

   La tercera capa de la ayuda, y la unica que se pone enfrente. Por eso
   se cierra con un clic en cualquier lado, con Escape, y con su propio
   boton: lo que se abre solo tiene que cerrarse facil. */
.recorrido-capa {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(27, 21, 70, .45); padding: 20px;
}
.recorrido-tarjeta {
  background: #fff; border-radius: 12px; border-top: 5px solid var(--centauro);
  box-shadow: 0 18px 50px rgba(27, 21, 70, .3);
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 22px 24px 16px;
}
.recorrido-cuerpo h2 { font-size: 17px; }
.recorrido-entrada {
  border-top: 1px solid var(--linea); padding: 9px 0 0; margin-top: 9px;
}
.recorrido-entrada:first-of-type { border-top: 0; margin-top: 0; }
.recorrido-muestra {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  background: var(--suave); border-radius: 8px; padding: 10px 12px;
}
.boton-ayuda-muestra {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  border: 1px solid var(--linea); background: #fff; color: var(--gris);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.recorrido-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.recorrido-puntos { display: flex; gap: 6px; }
.recorrido-punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--linea);
}
.recorrido-punto.activo { background: var(--centauro); }
.menu-yo .otra-vez {
  display: block; width: 100%; margin: 0 0 10px; background: #fff;
  color: var(--texto); border: 1px solid var(--linea); border-radius: 6px;
  padding: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.menu-yo .otra-vez:hover { background: var(--suave); }

/* ---------------------------------------------------------- bonos
   Las pestañas del mes, el corte de cifras y la ficha con su
   desglose. La estrella apagada se dibuja: "5 de 6" se lee, pero
   cinco estrellas encendidas y una apagada se ve de un golpe. */
.pestanas { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.pestana {
  background: #fff; color: var(--centauro); border: 1px solid var(--linea);
  border-radius: 7px; padding: 7px 14px; font-weight: 600; cursor: pointer;
}
.pestana.activa { background: var(--centauro); color: #fff; border-color: var(--centauro); }

.corte {
  display: flex; background: #fff; border: 1px solid var(--linea);
  border-radius: 8px; margin-bottom: 14px; overflow: hidden; flex-wrap: wrap;
}
.corte > div { flex: 1 1 140px; padding: 12px 16px; border-left: 1px solid var(--linea); }
.corte > div:first-child { border-left: 0; }
.cifra { font-size: 22px; font-weight: 700; color: var(--centauro);
         font-variant-numeric: tabular-nums; line-height: 1.2; }
.cifra.rojo { color: var(--grave); }

.estrellas { color: #c9922a; letter-spacing: 1px; font-size: 15px; }
.estrellas .apagada { color: #d5d9de; }

.cabeza_ficha { display: flex; justify-content: space-between; gap: 14px;
                flex-wrap: wrap; align-items: flex-start; margin-bottom: 8px; }
.criterio { display: flex; gap: 14px; padding: 13px 0;
            border-bottom: 1px solid #f0f2f4; align-items: flex-start; }
.criterio:last-of-type { border-bottom: 0; }
.criterio .cuerpo { flex: 1; }
.criterio .nombre { font-weight: 650; }
.criterio .num { min-width: 96px; text-align: right; font-weight: 650; }
.marca_bono {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  text-align: center; line-height: 24px; font-size: 13px; font-weight: 700;
}
.marca_bono.si { background: #e6f4ec; color: var(--ok); }
.marca_bono.no { background: #fdecea; color: var(--grave); }
.marca_bono.na { background: var(--suave); color: var(--gris); }

.total_barra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px; background: var(--centauro); color: #fff;
  border-radius: 8px; margin-top: 10px; font-size: 15px;
}
input.campo.num { width: 92px; text-align: right;
                  font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- encuestas
   Un caso por bloque, no por renglón de tabla: lo que el cliente dijo
   es texto, y el texto no se lee en una celda. */
.caso { border: 1px solid var(--linea); border-radius: 8px;
        padding: 14px 16px; margin-bottom: 12px; background: #fdfdfe; }
.cabeza_caso { display: flex; justify-content: space-between; gap: 12px;
               align-items: flex-start; flex-wrap: wrap; }
.dichos { display: grid; gap: 6px; margin: 10px 0 2px;
          padding: 10px 12px; background: var(--suave); border-radius: 7px; }
.dicho { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dicho span:first-child { flex: 0 0 auto; min-width: 180px; }
.nota_encuesta { display: inline-block; font-weight: 700; font-size: 13px;
                 padding: 3px 10px; border-radius: 20px;
                 font-variant-numeric: tabular-nums; }
/* El color dice la gravedad sin leer el número: 1 y 2 son una cuenta
   en riesgo, 3 abre revisión, 4 y 5 no piden nada. */
.nota_encuesta.n1, .nota_encuesta.n2 { background: #fdecea; color: var(--grave); }
.nota_encuesta.n3 { background: #fdf6e3; color: var(--alerta); }
.nota_encuesta.n4, .nota_encuesta.n5 { background: #e6f4ec; color: var(--ok); }
.marco_revision { margin-top: 12px; padding-top: 12px;
                  border-top: 1px solid var(--linea); }
.marco_revision textarea { width: 100%; min-height: 70px; }
a.enlace { color: var(--centauro); font-weight: 600; font-size: 13px;
           text-decoration: none; }
a.enlace:hover { text-decoration: underline; }

/* ------------------------------------------------ el menú agrupado
   Once entradas no caben en la barra. Las de operación van bajo un
   solo botón que se abre; <details> lo hace el navegador, así que
   Escape lo cierra y el teclado llega a él sin que nadie lo programe.

   El panel va con position:fixed y se coloca al abrirlo. Tiene que ser
   fixed: la barra del menú se desplaza de lado en el celular
   (overflow-x), y cualquier panel absoluto adentro se recorta contra
   ese carril justo cuando se necesita. */
header.barra nav .grupo_menu > summary {
  list-style: none; cursor: pointer; padding: 7px 13px; border-radius: 6px;
  font-weight: 600; font-size: 13px; color: var(--gris); white-space: nowrap;
}
header.barra nav .grupo_menu > summary::-webkit-details-marker { display: none; }
header.barra nav .grupo_menu > summary::after { content: " ▾"; opacity: .55; }
header.barra nav .grupo_menu > summary:hover {
  background: var(--suave); color: var(--centauro);
}
header.barra nav .grupo_menu > summary.activo {
  background: var(--centauro); color: #fff;
}
.panel_menu {
  position: fixed; z-index: 30; display: flex; flex-direction: column;
  min-width: 200px; padding: 6px; background: #fff;
  border: 1px solid var(--linea); border-radius: 9px;
  box-shadow: 0 12px 28px rgba(27,21,70,.16);
}
.panel_menu a { display: block; }

/* ------------------------------------------ personal de seguridad
   La calificación con su barra: el número solo obliga a comparar de
   memoria contra los demás renglones. */
.calif { display: flex; align-items: center; gap: 9px; }
.calif b { font-size: 17px; font-variant-numeric: tabular-nums;
           color: var(--centauro); min-width: 44px; }
.barrita { flex: 1; height: 6px; background: #edeff2; border-radius: 4px;
           overflow: hidden; min-width: 56px; display: inline-block; }
.barrita i { display: block; height: 100%; background: var(--centauro); }
.medido { font-size: 11px; color: var(--gris); }
.calificacion_grande { font-size: 26px; font-weight: 700;
                       color: var(--centauro);
                       font-variant-numeric: tabular-nums; line-height: 1.1; }
.dim { display: flex; gap: 14px; padding: 12px 0;
       border-bottom: 1px solid #f0f2f4; align-items: flex-start; }
.dim:last-of-type { border-bottom: 0; }
.dim .cuerpo { flex: 1; min-width: 0; }
.dim .nombre { font-weight: 650; font-size: 13.5px; }
.dim .aporte { text-align: right; min-width: 104px; font-weight: 650;
               font-variant-numeric: tabular-nums; }
.dim .aporte .de { display: block; font-size: 11px; color: var(--gris);
                   font-weight: 400; }
.pesa { width: 58px; flex: 0 0 58px; }
.pesa .n { font-size: 10.5px; color: var(--gris); font-weight: 650; }
.pesa .b { height: 6px; background: #edeff2; border-radius: 4px;
           overflow: hidden; margin-top: 8px; }
.pesa .b i { display: block; height: 100%; background: var(--centauro); }

/* ------------------------------------------- la bitácora del día
   El eje va en medio: a la izquierda la hora, a la derecha lo que
   pasó. Lo planeado y lo real comparten la misma línea, que es todo el
   punto: la diferencia se lee sin restar. */
.bitacora { padding: 4px 0 2px; }
.leyenda_bitacora { display: flex; gap: 18px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: 12px; color: var(--gris); }
.leyenda_bitacora b { color: var(--texto); font-weight: 650; }
.paso { display: flex; align-items: stretch; }
.paso .hora { flex: 0 0 62px; text-align: right; padding: 10px 12px 10px 0;
  font-size: 12.5px; color: var(--gris); font-weight: 650;
  font-variant-numeric: tabular-nums; }
.paso .eje { flex: 0 0 28px; position: relative; }
.paso .eje::before { content: ""; position: absolute; left: 13px; top: 0;
  bottom: 0; width: 2px; background: var(--linea); }
.paso:first-of-type .eje::before { top: 16px; }
.paso:last-of-type .eje::before { bottom: calc(100% - 16px); }
.paso .punto { position: absolute; left: 4px; top: 9px; width: 20px;
  height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--linea); font-size: 9px; line-height: 16px;
  text-align: center; color: var(--gris); z-index: 1; }
.paso .cuerpo { flex: 1; padding: 9px 0 9px 12px; min-width: 0; }
.paso .titulo { font-weight: 650; font-size: 13.5px; }
.paso .detalle { font-size: 12.5px; color: var(--gris); }
.paso .titulo .etiqueta, .paso .titulo .marca { margin-left: 6px; }
/* El color dice de dónde salió el renglón: gris es una promesa del
   cliente, azul marino un hecho del equipo, ámbar algo que el sistema
   notó, azul algo que alguien de la casa tocó a mano. */
.paso.plan .punto { border-color: #c8cfda; color: #8892a0; }
.paso.plan .titulo { color: #5d6670; font-weight: 600; }
.paso.hito .punto { border-color: var(--centauro); color: var(--centauro); }
.paso.alerta .punto { border-color: var(--alerta); color: var(--alerta);
  background: #fdf6e3; }
.paso.alerta .titulo { color: #7a5c07; }
.paso.central .punto { border-color: #1f4fbf; color: #1f4fbf;
  background: #e4edfd; }
.paso.central .titulo { color: #1f4fbf; }
.paso .marca { display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px;
  border-radius: 20px; background: var(--suave); color: var(--centauro);
  vertical-align: middle; }
.paso .marca.ok { background: #e6f4ec; color: var(--ok); }
.paso .marca.alerta { background: #fdf6e3; color: var(--alerta); }
.paso .marca.grave { background: #fdecea; color: var(--grave); }

/* La cuenta regresiva del visto bueno.

   Grande y en numeros tabulares: se lee de un vistazo desde el otro
   lado del escritorio, y no baila cada segundo al cambiar de digito.
   Ambar en la ultima hora y rojo cuando vencio: un plazo que no se ve
   no se siente, y de este depende la comision del consultor. */
.reloj-cierre { font-size: 34px; font-weight: 700; line-height: 1.1;
                font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.reloj-cierre.apurado { color: var(--alerta); }
.reloj-cierre.vencido { color: var(--grave); font-size: 20px; }

/* ---------------------------------------------------------- el cierre, sesion 3
   La tarjeta de visto bueno y facturacion: las cuatro fases en fila,
   con la de ahora encendida y lo hecho en verde, y el reloj de la fase
   debajo --de quien es, y cuanto le queda--. Lo mismo para el eventual
   y para el mes del implantado. */
.fases { display: flex; list-style: none; padding: 0; margin: 2px 0 18px; }
.fases li { flex: 1; position: relative; display: flex; flex-direction: column;
            gap: 1px; padding-right: 10px; font-size: 12.5px; color: var(--gris); }
.fases li::before { content: ""; position: absolute; top: 13px; left: 30px; right: 4px;
                    height: 2px; background: var(--linea); }
.fases li:last-child::before { display: none; }
.fases .punto { width: 28px; height: 28px; border-radius: 50%; display: grid;
                place-items: center; background: #fff; border: 2px solid var(--linea);
                font-weight: 700; font-size: 12px; color: var(--gris);
                position: relative; z-index: 1; margin-bottom: 6px; }
.fases b { color: #3b4450; font-size: 13px; }
.fases li.hecha .punto { background: #e6f4ec; border-color: #bfe0cc; color: var(--ok); }
.fases li.hecha::before { background: #bfe0cc; }
.fases li.actual .punto { background: var(--centauro); border-color: var(--centauro); color: #fff; }
.fases li.actual b { color: var(--centauro); }
.fases li.regresada .punto { background: #fdf6e3; border-color: #f0e2bd; color: var(--alerta); }
.fases .cuando { font-size: 11.5px; line-height: 1.35; }
.reloj-cierre.mediano { font-size: 24px; }
.reloj-cierre .pie-reloj { font-size: 12.5px; font-weight: 500; color: var(--gris); }
table.tabla-cierre { border: 1px solid var(--linea); border-radius: 6px; margin: 6px 0 4px; }
table.tabla-cierre th { padding: 7px 10px; font-size: 10.5px; }
table.tabla-cierre td { padding: 8px 10px; font-size: 13px; }
table.tabla-cierre tr.total td { border-top: 1px solid var(--linea); background: #fafbfc; }
/* Lo que va dentro del renglon de arriba: las horas extra del servicio. */
table.tabla-cierre tr.sub td { font-size: 12.5px; color: var(--gris); padding-top: 2px; }
table.tabla-cierre tr.sub td:first-child { padding-left: 22px; }
td.der, th.der { text-align: right; }
h4.seccion { margin: 18px 0 6px; font-size: 13px; color: var(--centauro); }

/* El dinero de cada persona: sus numeros arriba y sus tickets debajo,
   cada uno con su foto para validarlo o rechazarlo ahi mismo. */
.persona-viatico { border: 1px solid var(--linea); border-radius: 8px; padding: 12px 14px;
                   margin: 8px 0; background: #fff; }
.persona-viatico .cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.persona-viatico .cabeza > :first-child { flex: 1 1 220px; }
.comprobantes { margin-top: 10px; border-top: 1px solid var(--linea); }
.comprobante { display: flex; align-items: center; gap: 12px; padding: 8px 0;
               border-bottom: 1px solid #f0f2f4; font-size: 13px; flex-wrap: wrap; }
.comprobante > :first-child { flex: 1 1 200px; }
.comprobante .importe { width: 90px; text-align: right; font-weight: 650; }
.comprobante .estado { flex: 0 1 260px; text-align: right; }
.comprobante .importe.tachado { text-decoration: line-through; color: var(--gris); }
.miniatura { width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--linea);
             display: inline-block; vertical-align: middle; object-fit: cover;
             background: repeating-linear-gradient(45deg, #eef0f2, #eef0f2 4px,
                                                   #e3e7eb 4px, #e3e7eb 8px);
             cursor: zoom-in; padding: 0; }

/* El historial de lo facturado (seccion 69). La miniatura de una foto que
   ya se fue al archivo se queda gris y no se pide. */
.miniatura.archivada { cursor: default; opacity: .9; }
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
           padding: 12px 14px; background: #fff; border: 1px solid var(--linea);
           border-radius: 8px; margin-bottom: 12px; }
.filtros .campo { margin: 0; }
.filtros select { width: auto; min-width: 120px; }
.filtros input { width: 140px; }
.filtros .empuja { flex: 1 1 auto; }
.resumen-filtro { font-size: 13px; color: #3b4450; margin: 2px 2px 10px; }
.resumen-filtro b { color: #1c1f22; }
b.folio { white-space: nowrap; }
.volver { display: inline-block; margin-bottom: 8px; color: var(--centauro);
          font-weight: 600; font-size: 13px; text-decoration: none; }
/* El visor: la foto encima de la pantalla, sin abrir otra ventana. */
.visor-fondo { position: fixed; inset: 0; z-index: 50; display: flex;
               align-items: center; justify-content: center; padding: 16px;
               background: rgba(28, 31, 34, .45); }
.visor { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto;
         background: #fff; border-radius: 10px; padding: 16px;
         box-shadow: 0 10px 30px rgba(20, 30, 40, .18); }
.visor img { display: block; max-width: 100%; margin: 10px auto 12px;
             border-radius: 6px; border: 1px solid var(--linea); }

/* La cartera del implantado: cada mes con su fase, en renglones. */
.mes-fase { display: flex; gap: 6px; align-items: baseline; margin: 0 0 5px;
            font-size: 12px; white-space: nowrap; }
.mes-fase b { font-size: 11px; letter-spacing: .5px; color: #3b4450; min-width: 30px; }

/* Los terminos del mes: dos preguntas con sus opciones a la vista. */
.opcion { display: flex; gap: 8px; align-items: center; font-weight: 500;
          font-size: 13.5px; margin: 0 0 6px; cursor: pointer; }
.opcion input { width: auto; margin: 0; }
.bloque-radio { background: var(--suave); border-radius: 8px; padding: 10px 12px; }

/* El camino al cobro, en el panorama: cuantos hay en cada fase. */
.camino { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linea);
          border-radius: 8px; overflow: hidden; margin-top: 6px; }
.camino > div { padding: 10px 12px; border-left: 1px solid var(--linea); }
.camino > div:first-child { border-left: 0; }
.camino .cifra { font-size: 20px; }
.fila-extra td { background: #fafbfc; }
@media (max-width: 720px) {
  .fases { flex-wrap: wrap; row-gap: 10px; }
  .fases li { flex: 1 1 45%; }
  .fases li::before { display: none; }
  .camino { grid-template-columns: repeat(2, 1fr); }
  .comprobante .estado { flex: 1 1 100%; text-align: left; }
}

/* ------------------------------------------- lo que dice la unidad
   Seccion 60. Dos testigos, cada uno con su color: la unidad en verde
   azulado --el de "arribado"--, el telefono en azul. */
.testigo { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px;
           margin-top: 4px; line-height: 1.45; }
.testigo .fuente { flex: 0 0 auto; font-size: 9.5px; font-weight: 700;
                   letter-spacing: .5px; text-transform: uppercase;
                   border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.testigo .fuente.unidad { background: #ddf1f2; color: #0f6b74; }
.testigo .fuente.telefono { background: #e4edfd; color: #1f4fbf; }
.testigo .dice { color: #3b4450; }
.testigo .dice.grave { color: var(--grave); font-weight: 600; }
.testigo .dice.alerta { color: #7a5c07; font-weight: 600; }
.testigo .dice.ok { color: var(--ok); }
.testigo .dice.gris { color: var(--gris); }
/* La gasolina contra los kilometros, dentro de la tarjeta de la persona. */
.gasolina { margin-top: 12px; border: 1px solid #f0e2bd; background: #fffaf0;
            border-radius: 8px; padding: 10px 12px; }
.gasolina .cabeza-gas { display: flex; gap: 8px; align-items: center;
                        flex-wrap: wrap; margin-bottom: 4px; }
.gasolina table.tabla-cierre { background: #fff; margin: 8px 0 6px; }
.gasolina td.fuerte { font-weight: 700; color: #7a5c07; }