/* =====================================================================
   Aquataide · Sistema de control de mantenimiento
   Hoja de estilos base · Pelayo Ingenieria Digital

   Identidad: agua limpia. Azul marino Aquataide, mucho blanco,
   acento turquesa. Pensado primero para movil (mobile-first).
   ===================================================================== */

:root {
  --tinta:    #0B2C4A;   /* azul marino Aquataide, textos y cabeceras */
  --tinta-2:  #12395E;
  --agua:     #158FA6;   /* turquesa, acento (agua limpia) */
  --agua-cl:  #E4F3F6;   /* turquesa muy claro, fondos suaves */
  --papel:    #F6F9FB;   /* fondo general, casi blanco con tono frio */
  --blanco:   #FFFFFF;
  --linea:    #DCE6EC;   /* bordes y separadores */
  --gris:     #5E7183;   /* texto secundario */

  --ok:       #1E8E5A;   /* verde: al dia */
  --ok-bg:    #E6F4EC;
  --aviso:    #C67C1A;   /* ambar: proximo a vencer */
  --aviso-bg: #FBF0DD;
  --alerta:   #C23B34;   /* rojo: vencido */
  --alerta-bg:#FBE9E7;
  --neutro:   #7A8B99;
  --neutro-bg:#EEF2F5;

  --radio:    14px;
  --sombra:   0 2px 10px rgba(11,44,74,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Contenedor centrado, estrecho: esto se ve en un movil */
.contenedor {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 18px 60px;
}

/* ---- Cabecera de marca ---- */
.marca {
  display: flex;
  align-items: center;
  padding: 26px 0 20px 4px;
}
.marca--centrada { justify-content: center; padding-top: 50px; }
.marca__img {
  height: 40px;
  width: auto;
  display: block;
}
/* marcador antiguo, por si queda algun uso */
.marca__logo {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--tinta);
  color: var(--blanco);
  display: grid; place-items: center;
  font-weight: 800; font-size: 20px;
  flex-shrink: 0;
}
.marca__nombre { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.marca__eslogan { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }

/* ---- Tarjeta del equipo ---- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin-bottom: 18px;
}

/* Banda de estado, arriba de la tarjeta: lo primero que se ve */
.estado {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--blanco);
}
.estado.ok     { background: var(--ok); }
.estado.aviso  { background: var(--aviso); }
.estado.alerta { background: var(--alerta); }
.estado.neutro { background: var(--neutro); }
.estado__punto {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blanco);
  box-shadow: 0 0 0 5px rgba(255,255,255,.25);
  flex-shrink: 0;
}
.estado__texto { font-size: 17px; font-weight: 700; }
.estado__sub { font-size: 13px; opacity: .9; font-weight: 500; }

/* Cuerpo de la tarjeta */
.tarjeta__cuerpo { padding: 22px; }

.equipo__num {
  font-size: 13px; color: var(--gris);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 2px;
}
.equipo__tipo { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.equipo__ubi { font-size: 15px; color: var(--gris); }

/* Bloque de ultima revision */
.revision {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}
.revision__label {
  font-size: 12px; color: var(--gris);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px;
}
.revision__fecha {
  font-size: 26px; font-weight: 800;
  color: var(--tinta);
  margin-bottom: 4px;
}
.revision__hace { font-size: 14px; color: var(--agua); font-weight: 600; }

/* Lista de tareas hechas en la ultima revision */
.hechas { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hecha {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
}
.hecha__check {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}

/* Observaciones publicas, si las hay */
.observaciones {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--agua-cl);
  border-radius: 10px;
  font-size: 14px;
  color: var(--tinta-2);
}
.observaciones__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--agua); font-weight: 700; margin-bottom: 4px;
}

