/* =====================================================================
   App de campo — MARA INGENIEROS

   Se diseña para una situación concreta: un técnico en una torre, con
   guantes, con el sol de frente y una sola mano libre. De ahí salen todas
   las decisiones de este archivo:

     · Contraste alto (texto casi negro sobre blanco). El modo oscuro se ve
       precioso en la oficina y es ilegible a mediodía en campo.
     · Nada por debajo de 56 px de alto en lo que haya que tocar.
     · Tipografía grande: 17 px de base, no 14.
     · Cero tablas y cero scroll horizontal.
   ===================================================================== */

:root {
  --azul: #0058A3;
  --azul-vivo: #1E7FD1;
  --tinta: #0B2340;
  --tinta-suave: #47536B;
  --linea: #D9E1EA;
  --papel: #FFFFFF;
  --papel-alt: #F2F5F9;
  --verde: #2F6B4F;
  --ocre: #A9720C;
  --rojo: #C1440E;

  --alto-barra: 52px;
  --alto-menu: 68px;
}

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

/* El atributo `hidden` del HTML se apoya en una regla del navegador
   ([hidden]{display:none}) que CUALQUIER regla propia con display gana por
   especificidad. Aquí pasó de verdad: el menú de cinco botones seguía
   visible en la pantalla de acceso, porque #menu{display:flex} tapaba al
   hidden. Esta línea lo zanja para todo el archivo. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overscroll-behavior-y: contain;
}

/* --------------------------------------------------------------- barra */

#barra {
  position: fixed; top: 0; left: 0; right: 0; height: var(--alto-barra);
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--azul); color: #fff; z-index: 50;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--alto-barra) + env(safe-area-inset-top));
}
#marca { font-weight: 700; letter-spacing: .2px; margin-right: auto; }

.chip {
  font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff; border: 0;
  white-space: nowrap;
}
.chip-boton { min-height: 34px; cursor: pointer; }
.chip.sin-red { background: var(--rojo); }
.chip.con-red { background: rgba(255,255,255,.18); }
.chip.subiendo { background: var(--ocre); }

/* ------------------------------------------------------------ pantallas */

.pantalla {
  display: none;
  padding: calc(var(--alto-barra) + env(safe-area-inset-top) + 14px) 14px
           calc(var(--alto-menu) + env(safe-area-inset-bottom) + 20px);
  min-height: 100vh;
}
.pantalla.activa { display: block; }

.titulo-seccion {
  font-size: 15px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--tinta-suave); margin: 22px 0 10px;
}

/* --------------------------------------------------------------- login */

/* La pantalla de acceso es la ÚNICA con imagen de fondo. Dentro de la app
   no hay ninguna: en una torre, con sol, un fondo con textura detrás de un
   botón es ruido que estorba. Aquí sirve para que el técnico reconozca la
   marca antes de escribir su contraseña. */
#pantalla-login {
  background-image:
    /* Velo oscuro MUY marcado sobre la foto. Sin él, el texto sobre una
       imagen es ilegible a mediodía — que es justo cuando se usa. */
    linear-gradient(rgba(11, 35, 64, .90), rgba(11, 35, 64, .96)),
    url("../img/fondo.jpg?v=9");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}

.login-caja { max-width: 420px; margin: 4vh auto 0; }

.login-marca { text-align: center; margin-bottom: 22px; }
.login-logo {
  width: 120px; height: auto; max-height: 96px; object-fit: contain;
  /* El logo es oscuro y el fondo también: se le pone un disco claro
     detrás para que no se pierda. */
  background: #fff; border-radius: 50%; padding: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.login-nombre {
  color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .5px;
  margin-top: 12px;
}
.login-lema { color: var(--chrome-ink-soft, #C3D4E8); font-size: 14px; }

/* Sobre el fondo oscuro, el texto de esta pantalla va en claro. */
#pantalla-login .login-caja h1 {
  font-size: 30px; margin: 0 0 4px; color: #fff; text-align: center;
}
#pantalla-login .sub { color: #C3D4E8; margin: 0 0 22px; text-align: center; }
#pantalla-login label { color: #fff; }
#pantalla-login .pie { color: #A9BDD6; }
#pantalla-login .pie strong { color: #fff; }
#pantalla-login input[type=text],
#pantalla-login input[type=password] {
  background: rgba(255, 255, 255, .96); border-color: rgba(255, 255, 255, .35);
}

