/* La app del personal de seguridad.

   Misma identidad que la consola y el task sheet: el navy de Centauro,
   fondo claro, Inter. Lo que cambia no es el color, es la forma: quien
   la usa esta de pie, con una mano y con prisa.

   - los botones que importan son grandes y estan abajo, donde llega el
     pulgar sin mover la mano
   - el texto que se lee en movimiento es mas grande que en la consola
   - nada depende del color solo: al lado del color siempre hay palabra,
     porque a pleno sol un ambar y un verde son el mismo gris */

:root {
  --centauro: #1B1546;
  --suave: #f0f3f5;
  --caja: #fff;
  --linea: #e0e4e8;
  --gris: #78828c;
  --texto: #1a1d21;
  --ok: #1e7a4d;
  --alerta: #b8860b;
  --grave: #c0392b;
  --sombra: 0 1px 3px rgba(27, 21, 70, .07);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--suave);
  color: var(--texto);
  font: 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, sans-serif;
  /* El notch y la barra de gestos del telefono. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app { max-width: 560px; margin: 0 auto; padding: 16px 16px 96px; }

h1 { font-size: 20px; margin: 0 0 2px; color: var(--centauro); }
h2 { font-size: 15px; margin: 22px 0 10px; color: var(--centauro); }
p { margin: 0 0 10px; }

.gris { color: var(--gris); }
.chico { font-size: 13px; }
.grande { font-size: 30px; font-weight: 700; line-height: 1.05;
          color: var(--centauro); letter-spacing: -.5px; }
.num { font-variant-numeric: tabular-nums; }
.verde { color: var(--ok); }
.ambar { color: var(--alerta); }
.rojo { color: var(--grave); }

/* La marca de la casa: el filo navy arriba de cada tarjeta principal,
   igual que la cabecera de la consola y del task sheet. */
.caja {
  background: var(--caja);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.caja.principal { border-top: 4px solid var(--centauro); }
/* El boton rojo va al final de todas las pantallas, justo debajo del
   ultimo boton de cada una (Mandar, Guardar). Pegados, el pulgar que
   iba por uno tocaba el otro (caso de Alberto Arredondo, 28 sep). El
   aire de arriba los separa en todas las pantallas a la vez. */
.caja.urgente { border-left: 4px solid var(--grave); margin-top: 36px; }

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

/* Los botones se tocan con el pulgar, no con el raton: 52 px de alto es
   el minimo con el que no se falla caminando. */
button {
  font: inherit;
  font-weight: 650;
  min-height: 52px;
  padding: 14px 18px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--centauro);
  color: #fff;
  cursor: pointer;
}
button:disabled { opacity: .45; }
button.claro {
  background: #fff; color: var(--centauro);
  border: 1px solid var(--linea);
}
button.panico { background: var(--grave); letter-spacing: .5px; }
button.chico { min-height: 42px; padding: 10px 14px; font-size: 14px;
               width: auto; }

.fila { display: flex; gap: 10px; align-items: center; }
.fila.separa { justify-content: space-between; }

.marca {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 650; padding: 4px 10px;
  border-radius: 999px; background: var(--suave); color: var(--gris);
}
.marca.ok { background: #e6f4ec; color: var(--ok); }
.marca.alerta { background: #fdf6e3; color: #7a5c07; }
.marca.grave { background: #fdecea; color: #8f2b20; }
/* Su foto encima de su puesto, en la esquina de la tarjeta del dia. */
.mi-puesto {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto; max-width: 120px; text-align: center;
}
.mi-foto {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--linea); background: var(--suave);
}
.mi-foto[hidden] { display: none; }

.dato { margin-bottom: 12px; }
.dato .clave {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gris); font-weight: 650; display: block; margin-bottom: 2px;
}

/* La caja de texto larga llego con Reportar una falla (seccion 92): la
   misma forma que los demas campos, y crece hacia abajo, no de lado. */
input, select, textarea {
  font: inherit; width: 100%; padding: 14px;
  background: #fff; color: var(--texto);
  border: 1px solid var(--linea); border-radius: 10px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--centauro);
                                            outline-offset: -2px; }
label { display: block; font-size: 13px; color: var(--gris);
        margin-bottom: 6px; }
.campo { margin-bottom: 14px; }

/* La senal a pantalla completa: blanco y nada mas. Encima de todo, la
   barra y el panico incluidos: mientras se levanta, no hay otra cosa
   que hacer con el telefono. */