/* ---- Contacto ---- */
.contacto {
  text-align: center;
  padding: 6px 0;
}
.contacto__label { font-size: 13px; color: var(--gris); margin-bottom: 10px; }
.contacto__tel {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tinta); color: var(--blanco);
  padding: 13px 24px; border-radius: 100px;
  font-size: 17px; font-weight: 700;
  text-decoration: none;
}
.contacto__web { display: block; margin-top: 14px; font-size: 13px; color: var(--gris); text-decoration: none; }

/* ---- Pie ---- */
.pie {
  text-align: center;
  margin-top: 30px;
  font-size: 12px;
  color: var(--neutro);
}

/* ---- Pantalla de error (equipo no encontrado) ---- */
.error-caja {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 40px 26px;
  text-align: center;
  box-shadow: var(--sombra);
  margin-top: 30px;
}
.error-caja h1 { font-size: 20px; margin-bottom: 8px; }
.error-caja p { color: var(--gris); font-size: 15px; }

/* Accesibilidad: foco visible y respeto a reduce-motion */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--agua);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   FORMULARIOS  ·  login y registro
   ===================================================================== */
.campo { display: block; margin-bottom: 16px; }
.campo__label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--tinta-2);
  margin-bottom: 6px;
}
.campo__input {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;                /* 16px evita el zoom automatico en iPhone */
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  transition: border-color .15s;
}
.campo__input:focus {
  outline: none;
  border-color: var(--agua);
  background: var(--blanco);
}
.btn-principal {
  width: 100%;
  padding: 15px;
  font-size: 16px; font-weight: 700;
  color: var(--blanco);
  background: var(--tinta);
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.btn-principal:hover { background: var(--tinta-2); }
.btn-principal:active { transform: translateY(1px); }

.login-error {
  background: var(--alerta-bg);
  color: var(--alerta);
  border: 1px solid #F0C0BB;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 18px;
}

/* =====================================================================
   ZONA TECNICO  ·  listado, ficha y registro
   ===================================================================== */

/* Barra superior */
.barra-tec {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 18px;
}
.barra-tec__logo { height: 26px; width: auto; }
.barra-tec__user { font-size: 14px; font-weight: 600; color: var(--tinta); }
.barra-tec__volver { font-size: 15px; color: var(--agua); text-decoration: none; font-weight: 600; }
.barra-tec__salir { margin-left: auto; font-size: 13px; color: var(--gris); text-decoration: none; }
.barra-tec__user + .barra-tec__salir { margin-left: auto; }

.titulo-pantalla { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }

/* Buscador */
.buscador { display: flex; gap: 8px; margin-bottom: 20px; }
.buscador__input {
  flex: 1; padding: 12px 14px; font-size: 16px;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--blanco); color: var(--tinta);
}
.buscador__input:focus { outline: none; border-color: var(--agua); }
.buscador__btn {
  padding: 12px 18px; font-size: 15px; font-weight: 700;
  background: var(--tinta); color: var(--blanco);
  border: none; border-radius: 10px; cursor: pointer;
}