.login-caja h1 { font-size: 34px; margin: 0 0 4px; color: var(--azul); }
.login-caja h1 span { color: var(--tinta); }
.sub { color: var(--tinta-suave); margin: 0 0 24px; }
.pie { color: var(--tinta-suave); font-size: 15px; margin-top: 22px; }

label { display: block; font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; min-height: 56px; padding: 12px 14px; font-size: 18px;
  border: 2px solid var(--linea); border-radius: 12px; background: #fff;
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-vivo);
}

/* --------------------------------------------------------------- botón */

.boton-grande {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; margin-top: 16px; padding: 14px 18px;
  font-size: 20px; font-weight: 700; border: 2px solid var(--linea);
  border-radius: 14px; background: #fff; color: var(--tinta); cursor: pointer;
}
.boton-grande.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton-grande.peligro  { background: #fff; border-color: var(--rojo); color: var(--rojo); }
.boton-grande.ocre     { background: var(--ocre); border-color: var(--ocre); color: #fff; }
.boton-grande:active { transform: scale(.985); }
.boton-grande[disabled] { opacity: .5; }

/* La acción principal: enorme a propósito. Con guantes y a contraluz, el
   técnico no debería tener que apuntar. */
.boton-accion {
  min-height: 96px; font-size: 26px; margin-top: 18px;
}

.fila-botones { display: flex; gap: 10px; }
.fila-botones .boton-grande { margin-top: 12px; }

/* -------------------------------------------------------------- tarjeta */

.tarjeta {
  border: 2px solid var(--linea); border-radius: 16px; padding: 16px;
  margin-bottom: 14px; background: #fff;
}
.tarjeta.actual { border-color: var(--azul); border-width: 3px; }
.tarjeta h3 { margin: 6px 0 4px; font-size: 22px; line-height: 1.25; }
.tarjeta .meta { color: var(--tinta-suave); font-size: 15px; margin: 2px 0; }

.etiqueta {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--tinta-suave);
}
.etiqueta.Pendiente, .etiqueta.Asignada { background: var(--azul-vivo); }
.etiqueta.Aceptada { background: var(--azul); }
.etiqueta[class*="ruta"] { background: var(--azul); }
.etiqueta[class*="sitio"], .etiqueta.Trabajando { background: var(--ocre); }
.etiqueta.Pausada { background: #C29A4A; }
.etiqueta.Finalizada { background: var(--verde); }

.aviso {
  border: 2px solid var(--linea); border-left: 6px solid var(--azul);
  border-radius: 12px; padding: 14px 16px; background: var(--papel-alt);
}
.aviso p { margin: 6px 0; }
.error { color: var(--rojo); font-weight: 700; }
.vacio { color: var(--tinta-suave); padding: 24px 4px; text-align: center; }

/* ---------------------------------------------------------- evidencias */

.rejilla-fotos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}
.rejilla-fotos figure { margin: 0; position: relative; }
.rejilla-fotos img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--linea);
}
.rejilla-fotos figcaption {
  position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 700;
  background: rgba(11,35,64,.82); color: #fff; padding: 2px 6px; border-radius: 6px;
}
.rejilla-fotos .pendiente img { border-color: var(--ocre); border-style: dashed; }