.senal-pantalla {
  position: fixed; inset: 0; z-index: 60;
  background: #fff; color: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
body.senal-abierta { overflow: hidden; }
/* Lo que se ensena vive en esta caja. Con el telefono derecho la caja
   se acuesta: mide lo alto por lo ancho (lo pone app.js, en pixeles) y
   gira un cuarto de vuelta, para que la senal se lea a lo ancho. */
.senal-giro {
  width: 100%; height: 100%; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.senal-pantalla.girada .senal-giro {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.senal-imagen {
  max-width: 100%; max-height: 100%; min-height: 0;
  object-fit: contain;
}
.senal-imagen.con-texto { max-height: 72%; }
/* Las palabras no se parten a la mitad: si no cabe, se achica la letra
   (app.js), y si son varias bajan de renglon entre una y otra. */
.senal-texto {
  width: 100%; text-align: center;
  font-weight: 800; line-height: 1;
  word-break: normal; overflow-wrap: normal;
  font-size: clamp(36px, 15vw, 220px);
}
.senal-texto.con-imagen { font-size: clamp(24px, 9vw, 80px); }
.senal-texto.chico { font-size: 16px; font-weight: 500; color: var(--gris); }
.senal-aviso { font-size: 16px; color: var(--grave); text-align: center; max-width: 320px; }
.senal-cerrar {
  position: absolute; right: 10px; top: max(10px, env(safe-area-inset-top));
  width: 44px; min-height: 44px; padding: 0; border-radius: 999px;
  background: rgba(127, 127, 127, .22); color: inherit; font-size: 20px;
}
.senal-punto { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
               flex: 0 0 auto; }
.senal-boton { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.senal-icono { display: inline-flex; width: 18px; height: 18px; }
.senal-icono svg { width: 100%; height: 100%; }

/* La franja de deshacer: justo encima de la barra, que es donde el
   pulgar acaba de estar. Nunca encima del boton de panico. */
.deshacer {
  position: fixed; left: 8px; right: 8px; bottom: 74px;
  z-index: 40;
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
  background: var(--centauro); color: #fff;
  border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(27, 21, 70, .28);
  margin-bottom: env(safe-area-inset-bottom);
}
.deshacer .chico { opacity: .85; margin-top: 2px; }
.deshacer button { min-height: 38px; margin: 0; flex: 0 0 auto; }
.deshacer.dicho { justify-content: center; }

/* La barra de abajo: donde llega el pulgar sin mover la mano. */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--linea);
  display: flex;
  box-shadow: 0 -1px 6px rgba(27, 21, 70, .06);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra a {
  flex: 1; text-align: center; padding: 10px 4px 12px;
  color: var(--gris); text-decoration: none; font-size: 11px;
  font-weight: 650;
}
.barra a.activo { color: var(--centauro); box-shadow: inset 0 2px 0 var(--centauro); }
.barra .icono { display: block; font-size: 18px; line-height: 1.4; }

/* Lo que no se ha podido mandar. Vive arriba de todo y no se quita
   hasta que sale: un pendiente escondido es un pendiente perdido. */
.pendientes {
  background: #fdf6e3;
  border: 1px solid #f0e2bd;
  color: #7a5c07;
  border-radius: 10px; padding: 12px; margin-bottom: 14px;
  font-size: 14px; font-weight: 600;
}

.aviso { border-radius: 10px; padding: 12px; margin-bottom: 12px;
         font-size: 14px; border: 1px solid var(--linea); }
.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); text-align: center; padding: 32px 16px; }

/* La puerta de la app --la entrada, el codigo que dicta el consultor y
   la cuenta que no es de campo--: el navy de la casa con una luz
   detras de la tarjeta blanca, igual que la consola. El
   logo es navy y sobre oscuro se pierde, por eso vive en la tarjeta. */
body:has(.entrada) {
  background-color: #120e33;
  background-image:
    radial-gradient(520px 560px at 50% 40%, rgba(96, 84, 200, .34), transparent 70%),
    linear-gradient(170deg, #211a5a 0%, #1B1546 48%, #0f0b2a 100%);
  min-height: 100vh;
}
/* Lo alto de la pantalla menos el margen de #app, que deja abajo el
   lugar de la barra: aqui no hay barra y la tarjeta va al centro. */
.entrada { min-height: calc(100vh - 112px); display: flex; flex-direction: column;
           justify-content: center; }
.entrada .caja {
  border: 0; border-top: 4px solid #c9a227; border-radius: 16px;
  padding: 26px 20px 20px;
  box-shadow: 0 24px 60px rgba(5, 3, 20, .45), 0 2px 6px rgba(5, 3, 20, .25);
}
.portada { text-align: center; margin: 0 0 22px; }
.portada h1 { letter-spacing: 3px; text-transform: uppercase; }
.portada .app-nombre {
  margin-top: 16px; padding: 16px 0 0 2.2px; border-top: 1px solid var(--linea);
  font-size: 18px; font-weight: 800; letter-spacing: 2.2px; line-height: 1.25;
  text-transform: uppercase; color: var(--centauro);
}
.portada .app-sello {
  display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; color: #8c6f14;
}
.portada .app-sello .palabra { margin-right: -5px; }
/* El lema debajo, del mismo largo que la palabra (firma.js, 26 sep). */
.marca-connect { display: inline-flex; flex-direction: column; align-items: stretch; }
.marca-connect .lema {
  display: flex; justify-content: space-between;
  letter-spacing: 0; font-weight: 600; line-height: 1.2;
}
.portada .app-sello .lema { font-size: 9px; margin-top: 4px; }
/* Las rayas, a media altura de la palabra: el lema cuelga debajo. */
.portada .app-sello::before, .portada .app-sello::after {
  content: ""; width: 30px; height: 1px; background: #c9a227;
  margin-top: .62em;
}
.pie-entrada {
  margin: 18px 0 0; text-align: center; font-size: 12px; letter-spacing: .3px;
  color: rgba(255, 255, 255, .62);
}

.marco { border-top: 1px solid var(--linea); margin-top: 14px;
         padding-top: 14px; }


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

   Las fotos se ven de dos en dos: en un telefono, cuatro miniaturas por
   renglon no dejan ver un golpe, y ver el golpe es toda la razon por la
   que existe esta pantalla. */

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.celda { min-width: 0; }

.ranura {
  aspect-ratio: 4 / 3; border: 1px dashed var(--linea); border-radius: 10px;
  background: #fafbfc; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 6px;
  overflow: hidden; cursor: pointer;
}
.ranura.lista { border-style: solid; border-color: var(--ok); padding: 0; }
.ranura img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La foto de referencia ES la ranura: es un <img> con esta clase, no un
   <img> DENTRO de una ranura. Por eso lleva su propio ancho aqui.

   La regla que le pone el ancho a las fotos es `.ranura img`, y a esta
   no le aplicaba: se pintaba a su tamano natural --mil seiscientos
   pixeles-- saliendose de su columna y encimandose sobre la celda de al
   lado y sobre el "Tocar para la foto" de junto. Se veia como dos fotos
   transparentes una encima de otra. */
.ranura.vieja { border-style: solid; border-color: var(--linea);
                padding: 0; cursor: default; opacity: .85;
                width: 100%; height: auto; object-fit: cover; }

/* Al entregar: como estaba al recibirla, y como esta ahora, pegadas.

   La rejilla baja a una columna cuando se compara, para que cada foto
   quede a media pantalla en vez de a un cuarto. Un rayon en una foto de
   ochenta pixeles no se ve, y ver el golpe es toda la razon por la que
   existe esta pantalla. */
.rejilla.comparando { grid-template-columns: 1fr; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.par > div { min-width: 0; }

.tiras { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.tira { width: 74px; height: 56px; object-fit: cover; border-radius: 6px;
        flex: none; border: 1px solid var(--linea); }

.firma {
  width: 100%; height: 150px; border: 1px solid var(--linea);
  border-radius: 10px; background: #fff; touch-action: none;
  display: block;
}

/* Un enlace que se ve y se toca como boton: el paso siguiente no puede
   parecer una nota al pie. */
a.botonazo {
  display: block; text-align: center; text-decoration: none;
  background: var(--centauro); color: #fff; border-radius: 10px;
  min-height: 52px; line-height: 52px; font-weight: 650; font-size: 15px;
}

/* El desglose del bono: un punto por criterio, y la frase que lo
   explica. Sin la frase, un bono perdido es solo un numero mas chico. */
.renglon_bono { display: flex; gap: 10px; align-items: flex-start;
                margin-bottom: 10px; }
.renglon_bono .punto {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  text-align: center; line-height: 22px; font-size: 12px; font-weight: 700;
}
.renglon_bono .punto.si { background: #e6f4ec; color: var(--ok); }
.renglon_bono .punto.no { background: #fdecea; color: var(--grave); }
.renglon_bono .punto.na { background: var(--suave); color: var(--gris); }

/* El encabezado de las cuatro pestanas: la marca a la izquierda y, solo
   en "Yo", el boton de salir a la derecha. Alto fijo y chico: cada pixel
   de aqui se lo quita al dia que el agente viene a leer. */
.encabezado { display: flex; align-items: center; justify-content: space-between;
              gap: 10px; margin: 0 0 10px; min-height: 30px; }
.encabezado .logo { height: 30px; width: auto; display: block; }
/* El logotipo completo de la empresa --marca y leyenda-- es mucho mas
   ancho que alto: a 30 px de alto la leyenda no se lee y a mas alto se
   come la pantalla. Se le da altura propia y un tope de ancho para que
   nunca empuje al boton de salir fuera del renglon. */
.encabezado .logo.ancho { height: 34px; max-width: 62%; object-fit: contain;
                          object-position: left center; }
.logo-entrada { max-width: 78%; max-height: 64px; display: block;
                margin: 0 auto; object-fit: contain; }

/* El riesgo cerca del servicio (seccion 137). El nivel con el color de
   la consola, siempre con su numero y su nombre. La app del cliente de
   la Central (/ci/) usa esta misma hoja y estas mismas piezas. */
.nivel { display: inline-block; color: #fff; border-radius: 999px;
         padding: 3px 10px; font-size: 12px; font-weight: 700; }
.riesgo { border-left: 4px solid var(--grave); }
.riesgo-titulo { color: var(--centauro); font-size: 16px; }
.riesgo .renglon { display: block; padding: 10px 0; color: inherit;
                   text-decoration: none; border-top: 1px solid var(--linea); }
.riesgo .renglon:first-of-type { border-top: 0; padding-top: 4px; }
.riesgo h3 { margin: 6px 0 2px; font-size: 15px; }
.atras { display: inline-block; margin: 0 0 10px; font-weight: 650;
         text-decoration: none; }
a.botonazo.claro { background: #fff; color: var(--centauro);
                   border: 1px solid var(--linea); margin-top: 12px; }