/* Lista de equipos */
.lista-eq { display: flex; flex-direction: column; gap: 8px; }
.eq-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 12px;
  text-decoration: none; color: var(--tinta);
  transition: border-color .12s, transform .12s;
}
.eq-fila:active { transform: scale(.99); }
.eq-fila__punto {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.punto-ok     { background: var(--ok); }
.punto-aviso  { background: var(--aviso); }
.punto-alerta { background: var(--alerta); }
.punto-neutro { background: var(--neutro); }
.eq-fila__cont { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eq-fila__num { font-size: 16px; font-weight: 800; }
.eq-fila__desc { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-fila__ubi { color: var(--neutro); }
.eq-fila__estado {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 100px;
  white-space: nowrap; flex-shrink: 0;
}
.estado-ok     { background: var(--ok-bg);     color: var(--ok); }
.estado-aviso  { background: var(--aviso-bg);  color: var(--aviso); }
.estado-alerta { background: var(--alerta-bg); color: var(--alerta); }
.estado-neutro { background: var(--neutro-bg); color: var(--neutro); }

.vacio { text-align: center; color: var(--gris); padding: 40px 20px; font-size: 15px; }
.vacio a { color: var(--agua); }

/* Cabecera del equipo en la ficha */
.eq-cabecera {
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 20px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.eq-cabecera__num { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.eq-cabecera__tipo { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 6px; }
.eq-cabecera__cli { font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.eq-cabecera__ubi { font-size: 14px; color: var(--gris); margin-top: 4px; }
.eq-cabecera__mapa {
  display: inline-block; margin-top: 12px;
  font-size: 14px; font-weight: 700; color: var(--agua); text-decoration: none;
}

/* Aviso de guardado ok */
.aviso-ok {
  background: var(--ok-bg); color: var(--ok);
  border: 1px solid #BEE3CC;
  padding: 14px 16px; border-radius: 12px;
  font-weight: 700; font-size: 15px; margin-bottom: 16px;
}

/* Formulario de registro */
.registro {
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 20px; margin-bottom: 20px; box-shadow: var(--sombra);
}
.registro__titulo { font-size: 18px; font-weight: 800; }
.registro__fecha { font-size: 14px; color: var(--gris); margin-bottom: 16px; }

/* Boton "Todo correcto" - el protagonista */
.btn-todo {
  width: 100%; padding: 16px;
  background: var(--agua); color: var(--blanco);
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 17px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: 18px;
  transition: background .12s, transform .1s;
}
.btn-todo span { font-size: 12px; font-weight: 500; opacity: .9; }
.btn-todo:active { transform: scale(.98); }

/* Lista de tareas del formulario */
.tareas-lista { display: flex; flex-direction: column; gap: 8px; }
.tarea-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border: 1.5px solid var(--linea); border-radius: 10px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.tarea-item--pend { border-color: #F0D2A0; background: #FEFAF3; }
.tarea-item--check { border-color: var(--ok); background: var(--ok-bg); }
.tarea-item__cb { position: absolute; opacity: 0; width: 0; height: 0; }
.tarea-item__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--linea); flex-shrink: 0;
  display: grid; place-items: center;
  transition: all .12s;
}
.tarea-item--check .tarea-item__box {
  background: var(--ok); border-color: var(--ok);
}
.tarea-item--check .tarea-item__box::after {
  content: "\2713"; color: #fff; font-size: 15px; font-weight: 700;
}
.tarea-item__cont { display: flex; flex-direction: column; }
.tarea-item__nombre { font-size: 16px; font-weight: 600; }
.tarea-item__meta { font-size: 12px; color: var(--gris); }
.tarea-item__meta .pend { color: var(--aviso); }

/* Bloque "mas" (observaciones plegadas) */
.mas { margin-top: 16px; }
.mas summary {
  font-size: 14px; font-weight: 600; color: var(--agua);
  cursor: pointer; padding: 6px 0;
}
.mas__area {
  width: 100%; margin-top: 8px; padding: 12px;
  font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--linea); border-radius: 10px;
  resize: vertical; min-height: 60px;
}
.mas__area:focus { outline: none; border-color: var(--agua); }

.btn-guardar { margin-top: 18px; }

/* Historial */
.historial {
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 20px; box-shadow: var(--sombra);
}
.historial__titulo { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.hist-item {
  display: flex; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.hist-item:first-of-type { border-top: none; padding-top: 0; }
.hist-item__fecha {
  font-size: 13px; font-weight: 700; color: var(--tinta-2);
  white-space: nowrap; flex-shrink: 0; width: 82px;
}
.hist-item__tareas { font-size: 14px; color: var(--tinta); }
.hist-item__tec { font-size: 12px; color: var(--gris); margin-top: 2px; }
.hist-item__obs { font-size: 13px; color: var(--gris); font-style: italic; margin-top: 3px; }

/* Boton de anadir foto */
.foto-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 13px;
  border: 1.5px dashed var(--agua); border-radius: 10px;
  color: var(--agua); font-weight: 600; font-size: 15px;
  cursor: pointer; background: var(--agua-cl);
}
.foto-btn__input { position: absolute; opacity: 0; width: 0; height: 0; }
.foto-btn__icono { font-size: 18px; }
.foto-previa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.foto-previa__img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--linea);
}
.hist-item__fotos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.hist-item__foto {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--linea);
}

/* Analitica descargable en la pantalla publica */
.analitica-publica {
  display: flex; align-items: center; gap: 14px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 16px;
  text-decoration: none; box-shadow: var(--sombra);
}
.analitica-publica__icono { font-size: 26px; }
.analitica-publica__txt { flex: 1; display: flex; flex-direction: column; }
.analitica-publica__titulo { font-size: 15px; font-weight: 700; color: var(--tinta); }
.analitica-publica__fecha { font-size: 13px; color: var(--gris); }
.analitica-publica__flecha { font-size: 20px; color: var(--agua); }

/* Sello sutil: analitica hecha pero no descargable (privada) */
.analitica-sello {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; margin-bottom: 16px;
  background: var(--ok-bg, #E8F5EC); border-radius: 10px;
  font-size: 13px; color: var(--ok, #1B7A3D);
}
.analitica-sello__check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok, #1B7A3D); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.analitica-sello__txt { font-weight: 600; }

/* Logo del cliente en la pagina publica (discreto, cerca del contacto) */
.cliente-pub {
  text-align: center; margin: 18px 0 8px; padding-top: 16px;
  border-top: 1px solid var(--linea, #E4EAEE);
}
.cliente-pub__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--neutro, #94A3AD); margin-bottom: 8px;
}
.cliente-pub__marca {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cliente-pub__logo { height: 52px; width: auto; max-width: 130px; object-fit: contain; }
.cliente-pub__nom { font-size: 15px; font-weight: 700; color: var(--tinta, #0B2C4A); }

/* Acceso discreto del tecnico para registrar mantenimiento */
.acceso-tecnico { text-align: center; margin: 6px 0 4px; }
.acceso-tecnico__link {
  font-size: 12px; color: var(--neutro, #94A3AD);
  text-decoration: none; border-bottom: 1px dotted var(--neutro, #94A3AD);
  padding-bottom: 1px;
}
.acceso-tecnico__link:hover { color: var(--agua, #158FA6); border-color: var(--agua, #158FA6); }

/* ===== Vista del tecnico: mejoras ===== */
/* Enlace extra en la barra superior */
.barra-tec__link {
  color: var(--agua, #158FA6); text-decoration: none; font-weight: 700;
  font-size: 14px; margin-left: auto; margin-right: 16px;
}

/* Fila de equipo: ahora contiene el enlace principal + boton llegar */
.eq-fila {
  display: flex; align-items: stretch; gap: 0;
  background: var(--blanco, #fff); border: 1px solid var(--linea, #E4EAEE);
  border-radius: 14px; margin-bottom: 10px; overflow: hidden;
}
.eq-fila__main {
  display: flex; align-items: center; gap: 12px; flex: 1;
  padding: 14px 16px; text-decoration: none; color: inherit; min-width: 0;
}
.eq-fila__llegar {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; background: var(--agua-cl, #E8F3F5);
  color: var(--tinta, #0B2C4A); text-decoration: none;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  border-left: 1px solid var(--linea, #E4EAEE);
}
.eq-fila__llegar:hover { background: #d5eaee; }

/* Filas de mantenimiento (vista tecnico) */
.mant-fila {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanco, #fff); border: 1px solid var(--linea, #E4EAEE);
  border-radius: 14px; margin-bottom: 10px; padding: 14px 16px;
}
.mant-fila__cont { flex: 1; min-width: 0; }
.mant-fila__top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mant-fila__fecha { font-weight: 800; color: var(--tinta, #0B2C4A); }
.mant-fila__fuente { font-size: 14px; color: var(--agua, #158FA6); font-weight: 700; }
.mant-fila__sub { font-size: 13px; color: var(--gris, #5E7183); margin-top: 3px; }
.mant-fila__mio {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: var(--ok-bg, #E8F5EC); color: var(--ok, #1B7A3D);
  border-radius: 100px; font-size: 11px; font-weight: 700;
}
.mant-fila__editar {
  padding: 9px 16px; background: var(--tinta, #0B2C4A); color: #fff;
  text-decoration: none; border-radius: 9px; font-weight: 700; font-size: 14px;
  white-space: nowrap;
}

/* En movil, la fila de equipo apila el boton llegar abajo */
@media (max-width: 560px) {
  .eq-fila { flex-direction: column; }
  .eq-fila__llegar {
    border-left: none; border-top: 1px solid var(--linea, #E4EAEE);
    padding: 12px;
  }
}

/* Campo de valor para tareas que lo requieren (ej. residuo seco en ppm) */
.tarea-valor {
  margin: -6px 0 10px 0;
  padding: 12px 16px 14px 52px;
  background: rgba(43,196,217,.06);
  border: 1px solid rgba(43,196,217,.18);
  border-radius: 12px;
  animation: valorAparece .25s ease;
}
@keyframes valorAparece { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.tarea-valor__label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--agua, #158FA6);
}
.tarea-valor__input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 16px;
  border: 1.5px solid var(--linea, #E4EAEE); border-radius: 10px;
  background: #fff; color: var(--tinta, #0B2C4A);
}
.tarea-valor__input:focus {
  outline: none; border-color: var(--agua, #158FA6);
  box-shadow: 0 0 0 3px rgba(43,196,217,.15);
}
.tarea-valor__input--error {
  border-color: var(--alerta, #C0392B) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important;
}

/* Aviso de error en el parte */
.aviso-error {
  background: #FDECEA; color: #C0392B;
  border: 1px solid rgba(192,57,43,.25);
  padding: 14px 18px; border-radius: 12px;
  font-weight: 600; font-size: 15px; margin-bottom: 16px;
}

/* ---- Desglose de estado por tarea (interfaz tecnico) ---- */
.desglose {
    border: 1px solid #E2E8EC;
    border-radius: 10px;
    margin: 16px 0;
    background: #fff;
    overflow: hidden;
}
.desglose__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.desglose__cab::-webkit-details-marker { display: none; }
.desglose__cab::after {
    content: "\25BE";
    color: var(--neutro);
    font-size: .8em;
    transition: transform .2s;
    order: 3;
}
.desglose[open] .desglose__cab::after { transform: rotate(180deg); }
.desglose__titulo { flex: 0 0 auto; }
.desglose__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}
.chip {
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.chip--ok     { background: var(--ok-bg);     color: var(--ok); }
.chip--aviso  { background: var(--aviso-bg);  color: var(--aviso); }
.chip--alerta { background: var(--alerta-bg); color: var(--alerta); }
.chip--neutro { background: var(--neutro-bg); color: var(--neutro); }
.desglose__lista {
    list-style: none;
    margin: 0;
    padding: 0 14px 8px;
    border-top: 1px solid #EEF2F5;
}
.desglose__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #F3F6F8;
}
.desglose__item:last-child { border-bottom: none; }
.punto {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.desglose__nombre { flex: 1; }
.desglose__etq {
    font-size: .8rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

/* =====================================================================
   VISTO BUENO DE OBSERVACIONES · vista del tecnico  (sep. 2026)
   ===================================================================== */

.mant-fila__obs {
  margin-top: 8px; font-size: 13px; color: var(--gris);
  background: var(--neutro-bg); padding: 8px 12px; border-radius: 10px;
}
.mant-fila__obs--pend {
  background: var(--aviso-bg); color: var(--aviso); font-weight: 600;
}

.btn-vb {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--ok); color: var(--blanco);
  font-size: 13px; font-weight: 700; font-family: inherit;
  padding: 8px 16px; border-radius: 100px;
}
.btn-vb--mini { padding: 6px 14px; font-size: 12px; }
.vb-form { display: inline-block; margin: 8px 0 0; }

.sello-vb {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; font-weight: 700; color: var(--ok);
  background: var(--ok-bg); padding: 4px 12px; border-radius: 100px;
}

/* Aviso al editar el parte de otro companero */
.aviso-ajeno {
  margin-bottom: 16px; padding: 12px 16px; border-radius: var(--radio);
  background: var(--aviso-bg); color: var(--aviso); font-size: 13px;
}

/* Caja de la observacion interna en la pantalla de edicion */
.obs-int-caja {
  margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radio);
  background: var(--blanco); border: 1px solid var(--linea);
}
.obs-int-caja__lbl { font-size: 12px; font-weight: 700; color: var(--gris); margin-bottom: 4px; }
.obs-int-caja p { font-size: 14px; }

/* =====================================================================
   PROXIMOS VENCIMIENTOS · vista del tecnico  (sep. 2026)
   ===================================================================== */

.venc-intro { color: var(--gris); font-size: 13px; margin: -8px 0 16px; }

.venc-filtros { display: flex; gap: 8px; margin-bottom: 12px; }
.venc-chip {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--gris); background: var(--blanco);
  border: 1px solid var(--linea); padding: 6px 14px; border-radius: 100px;
}
.venc-chip--on { color: var(--blanco); background: var(--tinta); border-color: var(--tinta); }

.venc-cuenta { font-size: 13px; color: var(--gris); margin-bottom: 12px; }

.venc-fila {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 4px solid var(--linea);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 10px;
}
.venc-fila--alerta { border-left-color: var(--alerta); }
.venc-fila--aviso  { border-left-color: var(--aviso); }
.venc-fila--ok     { border-left-color: var(--ok); }

.venc-fila__cont { flex: 1; min-width: 0; }
.venc-fila__top {
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between; margin-bottom: 2px;
}
.venc-fila__fuente { font-weight: 700; font-size: 15px; }
.venc-fila__tarea  { font-size: 14px; }
.venc-fila__sub    { font-size: 12px; color: var(--gris); margin-top: 2px; }

.venc-fila__ir {
  flex-shrink: 0; text-decoration: none;
  font-size: 13px; font-weight: 700; color: var(--blanco);
  background: var(--agua); padding: 8px 16px; border-radius: 100px;
}

.pastilla {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px;
}
.pastilla--alerta { color: var(--alerta); background: var(--alerta-bg); }
.pastilla--aviso  { color: var(--aviso);  background: var(--aviso-bg); }
.pastilla--ok     { color: var(--ok);     background: var(--ok-bg); }
.pastilla--neutro { color: var(--neutro); background: var(--neutro-bg); }

.badge-analitica {
  display: inline-block; margin-left: 6px;
  font-size: 11px; font-weight: 700; color: var(--agua);
  background: var(--agua-cl); padding: 2px 9px; border-radius: 100px;
}
.venc-mas { font-size: 12px; color: var(--gris); text-align: center; padding: 12px 8px; }

/* Panel plegable de tareas en el movil */
.sel-tareas-mov {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 10px 14px; margin-bottom: 12px;
}
.sel-tareas-mov summary { font-size: 13px; font-weight: 700; cursor: pointer; }
.sel-tareas-mov__form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.sel-tareas__per { color: var(--gris); font-size: 11px; }

/* =====================================================================
   MAPA PUBLICO DE FUENTES  (sep. 2026)
   Lo que ve un trabajador cuando su vaquita no funciona: donde estan las
   demas y como llegar. Sin datos internos.
   ===================================================================== */

.mapa-pub__h1 { font-size: 22px; font-weight: 800; margin: 4px 0 4px; }
.mapa-pub__sub { color: var(--gris); font-size: 14px; margin: 0 0 14px; }

#mapa-pub {
  height: 55vh; min-height: 320px;
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea);
}

.mapa-pub__lista { margin-top: 14px; }
.mapa-pub__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 8px;
}
.mapa-pub__num { font-weight: 700; font-size: 15px; }
.mapa-pub__ubi { font-size: 13px; color: var(--gris); margin-top: 2px; }
.mapa-pub__ir {
  flex-shrink: 0; text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--blanco);
  background: var(--agua); padding: 9px 16px; border-radius: 100px;
}

/* Enlace al mapa desde la pagina de una fuente */
.otras-fuentes {
  display: block; text-align: center; text-decoration: none;
  margin: 18px 0 4px; padding: 13px 18px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta);
  font-size: 14px; font-weight: 700;
}

/* Globos del mapa (Leaflet inyecta este HTML desde JS) */
.pop-fuente { font-size: 14px; line-height: 1.5; }
.pop-fuente__num { font-weight: 800; color: var(--tinta); font-size: 15px; }
.pop-llegar {
  display: inline-block; margin-top: 8px; padding: 8px 14px;
  background: var(--tinta); color: #fff !important; text-decoration: none;
  border-radius: 8px; font-weight: 700; font-size: 13px;
}

/* Boton y aviso de "donde estoy" en el mapa publico */
.btn-ubicarme {
  display: block; width: 100%; margin: 0 0 10px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); color: var(--tinta);
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 12px 16px; cursor: pointer;
}
.btn-ubicarme:hover { background: var(--fondo); }
.aviso-ubi {
  font-size: 13px; color: var(--aviso); background: var(--aviso-bg);
  padding: 10px 14px; border-radius: var(--radio); margin-bottom: 10px;
}

/* Etiqueta "USTED ESTA AQUI" sobre el punto azul del mapa publico */
.tooltip-yo {
  background: #1F7AE0; color: #fff; border: 0; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.tooltip-yo::before { border-top-color: #1F7AE0; }
.btn-ubicarme[disabled] { opacity: .6; cursor: default; }

/* =====================================================================
   AÑADIDO sep. 2026 · clases que se usaban en las plantillas pero no
   estaban definidas en ninguna hoja. Sin esto, la pantalla de editar
   mantenimiento del tecnico salia completamente sin estilos.
   ===================================================================== */

/* ---- Contenedor del historial (columna de contenido de cada linea) ---- */
.hist-item__cont { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---- Desplegable "o elegir en un mapa" (ficha del tecnico) ---- */
.ubic-mapa-des { margin-top: 12px; }
.ubic-mapa-des > summary {
  font-size: 14px; font-weight: 600; color: var(--agua);
  cursor: pointer; padding: 6px 0; list-style: none;
}
.ubic-mapa-des > summary::-webkit-details-marker { display: none; }
.ubic-mapa-des[open] > summary { margin-bottom: 8px; }

/* ---- Checkbox en linea (filtros de "Proximos") ---- */
.check-inline {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--blanco);
  font-size: 15px; cursor: pointer;
}
.check-inline:hover { border-color: var(--agua); }
.check-inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--agua); flex-shrink: 0; }

/* ---- Editar un mantenimiento (tecnico) ----
   Reutiliza la tarjeta .registro y los campos .campo del resto de la app.
   Solo hace falta el estilo de las filas de tarea editables, que llevan
   un checkbox y, si la tarea lo pide, su casilla de valor.              */
.tareas-edit { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.tareas-edit__titulo {
  font-size: 13px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.tarea-edit {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--blanco);
  transition: border-color .12s, background .12s;
}
.tarea-edit--check { border-color: var(--ok); background: var(--ok-bg); }
.tarea-edit__check {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; cursor: pointer;
  font-size: 15px; font-weight: 600;
}
.tarea-edit__check input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--ok); flex-shrink: 0;
}
.tarea-edit__valor {
  width: 96px; flex-shrink: 0;
  padding: 9px 10px; font-size: 16px; text-align: right;
  border: 1.5px solid var(--linea); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
.tarea-edit__valor:focus { outline: none; border-color: var(--agua); background: var(--blanco); }
.tarea-edit__unidad { font-size: 12px; color: var(--gris); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Pantalla publica · las dos ultimas veces de cada tarea
   Sustituye a la lista .hechas, que solo ensenaba las tareas del ultimo
   parte. Aqui cada tarea lleva debajo sus dos ultimas fechas; la mas
   reciente destaca y la anterior queda en gris, para que se lea de un
   vistazo el ritmo con el que se atiende la fuente.
   --------------------------------------------------------------------- */
.tareas-hist { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.tareas-hist__titulo {
  font-size: 12px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .05em;
}
.tarea-hist { display: flex; flex-direction: column; gap: 4px; }
.tarea-hist__nombre {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--tinta);
}
.tarea-hist__veces {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 26px;                 /* alineado bajo el texto, no bajo el check */
  border-left: 2px solid var(--agua-cl);
  margin-left: 9px;
}
.tarea-hist__vez {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; color: var(--tinta-2);
}
/* La vez anterior, mas apagada: la reciente es la que importa */
.tarea-hist__vez--ant { font-size: 13px; color: var(--gris); }
.tarea-hist__fecha { font-weight: 600; }
.tarea-hist__vez--ant .tarea-hist__fecha { font-weight: 500; }
.tarea-hist__valor {
  font-weight: 700; color: var(--agua);
  background: var(--agua-cl);
  border-radius: 6px; padding: 1px 8px; font-size: 13px;
}
.tarea-hist__vez--ant .tarea-hist__valor {
  color: var(--gris); background: var(--neutro-bg); font-weight: 600;
}

/* ---------------------------------------------------------------------
   Barra de "ver como tecnico"
   Va fija abajo y en ambar: lo unico peligroso de una simulacion de rol
   es olvidarse de que la tienes puesta y creer que lo que ves es lo que
   ve un administrador. Por eso canta, y por eso el boton de volver esta
   siempre a la vista en todas las pantallas.
   --------------------------------------------------------------------- */
.ver-como {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px;
  padding: 11px 16px;
  background: var(--aviso); color: #fff;
  font-size: 14px;
  box-shadow: 0 -3px 14px rgba(11,44,74,.18);
}
.ver-como__txt { font-weight: 500; }
.ver-como__btn {
  background: #fff; color: var(--aviso);
  font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
}
.ver-como__btn:hover { background: var(--aviso-bg); }
/* Que la barra no tape el final de la pagina */
body:has(.ver-como) { padding-bottom: 62px; }

/* ---------------------------------------------------------------------
   Fotos al editar un parte (anadir y quitar)
   Sep. 2026. Antes las fotos solo se podian adjuntar al crear el parte.
   --------------------------------------------------------------------- */
.fotos-edit { margin: 20px 0 8px; }
.fotos-edit__titulo {
  font-size: 13px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.fotos-edit__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.fotos-edit__vacio { font-size: 14px; color: var(--gris); margin-bottom: 10px; }
.fotos-edit__nota { font-size: 12px; color: var(--gris); margin-top: 8px; }

.foto-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 116px;
}
.foto-card__link { display: block; }
.foto-card__img {
  width: 116px; height: 116px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--linea);
  display: block; background: var(--papel);
}
/* La casilla de quitar, discreta pero clara: borrar una foto de una
   incidencia no debe pasar por accidente, pero tampoco esconderse. */
.foto-card__quitar {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gris); cursor: pointer;
}
.foto-card__quitar input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--alerta); }
.foto-card:has(input[type="checkbox"]:checked) .foto-card__img {
  opacity: .35; border-color: var(--alerta); border-width: 2px;
}
.foto-card:has(input[type="checkbox"]:checked) .foto-card__quitar {
  color: var(--alerta); font-weight: 700;
}