.selector-tipo { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.selector-tipo button {
  flex: 1 1 30%; min-height: 52px; font-size: 16px; font-weight: 700;
  border: 2px solid var(--linea); border-radius: 12px; background: #fff;
  color: var(--tinta);
}
.selector-tipo button.elegido {
  background: var(--azul); border-color: var(--azul); color: #fff;
}

/* ---------------------------------------------------------- checklist */

.pregunta {
  border: 2px solid var(--linea); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}
.pregunta.critica { border-left: 6px solid var(--rojo); }
.pregunta.sin-responder { background: #FFF9F2; }
.pregunta p { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.pregunta .marca-critica {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--rojo);
  margin-bottom: 6px;
}
.opciones { display: flex; gap: 8px; }
.opciones button {
  flex: 1; min-height: 60px; font-size: 19px; font-weight: 700;
  border: 2px solid var(--linea); border-radius: 12px; background: #fff;
  color: var(--tinta);
}
.opciones button.si.elegido    { background: var(--verde); border-color: var(--verde); color: #fff; }
.opciones button.no.elegido    { background: var(--rojo);  border-color: var(--rojo);  color: #fff; }
.opciones button.na.elegido    { background: var(--tinta-suave); border-color: var(--tinta-suave); color: #fff; }

.resumen-checklist {
  border-radius: 14px; padding: 16px; margin-bottom: 14px; font-weight: 700;
}
.resumen-checklist.aprobado { background: #E7F1EC; border: 2px solid var(--verde); }
.resumen-checklist.rechazado { background: #FBEAE2; border: 2px solid var(--rojo); }

/* --------------------------------------------------------------- chat */

/* Selector de conversación: «General» y una pastilla por cada OT. Se
   desplaza en horizontal en vez de apilarse, para no empujar la
   conversación fuera de la pantalla cuando la cuadrilla tiene seis órdenes.
   Los 48 px de alto son el mínimo para acertarle con guante puesto. */
.selector-chat {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  margin-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.chip-chat {
  flex: 0 0 auto; width: auto; min-height: 48px; margin: 0;
  padding: 10px 18px; border-radius: 999px; font-size: 16px; font-weight: 700;
  background: var(--papel-alt); color: var(--tinta);
  border: 2px solid transparent;
}
.chip-chat.activo { background: var(--azul, #1B4F8A); color: #fff; }

.burbuja { max-width: 82%; padding: 10px 14px; border-radius: 14px; margin: 8px 0; }
.burbuja .quien { font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.burbuja.mia { margin-left: auto; background: var(--blueprint-wash, #E7F0FA); }
.burbuja.suya { margin-right: auto; background: var(--papel-alt); }
.burbuja.pendiente { border: 2px dashed var(--ocre); }

#chat-escribir {
  position: sticky; bottom: 0; background: var(--papel); padding-top: 8px;
  display: flex; gap: 8px; align-items: stretch;
}
/* min-width:0 es imprescindible: por defecto un elemento flexible no baja
   de su ancho de contenido, y el campo no se encogía... pero el BOTÓN sí
   crecía. Resultado real medido en el teléfono: campo de 32 px y botón de
   557. Era imposible escribir un mensaje. */
#chat-escribir input {
  flex: 1 1 auto; min-width: 0; margin: 0;
}
/* El botón lleva la clase .boton-grande, que trae width:100%. Dentro de
   una fila flexible eso significa «quiero todo el ancho», y se lo comía.
   Aquí se le fija un tamaño propio y se le prohíbe crecer. */
#chat-escribir button.boton-grande {
  flex: 0 0 auto; width: auto; min-width: 108px; min-height: 56px;
  margin-top: 0; padding: 12px 16px; font-size: 17px;
}

/* --------------------------------------------------------------- menú */

#menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; background: #fff; border-top: 2px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
#menu button {
  flex: 1; min-height: var(--alto-menu); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--tinta-suave);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
#menu button .icono { font-size: 24px; line-height: 1; }
#menu button.activa { color: var(--azul); }

/* ------------------------------------------------------------- brindis */

#brindis {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--alto-menu) + env(safe-area-inset-bottom) + 16px);
  background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 12px;
  font-weight: 700; z-index: 60; max-width: 90vw; text-align: center;
}
#brindis.error { background: var(--rojo); color: #fff; }

/* Sin animaciones para quien las tenga desactivadas en el sistema. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}