/* =========================================================================
   MBC APP - hoja de estilos
   Misma identidad visual que el portal: azul acero #527898, tarjetas suaves,
   cuadricula de accesos. Pensada primero para telefono.
   ========================================================================= */

:root{
  --az:#527898;
  --az-osc:#3b5b76;
  --az-hond:#2c4459;
  --az-tenue:#eef3f7;
  --az-borde:#dbe6ee;

  --tinta:#2f3b45;
  --gris:#8a99a6;
  --linea:#eef2f5;
  --fondo:#f4f7f9;

  --ok:#2f7d5b;
  --rojo:#b3453f;
  --rojo-tenue:#f8ebea;
  --ambar:#b8801a;

  --r:16px;
  --sombra:0 4px 14px rgba(47,59,69,.06);
  --sombra-alta:0 10px 30px rgba(47,59,69,.10);
  --fuente:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--tinta);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* Respeta la zona segura de los telefonos con muesca */
  padding-bottom:env(safe-area-inset-bottom);
}
a{ color:var(--az-osc); }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }

/* ---------- Barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff;
  padding-top:env(safe-area-inset-top);
  box-shadow:0 2px 10px rgba(44,68,89,.18);
}
.barra-in{ display:flex; align-items:center; gap:10px; padding:10px 14px; }
.barra-tit{ min-width:0; }
.barra-tit strong{ display:block; font-size:15px; font-weight:650; line-height:1.2; }
.barra-tit span{
  display:block; font-size:11.5px; color:#c2d6e4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
}
.barra-sp{ flex:1 1 auto; }
.barra-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  text-decoration:none; padding:0;
}
.barra-btn:hover{ background:rgba(255,255,255,.24); }
.barra-btn svg{ width:17px; height:17px; }

/* ---------- Contenedor ---------- */
.cont{ max-width:760px; margin:0 auto; padding:16px 14px 32px; }

/* ---------- Saludo ---------- */
.saludo{ text-align:center; margin:6px 0 18px; }
.saludo-logo{ height:52px; width:auto; display:block; margin:0 auto 12px; }
.saludo-emp{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:4px;
}
.saludo h1{ margin:0; font-size:23px; font-weight:750; color:#2b3138; line-height:1.2; overflow-wrap:anywhere; }
.saludo-sub{ margin:5px 0 0; font-size:13px; color:var(--gris); }

/* ---------- Tarjeta de cartera ---------- */
.tarjeta-cartera{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 18px; margin-bottom:18px;
  transition:transform .15s, box-shadow .15s;
}
.tarjeta-cartera:active{ transform:scale(.99); }
.tc-fila{ display:flex; align-items:center; gap:14px; }
.tc-fila > div{ flex:1 1 auto; min-width:0; }
.tc-l{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px;
}
.tc-v{ font-size:27px; font-weight:750; color:var(--az-hond); line-height:1.05; letter-spacing:-.02em; }
.tc-v.al-dia{ color:var(--ok); font-size:21px; }
.tc-p{ font-size:12.5px; color:var(--gris); margin-top:4px; }
.tc-p b{ color:var(--rojo); font-weight:650; }
.tc-ir{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.tc-ir svg{ width:17px; height:17px; }

/* ---------- Cuadricula de modulos ---------- */
.rejilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  margin-bottom:22px;
}
@media (max-width:400px){ .rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:620px){ .rejilla{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Grupo plegable de modulos ---------- */
/* Misma tarjeta que la de cartera, pero es un <details>: al tocarla despliega
   los modulos que se consultan de vez en cuando en vez de navegar. */
.tarjeta-grupo{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin-bottom:22px; overflow:hidden;
}
.tarjeta-grupo > summary{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer; list-style:none;
  transition:background .15s;
}
/* El triangulo por omision se sustituye por el chevron de la derecha */
.tarjeta-grupo > summary::-webkit-details-marker{ display:none; }
.tarjeta-grupo > summary::marker{ content:''; }
.tarjeta-grupo > summary:hover{ background:#fbfdfe; }

.tg-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:13px;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.tg-ico svg{ width:21px; height:21px; }

.tg-txt{ flex:1 1 auto; min-width:0; }
.tg-t{ display:block; font-size:15px; font-weight:700; color:var(--az-hond); }
.tg-s{
  display:block; margin-top:2px; font-size:11.5px; color:var(--gris);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tg-v{
  flex:0 0 auto; width:17px; height:17px; color:var(--gris);
  transition:transform .18s ease;
  /* En SVG el origen del giro es la esquina del viewBox, no el centro */
  transform-box:fill-box; transform-origin:center;
}
.tarjeta-grupo[open] > summary{
  background:#fbfdfe; border-bottom:1px solid var(--linea);
}
.tarjeta-grupo[open] > summary .tg-v{ transform:rotate(180deg); }

/* Dentro de la tarjeta la cuadricula no lleva su margen inferior */
.tg-rejilla{ margin:0; padding:14px; background:#fbfdfe; }
.tg-rejilla .mod{ background:#fff; }

/* ---------- Enlace al resto de un bloque ---------- */
.bloque-mas{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; padding:10px; border-radius:11px;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:12.5px; font-weight:650; text-decoration:none;
}
.bloque-mas:hover{ background:var(--az-tenue); }
.bloque-mas svg{ width:14px; height:14px; }

.mod{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 8px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none; color:inherit; text-align:center;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.mod:active{ transform:scale(.97); }
.mod:hover{ box-shadow:var(--sombra-alta); border-color:var(--az-borde); }
.mod-ico{
  position:relative;                 /* ancla del globo de notificaciones */
  width:46px; height:46px; border-radius:14px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.mod-ico svg{ width:23px; height:23px; }

/* ---------- Globo de notificaciones sin leer ---------- */
/* Va pegado a la esquina del icono, como en cualquier app. El borde del color
   del fondo lo recorta del icono y hace que se lea a cualquier tamaño. */
.globo{
  position:absolute; top:-5px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:99px; border:2px solid var(--fondo);
  background:#e0352b; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:750; line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
/* Late una vez al aparecer, para que se note sin resultar molesto */
@keyframes globo-entra{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.globo:not(.oculto){ animation:globo-entra .32s ease-out; }
@media (prefers-reduced-motion:reduce){ .globo{ animation:none !important; } }

/* ---------- Notificaciones ---------- */
.notis{ display:flex; flex-direction:column; gap:9px; }
.noti{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  background:#fff; border:1px solid var(--linea); border-left:3px solid var(--az);
  border-radius:14px; box-shadow:var(--sombra); padding:13px 14px;
}
/* Las leidas se apagan pero siguen legibles */
.noti.leida{ background:#fbfcfd; border-left-color:var(--linea); box-shadow:none; }
.noti.t-aviso{ border-left-color:var(--ambar); }
.noti.t-urgente{ border-left-color:var(--rojo); }
.noti.leida.t-aviso, .noti.leida.t-urgente{ border-left-color:var(--linea); }

.noti-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.noti-ico svg{ width:19px; height:19px; }
.noti.t-aviso .noti-ico{ background:#fdf3e2; color:var(--ambar); }
.noti.t-urgente .noti-ico{ background:var(--rojo-tenue); color:var(--rojo); }
.noti.leida .noti-ico{ background:var(--linea); color:var(--gris); }

/* El cuerpo es el boton: toda la tarjeta se puede tocar */
.noti-cuerpo{
  flex:1 1 auto; min-width:0; text-align:left;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; color:inherit;
}
.noti-hd{ display:flex; align-items:baseline; gap:8px; }
.noti-tit{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:700;
  color:var(--az-hond); overflow-wrap:anywhere;
}
.noti.leida .noti-tit{ font-weight:650; color:var(--tinta); }
.noti-fecha{ flex:0 0 auto; font-size:11px; color:var(--gris); white-space:nowrap; }
.noti-msg{
  display:block; margin-top:4px; font-size:13px; color:var(--tinta);
  line-height:1.45; overflow-wrap:anywhere;
}
.noti.leida .noti-msg{ color:var(--gris); }
.noti-pie{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.noti-pie:empty{ display:none; }
.etq.tipo{ text-transform:uppercase; letter-spacing:.05em; font-size:9.5px; }
.noti.t-aviso .etq.tipo{ background:#fdf3e2; color:var(--ambar); }
.noti.t-urgente .etq.tipo{ background:var(--rojo-tenue); color:var(--rojo); }

.noti-punto{
  position:absolute; top:11px; right:11px;
  width:9px; height:9px; border-radius:50%; background:#e0352b;
}
.mod-tit{
  font-size:11.5px; font-weight:700; color:#5a6570;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.25;
}

/* ---------- Bloques y listas ---------- */
.bloque{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:14px 16px; margin-bottom:16px;
}
.bloque-tit{
  margin:0 0 10px; font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.09em; text-transform:uppercase;
}
.lista-emp{ margin:0; padding:0; list-style:none; }
.lista-emp li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:13.5px;
}
.lista-emp li:last-child{ border-bottom:none; }
.lista-emp span{ color:var(--gris); font-size:12px; white-space:nowrap; }

/* ---------- Documentos de cartera ---------- */
.docs{ display:flex; flex-direction:column; gap:10px; }
.doc{
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:13px 15px;
}
.doc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.doc-num{ font-size:13px; font-weight:700; color:var(--az-hond); }
.doc-saldo{ font-size:16px; font-weight:750; color:var(--az-hond); white-space:nowrap; }
.doc-con{ font-size:12.5px; color:var(--gris); margin-top:3px; }
.doc-pie{ display:flex; gap:8px; align-items:center; margin-top:9px; flex-wrap:wrap; font-size:11.5px; color:var(--gris); }
.pill{
  display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px;
  font-size:10.5px; font-weight:700; white-space:nowrap;
}
.pill.ok{ background:#e6f3ec; color:var(--ok); }
.pill.warn{ background:#fdf3e0; color:var(--ambar); }
.pill.mal{ background:var(--rojo-tenue); color:var(--rojo); }

/* Totales */
.totales{
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff; border-radius:var(--r); padding:18px; margin-bottom:16px;
  box-shadow:var(--sombra-alta);
}
.totales .l{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#c2d6e4; }
.totales .v{ font-size:30px; font-weight:750; letter-spacing:-.02em; margin-top:4px; }
.totales .p{ font-size:12.5px; color:#c9dae6; margin-top:6px; }

/* ---------- Formularios ---------- */
.campo{ display:block; margin-bottom:14px; }
.campo > span{
  display:block; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding:12px 13px;
  border:1px solid var(--az-borde); border-radius:11px;
  background:#fbfdfe; transition:border-color .15s, background .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--az); background:#fff;
  box-shadow:0 0 0 3px rgba(82,120,152,.14);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:14px; font-weight:650; text-decoration:none;
  transition:background .15s, transform .08s;
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn-pri{ background:var(--az); border-color:var(--az); color:#fff; }
.btn-pri:hover{ background:var(--az-osc); }
.btn-wa{ background:#25d366; border-color:#1fb955; color:#0a3d1c; }
.btn-wa:hover{ background:#34dd74; }
.btn-ancho{ width:100%; }

/* ---------- Avisos ---------- */
.aviso{
  padding:11px 14px; border-radius:11px; font-size:13px; margin-bottom:14px;
  border:1px solid #e3c893; background:#fdf6e7; color:#7d5b18;
}
.aviso.err{ border-color:#e8c4c1; background:var(--rojo-tenue); color:#8a2f2a; }
.aviso.ok{ border-color:#bfe0cf; background:#e6f3ec; color:#1f5f43; }

.vacio{ text-align:center; padding:40px 18px; color:var(--gris); }
.vacio svg{ width:40px; height:40px; opacity:.4; margin-bottom:12px; }
.vacio strong{ display:block; color:var(--tinta); font-size:15px; margin-bottom:5px; }

/* ---------- Placeholders de carga ---------- */
.esq{
  background:linear-gradient(90deg,#e8eef2 25%,#f4f8fa 50%,#e8eef2 75%);
  background-size:200% 100%; animation:brillo 1.3s ease-in-out infinite;
  border-radius:6px; color:transparent !important; display:inline-block;
  min-width:120px; min-height:1em;
}
@keyframes brillo{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){
  .esq{ animation:none; }
  .mod,.tarjeta-cartera,.btn{ transition:none; }
}

/* ---------- Login ---------- */
.entrar{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#eef3f7 0%, #f4f7f9 55%, #e8eff4 100%);
}
.entrar-caja{
  width:100%; max-width:390px;
  background:#fff; border:1px solid var(--linea); border-radius:22px;
  box-shadow:0 18px 50px rgba(47,59,69,.10);
  padding:30px 24px 26px; text-align:center;
}
.entrar-logo{ height:56px; width:auto; display:block; margin:0 auto 16px; }
.entrar-emp{
  font-size:11px; font-weight:600; color:var(--gris);
  letter-spacing:.16em; text-transform:uppercase;
}
.entrar-caja h1{ margin:6px 0 2px; font-size:24px; font-weight:750; color:#2b3138; }
.entrar-sub{ margin:0 0 20px; font-size:13px; color:var(--gris); }
.entrar-caja form{ text-align:left; }

/* ---------- Pase QR ---------- */
.pase{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:20px; text-align:center; margin-bottom:16px;
}
.pase-qr{
  width:210px; height:210px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--linea); border-radius:12px; padding:8px;
}
.pase-qr canvas, .pase-qr img{ width:100%; height:100%; display:block; }
.pase h2{ margin:0 0 3px; font-size:19px; font-weight:750; }
.pase .emp{ font-size:12.5px; color:var(--gris); }
.pase .vence{ font-size:12px; color:var(--ambar); margin-top:8px; font-weight:600; }
.pase-acc{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }

/* =========================================================================
   Tabla responsiva con filtros
   ========================================================================= */

.tabla-tools{ display:flex; gap:9px; margin-bottom:12px; }
.busca{ position:relative; flex:1 1 auto; min-width:0; }
.busca svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--gris); pointer-events:none;
}
.busca input{
  width:100%; padding:11px 13px 11px 36px;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
}
.busca input:focus{
  outline:none; border-color:var(--az);
  box-shadow:0 0 0 3px rgba(82,120,152,.14);
}
.tabla-tools .btn{ flex:0 0 auto; padding:11px 14px; }
.cont-n{
  background:var(--az); color:#fff; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:99px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
}

.tabla-info{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--gris); margin-bottom:10px;
}
.tabla-info strong{ color:var(--tinta); }
.tabla-info .limpiar{ margin-left:auto; font-weight:600; font-size:12.5px; }

.tabla-caja{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); overflow:hidden;
}
table.tabla{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.tabla thead th{
  background:#f7fafc; border-bottom:1px solid var(--linea);
  padding:11px 13px; text-align:left; white-space:nowrap;
  font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}
table.tabla tbody td{
  padding:12px 13px; border-bottom:1px solid var(--linea); vertical-align:middle;
}
table.tabla tbody tr:last-child td{ border-bottom:none; }
table.tabla .nom{ display:block; font-weight:650; color:var(--tinta); }
table.tabla .sub{ display:block; font-size:11.5px; color:var(--gris); margin-top:2px; }
table.tabla .mono{ font-variant-numeric:tabular-nums; }
table.tabla .num{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Por debajo de 760px cada fila se apila como tarjeta */
@media (max-width:760px){
  .tabla-caja{ background:none; border:none; box-shadow:none; overflow:visible; }
  table.tabla, table.tabla tbody, table.tabla tr, table.tabla td{ display:block; width:100%; }
  table.tabla thead{ display:none; }
  table.tabla tbody tr{
    background:#fff; border:1px solid var(--linea); border-radius:14px;
    box-shadow:var(--sombra); margin-bottom:10px; padding:4px 2px;
  }
  table.tabla tbody td{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:8px 13px; border-bottom:1px solid var(--linea); text-align:right;
  }
  table.tabla tbody td:last-child{ border-bottom:none; }
  table.tabla tbody td::before{
    content:attr(data-l); flex:0 0 auto; text-align:left;
    font-size:10.5px; font-weight:700; color:var(--gris);
    letter-spacing:.06em; text-transform:uppercase;
  }
  /* La celda del visitante hace de encabezado de la tarjeta */
  table.tabla tbody td.celda-tit{
    display:block; text-align:left; background:#f7fafc;
    margin:-4px -2px 4px; padding:11px 13px;
    border-radius:13px 13px 0 0; border-bottom:1px solid var(--linea);
  }
  table.tabla tbody td.celda-tit::before{ content:none; }
}

.pag{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; font-size:13px; color:var(--gris);
}
.pag-btn{
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:18px; font-weight:700;
}
.pag-btn.off{ opacity:.4; pointer-events:none; }

/* ---------- Modal ---------- */
.velo{
  position:fixed; inset:0; z-index:100;
  background:rgba(30,45,58,.5);
  display:none; align-items:flex-end; justify-content:center;
}
.velo.on{ display:flex; }
.modal{
  background:#fff; width:100%; max-width:460px;
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(20,32,42,.28);
  max-height:92vh; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:620px){
  .velo{ align-items:center; }
  .modal{ border-radius:20px; }
}
.modal-hd{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--linea);
}
.modal-hd strong{ font-size:16px; flex:1 1 auto; }
.modal-x{
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--gris);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.modal-x svg{ width:16px; height:16px; }
.modal-body{ padding:16px 18px 18px; overflow-y:auto; }
.campo-par{ display:flex; gap:10px; }
.campo-par .campo{ flex:1 1 0; min-width:0; }
.modal-acc{ display:flex; gap:9px; margin-top:6px; }
.modal-acc .btn{ flex:1 1 0; justify-content:center; }

/* ---------- Estado de cuenta: filtro y bloques ---------- */
.filtro-emp{ margin-bottom:14px; }
.filtro-emp .campo{ margin-bottom:0; }

.dosbloques{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.blq{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:15px 16px; position:relative; overflow:hidden;
}
.blq::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.blq-pendiente::before{ background:var(--rojo); }
.blq-pagado::before{ background:var(--ok); }
.blq .l{
  font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:5px;
}
.blq .v{
  font-size:21px; font-weight:750; line-height:1.05; letter-spacing:-.02em;
  color:var(--az-hond); word-break:break-word;
}
.blq-pagado .v{ color:var(--ok); }
.blq .p{ font-size:11px; color:var(--gris); margin-top:4px; }

.btn-pdf{ margin-bottom:16px; }

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

/* ---------- Modulos genericos ---------- */
.doc-fecha{ font-size:11.5px; color:var(--gris); white-space:nowrap; }
.doc-datos{ margin:9px 0 0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px; }
.doc-datos dt{
  color:var(--gris); font-weight:600; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; padding-top:2px;
}
.doc-datos dd{ margin:0; overflow-wrap:anywhere; }

.anexos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.anexo-img{
  width:64px; height:64px; border-radius:10px; overflow:hidden;
  border:1px solid var(--linea); display:block; flex:0 0 auto; background:#f7fafc;
}
.anexo-img img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ---------- Adjuntos que no son imagen ---------- */
/* Con el icono del tipo: de un vistazo se ve si es un PDF, un Excel o un
   Word, sin tener que leer la extension al final del nombre. */
.anexo-arch{
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  font-size:12px; color:var(--tinta); text-decoration:none;
  border:1px solid var(--linea); border-radius:11px; padding:7px 11px 7px 8px;
  background:#fff;
}
.anexo-arch:hover{ border-color:var(--az-borde); background:#fbfdfe; }

.anexo-ico{
  position:relative; flex:0 0 auto; width:26px; height:30px;
  display:flex; align-items:center; justify-content:center; color:var(--gris);
}
.anexo-ico svg{ width:26px; height:30px; }
/* La etiqueta del tipo va sobre la hoja, como en un gestor de archivos */
.anexo-ext{
  position:absolute; left:0; right:0; bottom:4px;
  font-size:6.5px; font-weight:800; letter-spacing:.02em;
  text-align:center; color:#fff;
}
.anexo-arch.t-pdf .anexo-ico{ color:#c4453f; }
.anexo-arch.t-doc .anexo-ico{ color:#2a5fb8; }
.anexo-arch.t-xls .anexo-ico{ color:#1f7a4d; }
.anexo-arch.t-ppt .anexo-ico{ color:#c2571f; }
.anexo-arch.t-zip .anexo-ico{ color:#8a6d1f; }
.anexo-arch.t-txt .anexo-ico, .anexo-arch.t-otro .anexo-ico{ color:var(--gris); }
/* El fondo de la etiqueta lo pone el propio trazo del icono */
.anexo-arch.t-pdf .anexo-ext{ background:#c4453f; }
.anexo-arch.t-doc .anexo-ext{ background:#2a5fb8; }
.anexo-arch.t-xls .anexo-ext{ background:#1f7a4d; }
.anexo-arch.t-ppt .anexo-ext{ background:#c2571f; }
.anexo-arch.t-zip .anexo-ext{ background:#8a6d1f; }
.anexo-arch.t-txt .anexo-ext{ background:var(--gris); }
.anexo-ext:empty{ display:none; }

.anexo-txt{ min-width:0; }
.anexo-txt .nom{
  display:block; font-weight:650; max-width:190px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.anexo-txt .sub{ display:block; font-size:10.5px; color:var(--gris); margin-top:1px; }

/* Hueco cuando el modulo no tiene buscador, para que el boton de filtros
   quede alineado igual que en los que si lo tienen */
.busca-hueco{ flex:1 1 auto; }
.celda-anexos .anexos{ margin-top:0; }
@media (max-width:760px){
  table.tabla tbody td.celda-anexos{ display:block; text-align:left; }
  table.tabla tbody td.celda-anexos::before{ display:block; margin-bottom:6px; }
}

/* ---------- Ficha de detalle ---------- */
.ficha{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); padding:16px 18px; margin-bottom:14px;
}
.ficha h1{ margin:0 0 12px; font-size:19px; font-weight:750; color:var(--az-hond); line-height:1.25; }
.ficha-datos{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.ficha-datos dt{
  color:var(--gris); font-weight:700; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding-top:2px;
}
.ficha-datos dd{ margin:0; overflow-wrap:anywhere; }

/* ---------- Pestañas ---------- */
.pest{
  display:flex; gap:6px; overflow-x:auto; margin-bottom:12px;
  padding-bottom:2px; -webkit-overflow-scrolling:touch;
}
.pest-b{
  flex:0 0 auto; cursor:pointer; white-space:nowrap;
  background:#fff; border:1px solid var(--linea); border-radius:99px;
  padding:8px 14px; font-size:12.5px; font-weight:650; color:#5a6570;
}
.pest-b.on{ background:var(--az); border-color:var(--az); color:#fff; }
.pest-n{
  display:inline-block; margin-left:5px; font-size:11px; opacity:.75;
}
/* Sin JS se ven todos los paneles seguidos, que es preferible a no ver nada */
.panel{ display:block; margin-bottom:14px; }
@media (min-width:1px){
  .pest ~ .panel{ display:none; }
  .pest ~ .panel.on{ display:block; }
}

.lista-num, .lista-pun{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin:0; padding:6px 16px 6px 34px;
}
.lista-num li, .lista-pun li{
  padding:9px 0; border-bottom:1px solid var(--linea); font-size:13.5px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.lista-num li:last-child, .lista-pun li:last-child{ border-bottom:none; }

.galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.galeria figure{ margin:0; }
.galeria a{ display:block; border:1px solid var(--linea); border-radius:12px; overflow:hidden; background:#fff; }
.galeria img{ width:100%; height:130px; object-fit:cover; display:block; }
.galeria-arch{ display:block; padding:26px 10px; text-align:center; font-size:12px; color:var(--az-osc); }
.galeria figcaption{ font-size:11.5px; color:var(--gris); text-align:center; margin-top:5px; }

/* ---------- Icono y boton Ver en las filas ---------- */
.celda-id{ display:flex; align-items:center; gap:11px; }
.celda-txt{ min-width:0; }
.fila-ico{
  width:36px; height:36px; border-radius:11px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.fila-ico svg{ width:19px; height:19px; }

.celda-ver{ width:1%; white-space:nowrap; }
.btn-ver{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:9px; text-decoration:none;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-size:12.5px; font-weight:650;
}
.btn-ver:hover{ background:var(--az-tenue); border-color:var(--az); }
.btn-ver svg{ width:15px; height:15px; }
@media (max-width:760px){
  /* En tarjeta el boton ocupa el ancho, para que sea comodo con el pulgar */
  table.tabla tbody td.celda-ver{ display:block; padding:10px 13px; }
  table.tabla tbody td.celda-ver::before{ content:none; }
  .btn-ver{ width:100%; justify-content:center; padding:10px; }
}

/* =========================================================================
   Detalle de mantenimiento
   ========================================================================= */
.ficha-top{ display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
.ficha-ico{
  width:46px; height:46px; border-radius:14px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.ficha-ico svg{ width:24px; height:24px; }
.ficha-tit{ min-width:0; }
.ficha-tit h1{ margin:0; font-size:19px; font-weight:750; color:var(--az-hond); line-height:1.25; }
.ficha-tipo{
  margin:3px 0 0; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}

.ficha-estado{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
  margin-bottom:14px;
}
.ficha-estado svg{ width:15px; height:15px; }
.ficha-estado.ok{ background:#e6f3ec; color:var(--ok); }
.ficha-estado.curso{ background:#fdf3e0; color:var(--ambar); }

.ficha-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1px;
  background:var(--linea); border-radius:12px; overflow:hidden;
}
.ficha-meta > div{ background:#fbfdfe; padding:10px 12px; }
.ficha-meta .l{
  display:block; font-size:10px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px;
}
.ficha-meta .v{ font-size:13px; font-weight:600; }

/* ---------- Secciones apiladas ---------- */
.sec{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--sombra); margin-bottom:14px; overflow:hidden;
}
.sec-hd{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:13px 16px; border-bottom:1px solid var(--linea); background:#fbfdfe;
  font-size:13.5px; font-weight:700; color:var(--az-hond);
}
.sec-ico{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.sec-ico svg{ width:16px; height:16px; }
.sec-n{
  margin-left:auto; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px;
}

.items{ margin:0; padding:0; list-style:none; }
.items li{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 16px; border-bottom:1px solid var(--linea); font-size:13.5px;
}
.items li:last-child{ border-bottom:none; }
.item-n{
  flex:0 0 auto; width:22px; height:22px; border-radius:7px;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.item-txt{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.45; }
.items.punto li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--az); margin-top:8px;
}

/* Tarjeta de tecnico */
.items.tec li{ flex-direction:column; gap:9px; }
.tec-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; width:100%; }
.tec-nom{ font-weight:650; color:var(--tinta); }
.tec-fecha{ font-size:12px; color:var(--gris); white-space:nowrap; }
.tec-horas{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:baseline; gap:6px;
  background:#f3f7fa; border-radius:8px; padding:5px 10px;
  font-size:12.5px; font-weight:650; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.chip .l{
  font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}
.tec-obs{ margin:0; font-size:12.5px; color:var(--gris); line-height:1.45; }

.galeria{ padding:14px 16px; }

/* Icono dentro de las pastillas de estado */
.pill-ico{ width:11px; height:11px; margin-right:4px; flex:0 0 auto; }
.pill{ gap:0; }

/* Los datos de la ficha se reparten sin dejar celdas vacias: con 3 campos y
   2 columnas, la rejilla dejaba un hueco gris. */
.ficha-meta{ display:flex; flex-wrap:wrap; gap:1px; }
.ficha-meta > div{ flex:1 1 130px; }

/* Imagen que no carga: se ve como un marco discreto en vez de un texto
   desbordado con el icono de rota */
.galeria a{
  display:flex; align-items:center; justify-content:center;
  min-height:130px; background:#f3f7fa;
}
.galeria img{
  font-size:11px; color:var(--gris); text-align:center;
  overflow:hidden; padding:4px;
}

/* ---------- Formularios en tarjeta ---------- */
.form-sec .form-cuerpo{ padding:16px; }
.form-sec textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.campo-nota{
  display:block; margin-top:6px; font-size:11.5px; color:var(--gris);
  font-weight:500; letter-spacing:0; text-transform:none;
}
fieldset.campo{ border:none; margin:0 0 14px; padding:0; }
fieldset.campo > span{
  display:block; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;
}
.opciones{ display:flex; flex-wrap:wrap; gap:8px; }
.opcion{ flex:1 1 auto; }
.opcion input{ position:absolute; opacity:0; pointer-events:none; }
.opcion span{
  display:block; text-align:center; cursor:pointer;
  border:1px solid var(--az-borde); border-radius:10px;
  padding:10px 12px; font-size:12.5px; font-weight:650; color:var(--az-osc);
  background:#fbfdfe; transition:background .15s, border-color .15s;
}
.opcion input:checked + span{ background:var(--az); border-color:var(--az); color:#fff; }
.opcion input:focus-visible + span{ outline:2px solid var(--az); outline-offset:2px; }

/* Boton de accion sobre el listado */
.tabla-acc{ margin-bottom:12px; }


/* =========================================================================
   Mi condominio
   ========================================================================= */
.emp-tipo{
  display:inline-block;
  padding:5px 12px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.emp-tipo.pro{ background:#d8f0e3; color:#1f5f43; }
.emp-tipo.arr{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.3); }

.emp-logo{
  width:50px; height:50px; border-radius:15px; flex:0 0 auto;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:750; letter-spacing:.02em;
}

/* ---------- Accesos de contacto ---------- */
.acc{
  display:flex; align-items:center; gap:10px;
  background:#fff; padding:13px 15px; text-decoration:none; color:inherit;
  min-width:0; transition:background .15s;
}
.acc:hover{ background:var(--az-tenue); }
.acc svg{ width:19px; height:19px; flex:0 0 auto; color:var(--az); }
/* El correo se recorta con puntos suspensivos en vez de partirse a mitad
   de palabra: el enlace sigue llevando la direccion completa. */
.acc > span{
  min-width:0; font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acc .l{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

/* ---------- Oficinas ---------- */
.ofis{ display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px; }
.ofi{
  flex:1 1 150px; background:#fbfdfe;
  border:1px solid var(--az-borde); border-radius:13px; padding:12px 14px;
}
.ofi-num{
  display:block; font-size:16px; font-weight:750; color:var(--az-hond);
  margin-bottom:7px;
}
.ofi-datos{ display:flex; flex-wrap:wrap; gap:5px; }
.etq{
  font-size:11px; font-weight:650; color:var(--az-osc);
  background:var(--az-tenue); border-radius:7px; padding:3px 8px;
}
.etq.area{ background:#e6f3ec; color:var(--ok); font-variant-numeric:tabular-nums; }

/* ---------- Planos ---------- */
.planos{ padding:10px 16px 14px; display:flex; flex-direction:column; gap:9px; }
.plano{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--linea); border-radius:13px; padding:11px 13px;
  text-decoration:none; color:inherit; background:#fbfdfe;
  transition:border-color .15s, background .15s;
}
.plano:hover{ border-color:var(--az-borde); background:var(--az-tenue); }
.plano-ico{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  background:#fdeceb; color:var(--rojo);
  display:flex; align-items:center; justify-content:center;
}
.plano-ico svg{ width:20px; height:20px; }
.plano-txt{ flex:1 1 auto; min-width:0; }
.plano-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.plano-txt .sub{ display:block; font-size:11.5px; color:var(--gris); margin-top:2px; }
.plano-baja{
  width:32px; height:32px; border-radius:9px; flex:0 0 auto;
  background:var(--az); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.plano-baja svg{ width:15px; height:15px; }

/* ---------- Personas ---------- */
.persona{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.persona:last-child{ border-bottom:none; }
.avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:750;
}
.avatar.pro{ background:#e6f3ec; color:var(--ok); }
.persona-txt{ flex:1 1 auto; min-width:0; }
.persona-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.persona-txt .sub{
  display:block; font-size:11.5px; color:var(--gris); margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.ico-btn{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.ico-btn:hover{ background:var(--az-tenue); }
.ico-btn svg{ width:16px; height:16px; }

/* ---------- Lista de empresas ---------- */
.oculto{ display:none !important; }

.emp-busca{ margin-bottom:12px; }

/* Un bloque por fila: el nombre completo cabe sin recortarse y el saldo
   queda alineado a la derecha, facil de comparar de arriba abajo. */
.emp-lista{
  display:flex; flex-direction:column; gap:9px; margin-bottom:18px;
}

.emp-fila{
  display:flex; align-items:center; gap:12px; min-width:0;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:12px 14px;
  text-decoration:none; color:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.emp-fila:active{ transform:scale(.99); }
.emp-fila:hover{ box-shadow:var(--sombra-alta); }

/* El avatar de la lista es mas chico que el de la ficha */
.emp-fila .emp-logo{
  width:42px; height:42px; border-radius:13px; font-size:14px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-osc);
}

.emp-fila-txt{ flex:1 1 auto; min-width:0; }
.emp-fila-txt .nom{
  display:block; font-size:14px; font-weight:700; line-height:1.3;
  overflow-wrap:anywhere;
}
.emp-fila-txt .ruc{
  display:block; margin-top:1px; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}

.emp-fila-pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:7px;
  font-size:11px; color:var(--gris); font-variant-numeric:tabular-nums;
}
.emp-fila-pie > span{ display:inline-flex; align-items:center; gap:4px; }
.emp-fila-pie svg{ width:13px; height:13px; opacity:.75; }
.emp-fila-pie .emp-tipo{
  padding:2px 8px; font-size:9.5px; letter-spacing:.04em; white-space:nowrap;
  background:var(--az-tenue); color:var(--az-osc); border:none;
}

.emp-fila-der{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; text-align:right;
}
.emp-fila-ir{ width:16px; height:16px; color:var(--az); flex:0 0 auto; }

.emp-tarj-saldo{
  font-size:15px; font-weight:750; color:var(--gris);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.emp-tarj-saldo.debe{ color:var(--rojo); }
/* "Al dia" es un estado, no una cifra: va discreto para que solo salten a la
   vista las empresas que si deben */
.emp-tarj-saldo.saldo-ok:not(.debe){ color:var(--ok); font-size:12.5px; font-weight:650; }

/* =========================================================================
   Ficha de empresa
   Una sola empresa por pantalla: hay sitio para una portada grande, una cinta
   de cifras y, en tableta o escritorio, dos columnas.
   ========================================================================= */

/* ---------- Portada ---------- */
.fi-hero{
  background:linear-gradient(115deg, var(--az-hond), var(--az));
  color:#fff; border-radius:18px; padding:20px 18px 0;
  box-shadow:var(--sombra); margin-bottom:14px; overflow:hidden;
}
.fi-hero-fila{ display:flex; align-items:flex-start; gap:14px; }
.fi-logo{
  width:56px; height:56px; border-radius:17px; flex:0 0 auto;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:750; letter-spacing:.02em;
}
.fi-id{ min-width:0; }
.fi-id h1{
  margin:0; font-size:20px; font-weight:750; color:#fff;
  line-height:1.25; overflow-wrap:anywhere;
}
.fi-ruc{
  margin:4px 0 10px; font-size:12.5px; color:#c2d6e4;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* Cinta de cifras: se reparten a partes iguales y se separan con una linea */
.fi-cifras{
  display:flex; margin-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
}
.fi-cifras > div{
  flex:1 1 0; min-width:0; padding:11px 6px 13px; text-align:center;
  border-left:1px solid rgba(255,255,255,.14);
}
.fi-cifras > div:first-child{ border-left:none; }
.fi-cifras strong{
  display:block; font-size:17px; font-weight:750; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.fi-cifras span{
  display:block; margin-top:2px; font-size:10px; color:#c2d6e4;
  letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Saldo y contacto ---------- */
/* En pantalla ancha van lado a lado; en telefono, uno debajo del otro */
.fi-cols{ display:grid; gap:12px; margin-bottom:12px; }
@media (min-width:720px){
  .fi-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:start; }
}

.fi-saldo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:15px 16px;
  text-decoration:none; color:inherit;
}
.fi-saldo:hover{ box-shadow:var(--sombra-alta); }
.fi-saldo-txt{ min-width:0; }
.fi-saldo .l{
  display:block; font-size:10.5px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.fi-saldo .v{
  display:block; font-size:26px; font-weight:750; color:var(--rojo);
  font-variant-numeric:tabular-nums; margin-top:3px; min-height:33px;
  line-height:1.2;
}
.fi-saldo .v.cero{ color:var(--ok); }
.fi-saldo .p{ display:block; font-size:11.5px; color:var(--gris); min-height:17px; }
.fi-saldo-ir{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.fi-saldo-ir svg{ width:15px; height:15px; }

.fi-acc{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:1px; background:var(--linea);
  border:1px solid var(--linea); border-radius:16px; overflow:hidden;
  box-shadow:var(--sombra);
}

/* ---------- Propietario ---------- */
.fi-prop{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:13px 16px; margin-bottom:12px;
}
.fi-prop .et{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

/* ---------- Acordeones ---------- */
/* <details> nativo: abre y cierra sin JS y el teclado ya lo maneja */
.acordeones{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); overflow:hidden;
}
.ac{ border-bottom:1px solid var(--linea); }
.ac:last-child{ border-bottom:none; }

.ac > summary{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; user-select:none;
}
/* El triangulo por omision se sustituye por el chevron de la derecha */
.ac > summary::-webkit-details-marker{ display:none; }
.ac > summary::marker{ content:''; }
.ac > summary:hover{ background:#fbfdfe; }
.ac > summary > svg:first-of-type{ width:18px; height:18px; color:var(--az); flex:0 0 auto; }
.ac-t{ flex:1 1 auto; min-width:0; }
.ac-n{
  flex:0 0 auto; background:var(--az-tenue); color:var(--az-osc);
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.ac-v{
  width:17px; height:17px; flex:0 0 auto; color:var(--gris);
  transition:transform .18s ease;
  /* En SVG el origen del giro es la esquina del viewBox, no el centro: sin
     esto el chevron se desplaza al rotar en algunos navegadores. */
  transform-box:fill-box; transform-origin:center;
}
.ac[open] > summary{ background:#fbfdfe; border-bottom:1px solid var(--linea); }
.ac[open] > summary .ac-v{ transform:rotate(180deg); }
.ac[open] > summary > svg:first-of-type{ color:var(--az-osc); }

.ac-nota{
  margin:0; padding:10px 16px; background:#fbfdfe;
  border-top:1px solid var(--linea);
  font-size:11.5px; color:var(--gris);
}

/* ---------- Bodegas y parqueos ---------- */
.espacios{ display:flex; flex-direction:column; }
.espacio{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.espacio:last-child{ border-bottom:none; }
.espacio-cod{
  flex:0 0 auto; min-width:52px; text-align:center;
  padding:7px 10px; border-radius:10px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-hond);
  font-size:13px; font-weight:750; font-variant-numeric:tabular-nums;
}
.espacio-txt{ flex:1 1 auto; min-width:0; }
.espacio-txt .nom{ display:block; font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.espacio-txt .sub{ display:block; font-size:11.5px; color:var(--gris); }

/* ---------- Clave catastral ---------- */
/* Es un dato de registro, no de uso diario: se etiqueta para que se entienda
   que ese numero largo no es el codigo del espacio. */
.catastro{
  display:block; margin-top:5px;
  font-size:12px; font-weight:650; color:var(--az-hond);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.catastro .l{
  display:block; font-size:9px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:1px;
}

.fi-pie{
  margin:14px 0 0; text-align:center;
  font-size:11.5px; color:var(--gris);
}

/* ---------- Tags de acceso ---------- */
.tags{ display:flex; flex-direction:column; }
.tag{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; border-bottom:1px solid var(--linea);
}
.tag:last-child{ border-bottom:none; }
/* Los dados de baja quedan atenuados pero legibles, no ocultos */
.tag.baja{ background:#fbfcfd; }
.tag.baja .tag-cod{ background:var(--linea); color:var(--gris); border-color:var(--linea); }
.tag.baja .tag-txt .nom{ color:var(--gris); }

.tag-cod{
  flex:0 0 auto; padding:6px 9px; border-radius:9px;
  background:var(--az-tenue); border:1px solid var(--az-borde); color:var(--az-hond);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; white-space:nowrap;
}
.tag-txt{ flex:1 1 auto; min-width:0; }
.tag-txt .nom{ display:block; font-size:13.5px; font-weight:650; overflow-wrap:anywhere; }
.tag-txt .sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px;
}
.tag-txt .doc{ font-size:11px; color:var(--gris); font-variant-numeric:tabular-nums; }

.tag-baja-form{ flex:0 0 auto; }
.tag-baja, .btn-baja{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 11px; border-radius:10px; cursor:pointer;
  border:1px solid #e8cfcd; background:var(--rojo-tenue); color:var(--rojo);
  font-family:inherit; font-size:11.5px; font-weight:650; white-space:nowrap;
}
.tag-baja:hover, .btn-baja:hover{ background:#f2dcda; }
.tag-baja:disabled, .btn-baja:disabled{ opacity:.55; cursor:default; }
.tag-baja svg, .btn-baja svg{ width:14px; height:14px; }

/* ---------- Archivos elegidos antes de enviar ---------- */
.lista-arch{ display:flex; flex-direction:column; gap:6px; }
.lista-arch:empty{ display:none; }
.arch-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  background:var(--az-tenue); border:1px solid var(--az-borde);
  font-size:12.5px;
}
.arch-item .nom{
  flex:1 1 auto; min-width:0; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.arch-item .tam{
  flex:0 0 auto; color:var(--gris); font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.arch-quitar{
  flex:0 0 auto; width:26px; height:26px; padding:0;
  border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--gris);
  font-size:19px; line-height:1; font-family:inherit;
}
.arch-quitar:hover{ background:var(--rojo-tenue); color:var(--rojo); }
.campo-nota.mal{ color:var(--rojo); font-weight:650; }
/* Vacia no deja hueco: hay campos que solo la usan cuando hay algo que decir */
.campo-nota:empty{ display:none; }

/* ---------- Las dos vias para adjuntar: camara y fichero ----------
   Los inputs se esconden asi y no con [hidden] ni display:none: Safari en iOS
   ignora el .click() sobre un input que no esta en el flujo, y el boton de la
   camara se quedaba muerto. */
.entrada-oculta{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.subir-vias{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px; }
@media (max-width:380px){ .subir-vias{ grid-template-columns:1fr; } }
.subir-via{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:16px 12px; cursor:pointer;
  border:1px dashed var(--az-borde); border-radius:14px; background:#fff;
  font-family:inherit; color:inherit; text-align:center;
  transition:border-color .15s, background .15s;
}
.subir-via:hover, .subir-via:focus-visible{
  border-style:solid; border-color:var(--az); background:var(--az-tenue); outline:none;
}
.subir-via:active{ transform:scale(.985); }
.subir-via-ico{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:3px;
  border-radius:12px; background:var(--az-tenue); color:var(--az-osc);
}
.subir-via:hover .subir-via-ico{ background:#fff; }
.subir-via-ico svg{ width:20px; height:20px; }
.subir-via b{ font-size:13.5px; font-weight:650; color:var(--tinta); }
.subir-via i{ font-style:normal; font-size:11.5px; color:var(--gris); }

/* Columna de accion de la tabla (la baja de tags) */
.celda-acc{ width:1%; white-space:nowrap; text-align:right; }
@media (max-width:760px){
  /* En tarjeta ocupa el ancho, igual que el boton Ver */
  table.tabla tbody td.celda-acc{ display:block; padding:0 13px 12px; text-align:left; }
  table.tabla tbody td.celda-acc::before{ content:none; }
  .celda-acc .btn-baja{ width:100%; justify-content:center; padding:10px; }
}

/* =========================================================================
   Reservas de salones
   ========================================================================= */

/* Hueco al final para que la barra fija no tape el ultimo campo */
.res-cont{ padding-bottom:96px; }

.res-salon{ padding:0 16px 4px; }

/* ---------- Navegacion de semana ---------- */
.res-sem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--linea);
}
.res-sem-txt{ font-size:13px; font-weight:700; color:var(--az-hond); }
.res-nav{
  width:36px; height:36px; flex:0 0 auto; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.res-nav:hover:not(:disabled){ background:var(--az-tenue); }
.res-nav:disabled{ opacity:.35; cursor:default; }
.res-nav svg{ width:17px; height:17px; }

/* ---------- Tira de dias (movil) ---------- */
/* Se desplaza en horizontal en vez de encogerse: con 7 dias en 360px las
   columnas quedarian de 45px y no se podria tocar bien. */
.res-dias{
  display:flex; gap:7px; padding:12px 16px; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.res-dias::-webkit-scrollbar{ height:0; }
.res-dia{
  position:relative; flex:0 0 auto; scroll-snap-align:center;
  min-width:58px; padding:8px 6px; cursor:pointer;
  border:1px solid var(--linea); border-radius:13px; background:#fff;
  font-family:inherit; color:var(--tinta); text-align:center; line-height:1.15;
}
.res-dia .d{
  display:block; font-size:9.5px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.res-dia .n{ display:block; font-size:18px; font-weight:750; margin-top:2px; }
.res-dia .m{ display:block; font-size:9.5px; color:var(--gris); text-transform:uppercase; }
.res-dia.hoy{ border-color:var(--az); }
.res-dia.activo{
  background:var(--az-hond); border-color:var(--az-hond); color:#fff;
  box-shadow:var(--sombra);
}
.res-dia.activo .d, .res-dia.activo .m{ color:#c2d6e4; }
/* Sin turnos libres: se ve, pero apagado */
.res-dia.sin:not(.activo){ opacity:.5; }
/* Cuantos turnos llevas elegidos ese dia */
.res-dia .pin{
  position:absolute; top:-6px; right:-5px;
  min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  border:2px solid var(--fondo); background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:750;
}

/* ---------- Turnos del dia (movil) ---------- */
.res-dia-tit{
  padding:4px 16px 10px; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.06em; text-transform:uppercase;
}
.res-turnos{ display:flex; flex-direction:column; gap:8px; padding:0 16px 14px; }

.res-turno{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 14px; border-radius:13px; text-align:left;
  border:1px solid var(--linea); background:#fff;
  font-family:inherit; color:inherit;
}
button.res-turno{ cursor:pointer; }
.res-turno .h{
  flex:0 0 auto; font-size:14px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.res-turno .s{
  flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--gris);
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.res-turno .v{ flex:0 0 auto; width:20px; height:20px; display:flex; }
.res-turno .v svg{ width:20px; height:20px; }

.res-turno.e-libre{ border-color:var(--az-borde); }
.res-turno.e-libre:hover{ background:var(--az-tenue); }
.res-turno.e-elegido{
  background:#e6f5ee; border-color:var(--ok); color:var(--ok);
  box-shadow:inset 0 0 0 1px var(--ok);
}
.res-turno.e-elegido .h{ color:var(--ok); }
.res-turno.e-elegido .s{ color:#2f7d5b; }
/* Ocupado y bloqueado se distinguen: uno lo tomo alguien, el otro lo cerro
   administracion. Fuera de plazo es solo por la antelacion minima. */
.res-turno.e-ocupado{ background:#fbfcfd; border-color:var(--linea); }
.res-turno.e-ocupado .h{ color:var(--gris); }
.res-turno.e-bloqueado{ background:var(--rojo-tenue); border-color:#e8cfcd; }
.res-turno.e-bloqueado .h, .res-turno.e-bloqueado .s{ color:var(--rojo); }
.res-turno.e-tarde{ background:#fbfcfd; border-style:dashed; }
.res-turno.e-tarde .h{ color:#b9c3cc; }

.res-nota{ margin:0; padding:0 16px 14px; font-size:11.5px; color:var(--gris); }
.res-nota.mal{ color:var(--rojo); font-weight:650; }

/* ---------- Semana completa (pantalla ancha) ---------- */
.res-tabla{ padding:0 16px 14px; overflow-x:auto; }
.res-t{ width:100%; border-collapse:separate; border-spacing:0; }
.res-t th, .res-t td{
  border-bottom:1px solid var(--linea); border-right:1px solid var(--linea);
  padding:9px 6px; text-align:center; font-size:12px;
}
.res-t thead th{
  background:#fbfdfe; font-size:11px; font-weight:700; color:var(--az-hond);
  text-transform:capitalize; white-space:nowrap;
}
.res-t thead th.hoy{ color:var(--az); }
.res-t thead th small{
  display:block; margin-top:2px; font-size:10px; font-weight:500; color:var(--gris);
}
.res-t tbody th{
  background:#fbfdfe; font-size:11px; font-weight:650; color:var(--gris);
  white-space:nowrap; font-variant-numeric:tabular-nums; text-align:left;
}
.res-t td.e-libre{ cursor:pointer; color:var(--az-borde); font-weight:700; }
.res-t td.e-libre:hover{ background:var(--az-tenue); color:var(--ok); }
.res-t td.e-elegido{
  background:var(--ok); color:#fff; font-weight:750; cursor:pointer;
  box-shadow:inset 0 0 0 2px #26694c;
}
.res-t td.e-ocupado, .res-t td.e-bloqueado{
  background:#f2f5f8; color:var(--gris); font-size:10px; line-height:1.2;
  max-width:110px; overflow:hidden; text-overflow:ellipsis;
}
.res-t td.e-bloqueado{ background:var(--rojo-tenue); color:var(--rojo); }
.res-t td.e-tarde{
  color:#cfd8df;
  background:repeating-linear-gradient(45deg,#fbfcfd,#fbfcfd 4px,#fff 4px,#fff 8px);
}

/* ---------- Barra de resumen ---------- */
/* Fija abajo: mientras se eligen turnos siempre se ve cuantos van y cuanto
   cuesta, sin tener que subir. */
.res-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--linea);
  box-shadow:0 -4px 14px rgba(47,59,69,.08);
}
.res-barra-txt{ flex:1 1 auto; min-width:0; }
.res-barra-txt strong{ display:block; font-size:13.5px; color:var(--az-hond); }
.res-barra-txt span{
  display:block; font-size:17px; font-weight:750; color:var(--gris);
  font-variant-numeric:tabular-nums;
}
.res-barra.activa .res-barra-txt span{ color:var(--ok); }
.res-barra .btn{ flex:0 0 auto; }

/* ---------- Mis reservas ---------- */
.res-lista{ display:flex; flex-direction:column; gap:10px; }
.res-item{
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:13px 14px;
}
.res-item-hd{ display:flex; align-items:flex-start; gap:10px; }
.res-item-tit{
  flex:1 1 auto; min-width:0; font-size:14px; font-weight:700;
  color:var(--az-hond); overflow-wrap:anywhere;
}
.res-item-datos{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.res-item-pie{
  display:flex; align-items:center; gap:10px; margin-top:9px;
  padding-top:9px; border-top:1px solid var(--linea);
  font-size:11.5px; color:var(--gris);
}
.res-item-pie span:first-child{ flex:1 1 auto; min-width:0; }
.res-item-total{
  flex:0 0 auto; font-size:14px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.anexo-arch.t-otro .anexo-ext{ background:var(--gris); }

/* =========================================================================
   Visor de imágenes
   ========================================================================= */
/* Fondo oscuro y a pantalla completa: en una foto de obra lo que importa es
   el detalle, y cualquier marco alrededor resta sitio. */
.visor{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(10,16,22,.94);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.visor.abierto{ display:grid; grid-template-rows:1fr auto auto; }
/* Con el visor abierto el fondo no se desplaza */
body.sin-scroll{ overflow:hidden; }

.visor-lienzo{
  display:flex; align-items:center; justify-content:center;
  min-height:0; padding:16px;
}
.visor-lienzo img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.visor-x, .visor-nav{
  position:absolute; z-index:2; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.visor-x:hover, .visor-nav:hover{ background:rgba(255,255,255,.22); }
.visor-x{
  top:calc(12px + env(safe-area-inset-top)); right:12px;
  width:42px; height:42px;
}
.visor-x svg{ width:20px; height:20px; }
/* Las flechas van a media altura de la foto, no del visor entero */
.visor-nav{ top:38%; width:44px; height:44px; }
.visor-nav.ant{ left:10px; }
.visor-nav.sig{ right:10px; }
.visor-nav svg{ width:22px; height:22px; }
.visor-nav[hidden]{ display:none; }

.visor-pie{
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; color:#e6edf3;
}
.visor-txt{
  flex:1 1 auto; min-width:0; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visor-n{
  flex:0 0 auto; font-size:12px; font-weight:700; color:#9fb2c2;
  font-variant-numeric:tabular-nums;
}

/* Tira de miniaturas: se ve de un vistazo cuántas hay y dónde estás */
.visor-tiras{
  display:flex; gap:7px; overflow-x:auto;
  padding:0 14px calc(14px + env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.visor-tiras::-webkit-scrollbar{ height:0; }
.visor-tiras[hidden]{ display:none; }
.visor-tira{
  flex:0 0 auto; width:52px; height:52px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:9px; overflow:hidden;
  background:none; opacity:.5; transition:opacity .15s, border-color .15s;
}
.visor-tira img{ width:100%; height:100%; object-fit:cover; display:block; }
.visor-tira.activa{ opacity:1; border-color:#fff; }
.visor-tira:hover{ opacity:.85; }

@media (min-width:720px){
  .visor-nav{ width:52px; height:52px; }
  .visor-nav.ant{ left:20px; }
  .visor-nav.sig{ right:20px; }
  .visor-tira{ width:62px; height:62px; }
}
@media (prefers-reduced-motion:reduce){
  .visor-tira{ transition:none; }
}

/* =========================================================================
   Contactos del edificio
   ========================================================================= */

/* Enlace suelto del inicio: se necesita de vez en cuando, así que no ocupa un
   hueco de la cuadrícula, pero queda a la vista sin buscarlo. */
.enlace-suelto{
  display:flex; align-items:center; gap:9px;
  padding:12px 14px; margin-bottom:22px;
  border:1px solid var(--linea); border-radius:13px; background:#fff;
  color:var(--az-osc); text-decoration:none;
  font-size:13px; font-weight:650;
}
.enlace-suelto:hover{ background:var(--az-tenue); border-color:var(--az-borde); }
.enlace-suelto svg{ width:17px; height:17px; flex:0 0 auto; color:var(--az); }
.enlace-suelto .fl{ margin-left:auto; width:15px; height:15px; color:var(--gris); }

/* ---------- Dónde estamos ---------- */
.ct-lugar{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:20px 18px; margin-bottom:20px;
  text-align:center;
}
.ct-lugar-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px; margin-bottom:12px;
  background:var(--az-tenue); color:var(--az);
}
.ct-lugar-ico svg{ width:26px; height:26px; }
.ct-lugar h2{ margin:0; font-size:16px; font-weight:750; color:var(--az-hond); }
.ct-lugar p{ margin:6px 0 14px; font-size:13px; color:var(--gris); line-height:1.5; }
.ct-mapa{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:99px;
  background:var(--az-tenue); color:var(--az-osc);
  font-size:12.5px; font-weight:650; text-decoration:none;
}
.ct-mapa:hover{ background:var(--az-borde); }
.ct-mapa svg{ width:15px; height:15px; }

.ct-tit{ margin-left:2px; }

/* ---------- Tarjeta de cada contacto ---------- */
.ct-lista{ display:flex; flex-direction:column; gap:12px; }
.ct-item{
  background:#fff; border:1px solid var(--linea); border-radius:16px;
  box-shadow:var(--sombra); padding:15px 16px;
}
/* La garita atiende a cualquier hora: se distingue del resto */
.ct-item.urgente{ border-left:3px solid var(--rojo); }

.ct-hd{ display:flex; align-items:center; gap:9px; }
.ct-rol{
  flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:700;
  color:var(--az-hond);
}
.ct-horario{
  display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:11.5px; color:var(--gris);
}
.ct-horario svg{ width:13px; height:13px; flex:0 0 auto; }

/* El número, grande y tocable: en el móvil es lo primero que se busca */
.ct-num{
  display:block; margin:10px 0 12px;
  font-size:21px; font-weight:700; letter-spacing:.02em;
  color:var(--az-hond); text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.ct-num:hover{ color:var(--az); }

/* Los botones NO van rellenos de color ni a todo lo ancho.
   Dos bloques saturados por tarjeta, cinco tarjetas, era una pared de verde
   y azul que tapaba lo que importa: el número. Van teñidos y del tamaño de
   su texto, que se reconocen igual y dejan respirar la tarjeta. */
.ct-acc{ display:flex; flex-wrap:wrap; gap:8px; }
.ct-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:10px;
  border:1px solid transparent; text-decoration:none;
  font-size:13px; font-weight:650;
  transition:background .15s, border-color .15s;
}
.ct-btn:active{ transform:translateY(1px); }
.ct-btn svg{ width:16px; height:16px; flex:0 0 auto; }
/* Se conserva el verde de WhatsApp porque es lo que lo hace reconocible
   de un vistazo, pero como tinte y no como fondo macizo. */
.ct-btn.wa{ background:#e7f8ee; border-color:#c3ecd4; color:#127a44; }
.ct-btn.wa:hover{ background:#d6f2e3; border-color:#9fdfbc; }
.ct-btn.tel{ background:var(--az-tenue); border-color:var(--az-borde); color:var(--az-osc); }
.ct-btn.tel:hover{ background:#e2ecf4; border-color:var(--az); }

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

/* =========================================================================
   Avisos push
   ========================================================================= */
.push-caja{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:13px 14px; margin-bottom:14px;
}
.push-caja.no-va{ opacity:.75; }
.push-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.push-ico svg{ width:19px; height:19px; }
.push-txt{ flex:1 1 auto; min-width:0; }
.push-txt strong{ display:block; font-size:13.5px; color:var(--az-hond); }
.push-estado{ display:block; font-size:11.5px; color:var(--gris); margin-top:2px; }
.push-estado.ok{ color:var(--ok); }
.push-estado.mal{ color:var(--rojo); }

/* Interruptor: el checkbox real queda oculto pero sigue siendo el que manda,
   así el teclado y los lectores de pantalla lo manejan sin nada añadido. */
.interruptor{ flex:0 0 auto; position:relative; display:inline-block; }
.interruptor input{
  position:absolute; opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.interruptor .pista{
  display:block; width:46px; height:27px; border-radius:99px;
  background:var(--linea); transition:background .18s;
}
.interruptor .pista::after{
  content:''; position:absolute; top:3px; left:3px;
  width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s;
}
.interruptor input:checked + .pista{ background:var(--ok); }
.interruptor input:checked + .pista::after{ transform:translateX(19px); }
.interruptor input:disabled + .pista{ opacity:.45; }
.interruptor input:focus-visible + .pista{ outline:2px solid var(--az); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .interruptor .pista, .interruptor .pista::after{ transition:none; }
}

/* Acción secundaria de la barra de información: "Quitar filtros", "Marcar
   todas como leídas". No existía, así que el <button> salía con el aspecto
   por omisión del navegador (gris, con relieve) y el <a> como enlace suelto.
   Los dos se igualan aquí. */
.limpiar{
  flex:0 0 auto; padding:0; cursor:pointer;
  border:none; background:none; font-family:inherit;
  font-size:12px; font-weight:650; color:var(--az);
  text-decoration:none; border-bottom:1px solid transparent;
}
.limpiar:hover{ color:var(--az-osc); border-bottom-color:currentColor; }
.limpiar:focus-visible{ outline:2px solid var(--az); outline-offset:3px; border-radius:3px; }
/* Cuando la acción va dentro de un formulario (marcar como leídas), es el
   formulario el que tiene que empujarse a la derecha, no el botón. */
.tabla-info form{ margin-left:auto; }
.tabla-info form .limpiar{ margin-left:0; }

/* Aviso flotante: aparece cuando entra una notificación y no se está en la
   pantalla de notificaciones. Arriba y no abajo, para no chocar con la barra
   de resumen de las reservas. */
.flotante{
  position:fixed; z-index:90;
  top:calc(8px + env(safe-area-inset-top)); left:12px; right:12px;
  max-width:420px; margin:0 auto;
  display:block; padding:12px 14px; border-radius:14px;
  background:var(--az-hond); color:#fff; text-decoration:none;
  box-shadow:0 8px 28px rgba(10,16,22,.32);
  transform:translateY(-130%); opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s;
}
.flotante.visible{ transform:translateY(0); opacity:1; }
.flotante strong{ display:block; font-size:13.5px; font-weight:700; }
.flotante span{
  display:block; margin-top:2px; font-size:12px; color:#c8d8e4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.flotante.t-aviso{ background:#8a5f12; }
.flotante.t-urgente{ background:#8f2f2a; }
@media (prefers-reduced-motion:reduce){
  .flotante{ transition:opacity .2s; transform:none; }
}

/* =========================================================================
   Aviso urgente a pantalla completa
   ========================================================================= */
/* No se cierra tocando fuera ni con Escape: administración lo marcó urgente
   porque no puede pasar desapercibido. Solo el botón lo cierra, y ese botón
   es el que además lo marca como leído. */
.urg-velo{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));
  background:rgba(20,10,10,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .26s;
}
.urg-velo.visible{ opacity:1; }

.urg-caja{
  width:100%; max-width:400px; text-align:center;
  background:#fff; border-radius:20px; padding:26px 22px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transform:scale(.94); transition:transform .26s cubic-bezier(.2,.9,.3,1);
}
.urg-velo.visible .urg-caja{ transform:scale(1); }

.urg-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%; margin-bottom:14px;
  background:var(--rojo-tenue); color:var(--rojo);
}
.urg-ico svg{ width:28px; height:28px; }

.urg-etq{
  display:block; font-size:10.5px; font-weight:800; color:var(--rojo);
  letter-spacing:.12em; text-transform:uppercase;
}
.urg-caja h2{
  margin:8px 0 0; font-size:19px; font-weight:750; color:var(--az-hond);
  line-height:1.3; overflow-wrap:anywhere;
}
.urg-caja p{
  margin:10px 0 0; font-size:14px; color:var(--tinta); line-height:1.55;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.urg-mas{
  display:block; margin-top:12px; font-size:11.5px; color:var(--gris);
}
.urg-acc{ display:flex; gap:10px; margin-top:20px; }
.urg-acc .btn{ flex:1 1 0; justify-content:center; }

@media (prefers-reduced-motion:reduce){
  .urg-velo, .urg-caja{ transition:none; }
  .urg-caja{ transform:none; }
}

/* En el móvil, la pulsación larga sobre una foto o un botón saca el menú del
   navegador ("guardar imagen", "abrir en pestaña"), que se cruza con el gesto
   de deslizar del visor. Se quita SOLO en imágenes y controles: el texto sigue
   siendo seleccionable, que hace falta para copiar un número o un saldo. */
img, button, .btn, .mod, .visor, .visor *, .anexo-img, .galeria a{
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
/* Los campos de formulario mantienen todo: seleccionar, copiar y pegar */
input, textarea, select, [contenteditable="true"]{
  -webkit-touch-callout:default;
  -webkit-user-select:text; user-select:text;
}

/* La franja de validez del pase: el día en grande y las horas debajo. Es lo
   que mira el guardia, así que conviene leerlo de un vistazo. */
.pase .vence strong{
  display:block; font-size:14px; font-weight:700; color:var(--az-hond);
  text-transform:capitalize;
}
.pase .vence span{
  display:block; margin-top:2px; font-size:13px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}

/* =========================================================================
   Menú de la cuenta
   ========================================================================= */
/* Hoja que sube desde abajo en el móvil y caja centrada en escritorio: el
   gesto de "menú del perfil" es distinto en cada sitio y conviene respetarlo. */
.cuenta-velo{
  position:fixed; inset:0; z-index:110; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(20,28,36,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.cuenta-velo.abierto{ display:flex; }
@media (min-width:640px){ .cuenta-velo{ align-items:center; } }

.cuenta-hoja{
  width:100%; max-width:420px;
  background:#fff; border-radius:20px 20px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.28);
}
@media (min-width:640px){
  .cuenta-hoja{ border-radius:18px; padding-bottom:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
}

.cuenta-hd{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cuenta-avatar{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--az-hond); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:750;
}
.cuenta-id{ flex:1 1 auto; min-width:0; }
.cuenta-id strong{
  display:block; font-size:15px; color:var(--az-hond);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cuenta-id span{
  display:block; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}
.cuenta-x{
  flex:0 0 auto; width:32px; height:32px; border:none; border-radius:9px;
  cursor:pointer; background:var(--linea); color:var(--gris);
  display:flex; align-items:center; justify-content:center;
}
.cuenta-x:hover{ background:var(--az-tenue); color:var(--az-osc); }
.cuenta-x svg{ width:16px; height:16px; }

.cuenta-opts{ display:flex; flex-direction:column; gap:9px; }
.cuenta-op{
  display:flex; align-items:center; gap:12px; width:100%; cursor:pointer;
  padding:13px 14px; border:1px solid var(--linea); border-radius:13px;
  background:#fff; font-family:inherit; text-align:left; color:inherit;
}
.cuenta-op:hover{ background:var(--az-tenue); border-color:var(--az-borde); }
.cuenta-op .ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az-osc);
  display:flex; align-items:center; justify-content:center;
}
.cuenta-op .ico svg{ width:19px; height:19px; }
.cuenta-op .txt{ flex:1 1 auto; min-width:0; }
.cuenta-op .txt strong{ display:block; font-size:14px; color:var(--az-hond); }
.cuenta-op .txt span{ display:block; font-size:11.5px; color:var(--gris); margin-top:1px; }
.cuenta-op .fl{ flex:0 0 auto; width:16px; height:16px; color:var(--gris); }
/* Salir se distingue: es la acción que no se quiere pulsar por error */
.cuenta-op.salir .ico{ background:var(--rojo-tenue); color:var(--rojo); }
.cuenta-op.salir .txt strong{ color:var(--rojo); }
.cuenta-op.salir:hover{ background:var(--rojo-tenue); border-color:#e8cfcd; }
.cuenta-op:disabled{ opacity:.6; cursor:default; }

.cuenta-form .campo{ margin-bottom:12px; }
.cuenta-acc{ display:flex; gap:10px; margin-top:14px; }
.cuenta-acc .btn{ flex:1 1 0; justify-content:center; }

.cuenta-msg{
  padding:10px 12px; border-radius:10px; font-size:12.5px;
  margin-bottom:12px; border:1px solid;
}
.cuenta-msg.ok{ background:#e9f5ef; border-color:#c6e5d6; color:#1f5f43; }
.cuenta-msg.mal{ background:var(--rojo-tenue); border-color:#e8cfcd; color:var(--rojo); }

/* Los demás avisos urgentes pendientes, listados bajo el principal: se
   reconocen y se cierran todos con una sola confirmación. */
.urg-otros{
  list-style:none; margin:14px 0 0; padding:12px 0 0;
  border-top:1px solid var(--linea); text-align:left;
}
.urg-otros li{
  position:relative; padding:5px 0 5px 16px;
  font-size:12.5px; color:var(--gris);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.urg-otros li::before{
  content:''; position:absolute; left:2px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--rojo);
}

/* ===========================================================================
   MODO ADMINISTRADOR
   ===========================================================================
   Todo lo de administracion lleva el mismo violeta y nunca el azul de la app.
   Es deliberado: quien tiene el modo encendido esta viendo el edificio entero
   y puede abrir puertas, y eso no puede parecerse a la pantalla de siempre.
   =========================================================================== */
:root{
  --adm:#6b4d8f;
  --adm-osc:#553c73;
  --adm-tenue:#f2edf8;
  --adm-borde:#ddd0ec;
}

/* ---------- Cinta de las pantallas de administracion ---------- */
.admin-cinta{
  display:flex; align-items:center; gap:7px;
  margin-bottom:14px; padding:7px 12px;
  border-radius:999px; background:var(--adm-tenue);
  color:var(--adm-osc); font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  width:max-content; max-width:100%;
}
.admin-cinta svg{ width:14px; height:14px; flex:0 0 auto; }

/* ---------- Banda del inicio con el interruptor ---------- */
.admin-banda{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px; padding:13px 15px;
  border:1px solid var(--adm-borde); border-radius:var(--r);
  background:#fff;
}
.admin-banda.on{
  background:linear-gradient(135deg, var(--adm) 0%, var(--adm-osc) 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(107,77,143,.28);
}
.admin-banda-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:var(--adm-tenue); color:var(--adm);
}
.admin-banda.on .admin-banda-ico{ background:rgba(255,255,255,.18); color:#fff; }
.admin-banda-ico svg{ width:19px; height:19px; }
.admin-banda-tx{ flex:1 1 auto; min-width:0; }
.admin-banda-tx strong{ display:block; font-size:14px; font-weight:700; color:var(--adm-osc); }
.admin-banda.on .admin-banda-tx strong{ color:#fff; }
.admin-banda-tx span{ display:block; margin-top:2px; font-size:11.5px; color:var(--gris); }
.admin-banda.on .admin-banda-tx span{ color:rgba(255,255,255,.85); }
.admin-banda form{ flex:0 0 auto; }
.admin-banda-sw{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 10px; border:0; border-radius:999px; cursor:pointer;
  background:var(--adm); color:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700;
}
.admin-banda-sw:hover{ background:var(--adm-osc); }
.admin-banda.on .admin-banda-sw{ background:rgba(255,255,255,.2); }
.admin-banda.on .admin-banda-sw:hover{ background:rgba(255,255,255,.3); }
/* La pastilla del interruptor: la bolita se corre al estar encendido */
.admin-banda-sw i{
  position:relative; flex:0 0 auto; width:30px; height:17px; border-radius:999px;
  background:rgba(255,255,255,.3); transition:background .18s;
}
.admin-banda-sw i::after{
  content:''; position:absolute; top:2.5px; left:2.5px;
  width:12px; height:12px; border-radius:50%; background:#fff;
  transition:transform .18s;
}
.admin-banda.on .admin-banda-sw i{ background:rgba(255,255,255,.45); }
.admin-banda.on .admin-banda-sw i::after{ transform:translateX(13px); }

/* ---------- Modulos exclusivos de administracion ---------- */
.admin-mods{ margin-bottom:18px; }
.admin-mods-tit{
  display:flex; align-items:center; gap:7px;
  margin:0 0 9px 2px; font-size:11px; font-weight:750; color:var(--adm);
  letter-spacing:.08em; text-transform:uppercase;
}
.admin-mods-tit svg{ width:14px; height:14px; }
.admin-rejilla{ display:flex; flex-direction:column; gap:9px; }
.admin-mod{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:var(--r); text-decoration:none;
  color:inherit; background:#fff;
  border:1px solid var(--adm-borde);
  /* Franja lateral: se distingue del resto de tarjetas incluso de reojo */
  box-shadow:inset 3px 0 0 var(--adm);
}
.admin-mod:active{ transform:scale(.99); }
.admin-mod-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:13px;
  background:var(--adm-tenue); color:var(--adm-osc);
}
.admin-mod-ico svg{ width:20px; height:20px; }
.admin-mod-tx{ flex:1 1 auto; min-width:0; }
.admin-mod-tx strong{ display:block; font-size:14.5px; font-weight:650; color:var(--tinta); }
.admin-mod-tx span{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris); }
.admin-mod-fl{ flex:0 0 auto; width:17px; height:17px; color:var(--adm-borde); }

/* Pastilla del modo en las cabeceras de listado */
.pill.admin{ background:var(--adm-tenue); color:var(--adm-osc); }

/* ---------- Botonera de puertas ---------- */
.puertas-rejilla{ display:flex; flex-direction:column; gap:10px; }
.puerta{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:15px; border-radius:var(--r); cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--adm-borde);
  box-shadow:inset 3px 0 0 var(--adm);
  font-family:inherit; color:inherit;
  transition:box-shadow .15s, opacity .15s;
}
.puerta:disabled{ cursor:default; }
.puerta:active{ transform:scale(.99); }
.puerta-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:14px;
  background:var(--adm-tenue); color:var(--adm-osc);
  transition:background .2s, color .2s;
}
.puerta-ico svg{ width:22px; height:22px; }
.puerta-tx{ flex:1 1 auto; min-width:0; }
.puerta-tx strong{ display:block; font-size:15px; font-weight:650; color:var(--tinta); }
.puerta-nota{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris); }
.puerta-est{
  flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--gris);
  text-align:right; max-width:42%; overflow-wrap:anywhere;
}

.puerta.yendo{ opacity:.65; }
.puerta.yendo .puerta-ico{ background:var(--adm); color:#fff; }
.puerta.bien{ box-shadow:inset 3px 0 0 var(--ok); }
.puerta.bien .puerta-ico{ background:#e9f4ee; color:var(--ok); }
.puerta.bien .puerta-est{ color:var(--ok); }
.puerta.mal{ box-shadow:inset 3px 0 0 var(--rojo); }
.puerta.mal .puerta-ico{ background:var(--rojo-tenue); color:var(--rojo); }
.puerta.mal .puerta-est{ color:var(--rojo); }

/* ---------- Cartera vencida ---------- */
.vencida-total{
  padding:18px 16px; margin-bottom:14px; border-radius:var(--r);
  background:linear-gradient(135deg, var(--adm) 0%, var(--adm-osc) 100%);
  color:#fff; box-shadow:0 6px 18px rgba(107,77,143,.28);
}
.vencida-total-v{ font-size:30px; font-weight:750; letter-spacing:-.02em; }
.vencida-total-p{ margin-top:3px; font-size:12px; color:rgba(255,255,255,.85); }

/* Tramos de antiguedad: hacen de filtro, cada uno con su color del ERP */
.vencida-tramos{
  display:flex; gap:7px; overflow-x:auto; padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.vencida-tramos::-webkit-scrollbar{ display:none; }
.vt{
  flex:0 0 auto; padding:7px 13px; border-radius:999px; text-decoration:none;
  border:1px solid var(--linea); background:#fff;
  font-size:12.5px; font-weight:650; color:var(--tinta);
  border-left:3px solid var(--vt-color, var(--linea));
}
.vt.on{ background:var(--adm); border-color:var(--adm); color:#fff; }

.vencida-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px; }
/* La fila es un enlace al estado de cuenta de esa empresa. El color del tramo
   vive en el <li>, que es quien lleva la variable; asi el enlace la hereda. */
.vencida-fila{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px; background:#fff;
  border:1px solid var(--linea);
  box-shadow:inset 3px 0 0 var(--vt-color, var(--linea));
  text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s;
}
a.vencida-fila:hover{
  border-color:var(--adm-borde);
  box-shadow:inset 3px 0 0 var(--vt-color, var(--linea)), 0 2px 10px rgba(44,68,89,.07);
}
a.vencida-fila:active{ transform:scale(.995); }
a.vencida-fila:hover .vf-fl{ color:var(--adm); }
/* Sin id_empresa no hay a donde ir: se ve igual pero no invita al toque */
.vencida-fila.sin-enlace{ cursor:default; }
.vf-fl{ flex:0 0 auto; width:16px; height:16px; color:var(--az-borde);
  transition:color .15s; }
.vf-tx{ flex:1 1 auto; min-width:0; }
.vf-tx strong{ display:block; font-size:13.5px; font-weight:650; color:var(--tinta);
  overflow-wrap:anywhere; }
.vf-sub{ display:block; margin-top:2px; font-size:11px; color:var(--gris); }
.vf-num{ flex:0 0 auto; text-align:right; }
.vf-saldo{ display:block; font-size:15px; font-weight:750; color:var(--tinta);
  font-variant-numeric:tabular-nums; }
.vf-tramo{ display:block; margin-top:1px; font-size:10.5px; font-weight:650;
  color:var(--vt-color, var(--gris)); }

.vencida-pie{ margin:16px 2px 0; font-size:11.5px; color:var(--gris); text-align:center; }
.vencida-pie a{ color:var(--adm); font-weight:650; }

/* ===========================================================================
   TACTO: que se sienta app y no pagina web
   ===========================================================================
   Al tocar un boton, Chrome y Safari de movil pintan encima un rectangulo
   gris translucido (el "tap highlight"). Es lo que delata que esto es HTML:
   ninguna app nativa hace eso, y ademas se dibuja sobre TODO el rectangulo
   del elemento, ignorando el border-radius, asi que en una tarjeta redondeada
   se ven las esquinas cuadradas del resaltado.

   Se quita, PERO cada cosa que se pueda tocar tiene que seguir respondiendo:
   un boton que no acusa el toque se siente roto y la gente lo pulsa dos veces.
   Por eso aqui abajo va tambien el :active de lo que no lo tenia.
   =========================================================================== */

html{
  /* El resaltado gris del toque. 'transparent' y no 'rgba(0,0,0,0)' porque
     algunos Android viejos ignoran el segundo. Se hereda a todo. */
  -webkit-tap-highlight-color:transparent;
}

/* touch-action:manipulation quita dos cosas de golpe:
     - el retardo de ~300 ms que el navegador espera por si viene un doble
       toque (el boton responde al instante)
     - el zoom por doble toque SOBRE ese elemento, que en una cuadricula de
       botones se dispara sin querer
   Se pone solo en lo interactivo: el zoom sigue funcionando sobre el texto y
   sobre las fotos, que es donde hace falta. */
a, button, [role="button"], input[type="submit"], input[type="button"],
label, summary, select, .mod, .puerta, .vt, .admin-mod, .vencida-fila{
  touch-action:manipulation;
}

/* Android pinta a los <button> un fondo y un borde interior propios que se
   notan al pulsar. Con esto mandan solo nuestros estilos. */
button{
  -webkit-appearance:none; appearance:none;
  background-clip:padding-box;
}

/* ---------- El foco ----------
   El anillo de foco SOLO con teclado. :focus a secas lo dejaba puesto despues
   de tocar con el dedo, que es otra cosa que se ve rara en un movil; pero
   quitarlo del todo deja sin orientacion a quien navega con teclado, asi que
   :focus-visible se respeta siempre.

   El outline ya respeta el border-radius del elemento en los navegadores
   actuales, asi que NO se toca el radio aqui: hacerlo cambiaria la forma de la
   tarjeta enfocada, no la del anillo. */
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:2px solid var(--az); outline-offset:2px; }

/* ---------- Respuesta al toque ----------
   Lo que ya tenia su :active (los .mod, .btn, .puerta, las tarjetas) se queda
   como esta. Aqui van los que se quedaban sin ninguna senal al quitarles el
   resaltado del navegador. */
.admin-banda-sw:active,
.enlace-suelto:active,
.btn-ver:active,
.vt:active,
.limpiar:active,
.noti:active,
.tg-rejilla .mod:active{
  transform:scale(.97);
}
.admin-banda-sw, .enlace-suelto, .btn-ver, .vt, .noti{
  transition:transform .09s ease, background .15s, border-color .15s;
}

/* Red de seguridad: cualquier boton o enlace de la app que no tenga un
   :active propio se hunde un pelin. Especificidad baja a proposito, para que
   el :active concreto de cada componente siga mandando. */
.cont a:active, .cont button:active{ opacity:.85; }

/* ---------- Rebote del scroll ----------
   Evita que al llegar al final de un listado el gesto siga hacia el navegador
   y dispare el "tirar para recargar" de Chrome, que en una app instalada no
   pinta nada y recarga sin querer.

   OJO: esto QUITA el tirar-para-recargar. Si se prefiere conservarlo, se
   borra este bloque y ya. */
body{ overscroll-behavior-y:contain; }

/* Los contenedores que tienen su propio scroll no encadenan con la pagina:
   al terminar la fila de tramos, la pagina no se mueve detras. */
.vencida-tramos, .tabla-caja, .galeria, .visor{ overscroll-behavior:contain; }

/* ---------- Aviso a los deudores en pantalla ----------
   Va debajo de los tramos y encima de la lista: primero se filtra, se ve a
   quien va a llegar, y solo entonces se manda. El numero del boton es esa
   cuenta, para que no haya que fiarse de la memoria. */
.vencida-notif{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:2px 0 14px; padding:11px 13px;
  background:#fff; border:1px solid var(--adm-borde); border-radius:12px;
}
.btn-notif{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:10px 16px; border:0; border-radius:10px; cursor:pointer;
  background:var(--adm); color:#fff;
  font-family:inherit; font-size:14px; font-weight:700;
}
.btn-notif:hover{ background:var(--adm-osc); }
.btn-notif:active{ transform:scale(.97); }
.btn-notif:disabled{ opacity:.5; cursor:default; }
.btn-notif svg{ width:16px; height:16px; }
/* La cuenta de a cuantos va: es el dato que decide si se pulsa o se filtra mas */
.btn-notif span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:21px; height:20px; padding:0 6px; border-radius:999px;
  background:rgba(255,255,255,.22); font-size:12px; font-weight:700;
}
.vencida-notif-p{
  flex:1 1 190px; min-width:0; font-size:11.5px; color:var(--gris); line-height:1.35;
}

/* ---------- Buscador de visitantes en el pase QR ----------
   El campo se ve igual que los demas; lo unico que cambia es que puede
   desplegar sugerencias. Quien viene por primera vez no nota nada. */
.busca-vis{ position:relative; }

/* Rueda de espera dentro del campo, a la derecha */
.busca-vis-carga{
  position:absolute; right:12px; top:38px;
  width:14px; height:14px; border-radius:50%;
  border:2px solid var(--az-borde); border-top-color:var(--az);
  animation:busca-vis-gira .7s linear infinite;
}
.busca-vis-carga[hidden]{ display:none; }
@keyframes busca-vis-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .busca-vis-carga{ animation-duration:2s; }
}

.busca-vis-lista{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  margin:0; padding:4px; list-style:none;
  max-height:min(46vh, 300px); overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border:1px solid var(--az-borde); border-radius:12px;
  box-shadow:var(--sombra-alta);
}
.busca-vis-lista[hidden]{ display:none; }
.busca-vis-lista li{
  padding:9px 11px; border-radius:8px; cursor:pointer;
}
.busca-vis-lista li strong{
  display:block; font-size:13.5px; font-weight:650; color:var(--tinta);
  line-height:1.25; overflow-wrap:anywhere;
}
.busca-vis-lista li span{
  display:block; margin-top:2px; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}
/* on: lo marcado con las flechas del teclado. Mismo aspecto que el hover para
   que no haya dos "resaltados" distintos compitiendo. */
.busca-vis-lista li.on,
.busca-vis-lista li:hover{ background:var(--az-tenue); }
.busca-vis-lista li.on strong{ color:var(--az-hond); }

/* ===========================================================================
   VENTANILLA
   ===========================================================================
   Se usa de pie, en un mostrador, muchas veces con el visitante delante. Todo
   grande y a un toque: dos cosas que hacer y ninguna pantalla intermedia.
   =========================================================================== */

/* ---------- Los dos accesos ----------
   Tarjeta blanca centrada, con el icono arriba: el mismo formato que la
   pantalla de "Registro de visitas" del portal, para que no parezcan dos
   aplicaciones distintas.

   width:100% explicito: un <button> se dimensiona a su contenido, y sin esto
   cada uno salia de un ancho distinto segun lo que dijera su texto. */
.vt-menu{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }

/* El atributo hidden deja de funcionar en cuanto una regla propia pone
   display: la del autor gana a la [hidden]{display:none} del navegador, y la
   pantalla se quedaba puesta al pulsar. Por eso se repite aqui. */
.vt-menu[hidden], .vt-pant[hidden], .vt-velo[hidden]{ display:none; }

.vt-tile{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:100%; padding:26px 18px 20px; cursor:pointer; text-align:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r);
  font-family:inherit; color:inherit; box-shadow:var(--sombra);
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.vt-tile:active{ transform:scale(.99); }
.vt-tile.entrada:hover{ border-color:var(--az); box-shadow:var(--sombra-alta); }
.vt-tile.salida:hover { border-color:var(--ok); box-shadow:var(--sombra-alta); }

.vt-tile-ico{
  display:flex; align-items:center; justify-content:center;
  width:74px; height:74px; margin-bottom:12px; border-radius:22px;
}
.vt-tile-ico svg{ width:34px; height:34px; }
.vt-tile.entrada .vt-tile-ico{ background:var(--az-tenue); color:var(--az-hond); }
.vt-tile.salida  .vt-tile-ico{ background:#e9f4ee;         color:var(--ok); }

.vt-tile strong{
  font-size:15px; font-weight:750; color:var(--tinta);
  letter-spacing:.06em; text-transform:uppercase;
}
.vt-tile-sub{ font-size:13px; color:var(--gris); }

/* Llamada a la accion, como en la pantalla del portal */
.vt-tile-acc{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:13.5px; font-weight:700;
}
.vt-tile-acc svg{ width:15px; height:15px; }
.vt-tile.entrada .vt-tile-acc{ color:var(--az); }
.vt-tile.salida  .vt-tile-acc{ color:var(--ok); }

/* Pantallas cortas: el menu se aprieta para que los dos quepan sin desplazar */
@media (max-height:720px){
  .vt-tile{ padding:18px 16px 14px; }
  .vt-tile-ico{ width:58px; height:58px; margin-bottom:9px; border-radius:18px; }
  .vt-tile-ico svg{ width:27px; height:27px; }
  .vt-tile-acc{ margin-top:8px; }
}

/* ---------- Elegir a quién visita ---------- */
.vt-elegir{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px; cursor:pointer; text-align:left;
  border:1px solid var(--az-borde); border-radius:12px; background:#fff;
  font-family:inherit; font-size:15px; color:inherit;
}
.vt-elegir:hover{ border-color:var(--az); background:var(--az-tenue); }
.vt-elegir svg{ flex:0 0 auto; width:17px; height:17px; color:var(--gris); }
.vt-elegir-tx{
  flex:1 1 auto; min-width:0; color:var(--gris);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Una vez elegida, se lee como un dato puesto y no como un hueco por rellenar */
.vt-elegir-tx.puesto{ color:var(--az-hond); font-weight:700; }

/* ---------- Modal de destinos ---------- */
.vt-velo{
  position:fixed; inset:0; z-index:9000; display:flex;
  align-items:flex-end; justify-content:center;
  background:rgba(26,40,52,.55); padding:0;
}
@media (min-width:700px){ .vt-velo{ align-items:center; padding:20px; } }

.vt-modal{
  display:flex; flex-direction:column;
  width:min(560px,100%); max-height:88%;
  background:#fff; border-radius:18px 18px 0 0; overflow:hidden;
  box-shadow:0 -12px 40px rgba(20,32,42,.3);
}
@media (min-width:700px){
  .vt-modal{ border-radius:16px; max-height:80%; box-shadow:0 20px 60px rgba(20,32,42,.35); }
}

/* Con el teclado abierto quedan unos 330px de alto util: si el modal conserva
   sus holguras, de la lista solo se ve una fila. Con .vt-corto (lo pone
   ventanilla.js segun visualViewport) se recorta el marco y se esconde el pie,
   que es informativo, para devolverle ese espacio a la lista. */
.vt-velo.vt-corto .vt-modal{ max-height:100%; }
.vt-velo.vt-corto .vt-modal-hd{ padding:9px 16px 7px; }
.vt-velo.vt-corto .vt-modal-hd strong{ font-size:14.5px; }
.vt-velo.vt-corto .vt-modal-busca{ padding:8px 16px 6px; }
.vt-velo.vt-corto .vt-modal-busca input{ padding-block:9px; }
.vt-velo.vt-corto .vt-torres{ padding:0 16px 7px; }
.vt-velo.vt-corto .vt-torres button{ padding:7px 6px; }
.vt-velo.vt-corto .vt-modal-lista li{ padding:9px 12px; }
.vt-velo.vt-corto .vt-modal-pie{ display:none; }

.vt-modal-hd{

  display:flex; align-items:center; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--linea);
}
.vt-modal-hd strong{ flex:1 1 auto; font-size:16px; font-weight:700; color:var(--az-hond); }
.vt-modal-x{
  flex:0 0 auto; width:32px; height:32px; border:0; border-radius:9px;
  cursor:pointer; background:var(--linea); color:var(--gris);
  font-size:20px; line-height:1; font-family:inherit;
}
.vt-modal-x:hover{ background:var(--rojo-tenue); color:var(--rojo); }

.vt-modal-busca{ position:relative; padding:12px 16px 8px; }
.vt-modal-busca svg{
  position:absolute; left:27px; top:50%; transform:translateY(-30%);
  width:16px; height:16px; color:var(--gris); pointer-events:none;
}
.vt-modal-busca input{
  width:100%; padding:11px 12px 11px 36px;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
  font-family:inherit; font-size:15px; color:inherit;
}
.vt-modal-busca input:focus{
  outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue);
}

/* Filtro por torre dentro del modal */
.vt-torres{ display:flex; gap:7px; padding:2px 16px 10px; }
.vt-torres button{
  flex:1 1 0; padding:9px 6px; border-radius:10px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff;
  font-family:inherit; font-size:13px; font-weight:650; color:var(--tinta);
}
.vt-torres button:hover{ background:var(--az-tenue); }
.vt-torres button.on{ background:var(--az-hond); border-color:var(--az-hond); color:#fff; }

.vt-modal-lista{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; margin:0; padding:4px 10px 6px;
}
.vt-modal-lista li{
  padding:11px 12px; border-radius:11px; cursor:pointer;
  border:1px solid transparent;
}
.vt-modal-lista li:hover{ background:var(--fondo); }
/* La ya elegida, marcada: al reabrir se ve enseguida cual estaba puesta */
.vt-modal-lista li.on{ background:var(--az-tenue); border-color:var(--az-borde); }
.vt-modal-lista li strong{
  display:block; font-size:14px; font-weight:650; color:var(--tinta);
  overflow-wrap:anywhere;
}
.vt-modal-lista li span{
  display:block; margin-top:2px; font-size:12px; color:var(--gris);
  font-variant-numeric:tabular-nums;
}

.vt-modal-pie{
  flex:0 0 auto; margin:0; padding:9px 16px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea); background:var(--fondo);
  font-size:11.5px; color:var(--gris); text-align:center;
}

/* ---------- Cabecera de cada pantalla ---------- */
.vt-cab{ display:flex; align-items:center; gap:9px; margin:0 0 12px; }
.vt-cab h2{ margin:0; font-size:16.5px; font-weight:700; color:var(--az-hond); }
.vt-atras{
  flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--az-borde); border-radius:11px;
  cursor:pointer; background:#fff; color:var(--az-osc);
}
.vt-atras:hover{ background:var(--az-tenue); border-color:var(--az); }
.vt-atras svg{ width:16px; height:16px; }

/* Todo mas junto que en el resto de la app: la pantalla tiene que caber
   entera sin desplazar, porque se rellena de pie y con el visitante delante */
.vt-pant .campo{ margin-bottom:10px; }
.vt-pant .campo-nota{ margin-top:3px; font-size:11px; }

/* ---------- El nombre, arriba y grande ----------
   Es el dato que se confirma en voz alta con el visitante, asi que se lee como
   un titulo y no como un campo mas de formulario. */
.vt-nombre input{
  font-size:18px; font-weight:700; color:var(--az-hond);
  padding:11px 12px;
}
.vt-nombre input::placeholder{ font-size:14px; font-weight:400; color:var(--gris); }

/* ---------- Cédula y teclado ----------
   El teclado es propio y el campo va readonly: el del sistema tapa media
   pantalla y aqui solo se escriben cifras. */
#vtDoc{
  font-size:22px; font-weight:700; letter-spacing:.1em; text-align:center;
  font-variant-numeric:tabular-nums; padding:10px 12px;
}
.vt-tecla{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  margin:0 0 12px;
}
.vt-tecla button{
  padding:13px 0; border:1px solid var(--az-borde); border-radius:11px;
  cursor:pointer; background:#fff; color:var(--tinta);
  font-family:inherit; font-size:20px; font-weight:600;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.vt-tecla button:hover{ background:var(--az-tenue); border-color:var(--az); }
.vt-tecla button:active{ transform:scale(.95); background:var(--az-borde); }
.vt-tecla button.acc{ background:var(--fondo); color:var(--az-osc); font-size:15px; }
.vt-tecla button.acc svg{ width:20px; height:20px; }

.campo-nota.bien{ color:var(--ok); font-weight:650; }
.vt-enviar{ margin-top:0; }

/* Pantallas cortas: se recorta el teclado antes que nada, que es lo que mas
   ocupa, y sigue siendo comodo de pulsar */
@media (max-height:720px){
  .vt-tecla button{ padding:8px 0; font-size:18px; }
  .vt-tecla{ gap:6px; margin-bottom:9px; }
  .vt-nombre input{ font-size:16.5px; padding:9px 12px; }
  #vtDoc{ font-size:19px; padding:8px 12px; }
  .vt-pant .campo{ margin-bottom:7px; }
  .vt-cab{ margin-bottom:9px; }
  .vt-cab h2{ font-size:15.5px; }
}

/* ---------- Filtro por torre ---------- */
.vt-filtros{
  display:flex; gap:8px; margin-bottom:12px;
  /* Se quedan a la vista: la lista de dentro es larga y cambiar de torre
     obligaba a subir hasta arriba. Van pegados al borde de .barra, que es
     sticky con 55px de alto mas el hueco de la barra de estado.
     El margen negativo y su relleno hacen que las filas pasen por debajo
     sin asomar por los lados. */
  position:sticky; top:calc(55px + env(safe-area-inset-top)); z-index:20;
  margin-inline:-14px; padding:10px 14px 12px;
  background:var(--fondo);
  box-shadow:0 8px 8px -8px rgba(20,32,42,.16);
}

.vt-filtros button{
  flex:1 1 0; padding:11px 8px; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff;
  font-family:inherit; font-size:13.5px; font-weight:650; color:var(--tinta);
}
.vt-filtros button:hover{ background:var(--az-tenue); }
.vt-filtros button.on{ background:var(--az-hond); border-color:var(--az-hond); color:#fff; }

/* ---------- Lista de quien está dentro ---------- */
.vt-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:7px; }
.vt-fila{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:11px; background:#fff;
  border:1px solid var(--linea); box-shadow:inset 3px 0 0 var(--ok);
}
.vt-fila[hidden]{ display:none; }
.vt-tx{ flex:1 1 auto; min-width:0; }
.vt-tx strong{ display:block; font-size:13.5px; font-weight:650; color:var(--tinta);
  overflow-wrap:anywhere; }
.vt-tx span{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris);
  overflow-wrap:anywhere; }
.vt-hora{ flex:0 0 auto; text-align:right; }
.vt-hora .ent{ display:block; font-size:14px; font-weight:700; color:var(--az-hond);
  font-variant-numeric:tabular-nums; }

.btn-salida{
  flex:0 0 auto; padding:10px 16px; border-radius:9px; cursor:pointer;
  border:0; background:var(--ok); color:#fff;
  font-family:inherit; font-size:13px; font-weight:700;
}
.btn-salida:hover{ filter:brightness(1.07); }
.btn-salida:active{ transform:scale(.97); }

.vt-pie{ margin-top:10px; text-align:center; }

@media (max-width:460px){
  .vt-fila{ flex-wrap:wrap; }
  .vt-tx{ flex:1 1 100%; }
  .vt-hora{ flex:1 1 auto; text-align:left; }
}

/* ===========================================================================
   CONFIRMACION
   ===========================================================================
   Sustituye al confirm() del navegador. El de serie sale con el dominio por
   titulo ("go.mangoox.net dice"), tipografia del sistema y botones a la
   derecha: rompe la pantalla y ademas no distingue una accion que no tiene
   vuelta atras de una cualquiera. Aqui el color dice de que va: verde para lo
   que se da por hecho, rojo para lo que no se deshace.
   =========================================================================== */
.dlg-velo{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(26,40,52,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:dlg-entra .16s ease-out;
}
/* Con display propio, [hidden] deja de valer si no se repite */
.dlg-velo[hidden]{ display:none; }

.dlg{
  width:min(400px,100%); padding:24px 20px 18px;
  background:#fff; border-radius:20px; text-align:center;
  box-shadow:0 24px 60px rgba(20,32,42,.32);
  animation:dlg-sube .2s cubic-bezier(.2,.9,.3,1);
}

.dlg-ico{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--az-tenue); color:var(--az-hond);
}
.dlg-ico svg{ width:25px; height:25px; }

.dlg-tx{
  margin:0; font-size:16.5px; font-weight:700; line-height:1.35;
  color:var(--tinta); overflow-wrap:anywhere;
}
.dlg-nota{ margin:7px 0 0; font-size:13px; line-height:1.4; color:var(--gris); }
.dlg-nota:empty{ display:none; }

.dlg-btns{ display:flex; gap:9px; margin-top:20px; }
.dlg-btns button{
  flex:1 1 0; padding:13px 14px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; font-family:inherit;
  font-size:14.5px; font-weight:700;
  transition:background .15s, transform .08s;
}
.dlg-btns button:active{ transform:translateY(1px); }
.dlg-no{ background:#fff; border-color:var(--az-borde); color:var(--az-osc); }
.dlg-no:hover{ background:var(--fondo); }
.dlg-si{ background:var(--az); border-color:var(--az); color:#fff; }
.dlg-si:hover{ background:var(--az-osc); }

/* El tono lo pone quien llama: el mismo modal no puede pintar igual registrar
   una salida que dar de baja un tag para siempre. */
.dlg-velo.tono-ok .dlg-ico{ background:#e9f4ee; color:var(--ok); }
.dlg-velo.tono-ok .dlg-si{ background:var(--ok); border-color:var(--ok); }
.dlg-velo.tono-ok .dlg-si:hover{ filter:brightness(1.08); }
.dlg-velo.tono-rojo .dlg-ico{ background:var(--rojo-tenue); color:var(--rojo); }
.dlg-velo.tono-rojo .dlg-si{ background:var(--rojo); border-color:var(--rojo); }
.dlg-velo.tono-rojo .dlg-si:hover{ filter:brightness(1.08); }

@keyframes dlg-entra{ from{ opacity:0; } }
@keyframes dlg-sube{ from{ opacity:0; transform:translateY(14px) scale(.97); } }

@media (prefers-reduced-motion:reduce){
  .dlg-velo, .dlg{ animation:none; }
}

/* ===========================================================================
   PERFILES
   ===========================================================================
   Un usuario puede ser condomino y guardia a la vez, pero se mueve por la app
   con uno puesto. Sustituye al viejo interruptor de "modo administrador":
   encenderlo era ponerse el perfil de administracion, y generalizarlo dejo un
   solo mecanismo en vez de dos.
   =========================================================================== */

/* ---------- La banda del inicio: con que se esta mirando ---------- */
.perfil-banda{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px; padding:12px 14px;
  border:1px solid var(--az-borde); border-radius:var(--r);
  background:#fff;
}
/* El de administracion, con su color: quien lo lleve puesto puede abrir
   puertas del edificio y ver la deuda de todos, y eso tiene que verse. */
.perfil-banda.admin{
  background:linear-gradient(135deg, var(--adm) 0%, var(--adm-osc) 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(107,77,143,.28);
}
.perfil-banda-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az-hond);
}
.perfil-banda.admin .perfil-banda-ico{ background:rgba(255,255,255,.18); color:#fff; }
.perfil-banda-ico svg{ width:19px; height:19px; }
.perfil-banda-tx{ flex:1 1 auto; min-width:0; }
.perfil-banda-tx strong{
  display:block; font-size:14px; font-weight:700; color:var(--az-hond);
  overflow-wrap:anywhere;
}
.perfil-banda.admin .perfil-banda-tx strong{ color:#fff; }
.perfil-banda-tx span{ display:block; margin-top:2px; font-size:11.5px; color:var(--gris); }
.perfil-banda.admin .perfil-banda-tx span{ color:rgba(255,255,255,.85); }
.perfil-banda-btn{
  flex:0 0 auto; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--az-osc);
  font-family:inherit; font-size:12.5px; font-weight:700;
}
.perfil-banda-btn:hover{ background:var(--az-tenue); border-color:var(--az); }
.perfil-banda.admin .perfil-banda-btn{
  background:rgba(255,255,255,.2); border-color:transparent; color:#fff;
}
.perfil-banda.admin .perfil-banda-btn:hover{ background:rgba(255,255,255,.32); }

/* ---------- El selector, dentro de la hoja de la cuenta ---------- */
.perfil-ayuda{
  margin:0 0 12px; font-size:12.5px; line-height:1.45; color:var(--gris);
}
.perfil-lista{ display:flex; flex-direction:column; gap:8px; }

.perfil-op{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:12px 13px; cursor:pointer; text-align:left;
  border:1px solid var(--az-borde); border-radius:12px; background:#fff;
  font-family:inherit; color:inherit;
  transition:border-color .15s, background .15s, transform .08s;
}
.perfil-op:hover{ border-color:var(--az); background:var(--az-tenue); }
.perfil-op:active{ transform:scale(.99); }
/* El que ya lleva puesto: se distingue sin leer */
.perfil-op.on{ border-color:var(--az); background:var(--az-tenue); }
.perfil-op.es-admin{ border-color:var(--adm-borde); }
.perfil-op.es-admin:hover{ border-color:var(--adm); background:var(--adm-tenue); }
.perfil-op.es-admin.on{ border-color:var(--adm); background:var(--adm-tenue); }

.perfil-op-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px;
  background:var(--az-tenue); color:var(--az-hond);
}
.perfil-op.es-admin .perfil-op-ico{ background:var(--adm-tenue); color:var(--adm); }
.perfil-op-ico svg{ width:18px; height:18px; }

.perfil-op-tx{ flex:1 1 auto; min-width:0; }
.perfil-op-tx strong{
  display:block; font-size:14px; font-weight:700; color:var(--tinta);
  overflow-wrap:anywhere;
}
.perfil-op-tx span{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris); }

.perfil-op-ok{ flex:0 0 auto; width:18px; height:18px; color:var(--az); }
.perfil-op.es-admin .perfil-op-ok{ color:var(--adm); }

/* Cambiar de perfil recarga la app entera: mientras llega, la lista deja de
   responder para que el segundo toque no caiga sobre lo que ya se va. */
.cuenta-perfiles.yendo .perfil-lista{ opacity:.5; pointer-events:none; }
.perfil-op:disabled{ cursor:default; }

/* ===========================================================================
   ACTIVIDADES DE TRABAJO
   ===========================================================================
   Del personal del edificio: se anota lo que se hizo, con foto y sitio, y a
   fin de mes sale el reporte. Se usa de pie, a veces con guantes, asi que
   todo grande y de un toque.
   =========================================================================== */

.act-alta{ margin-bottom:14px; }
.act-alta svg{ width:17px; height:17px; }

/* ---------- Resumen de arriba ---------- */
.act-resumen{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:12px; padding:10px 13px;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
  font-size:12.5px; color:var(--gris);
}
.act-resumen strong{ color:var(--az-hond); font-size:14px; }
.act-resumen a{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  color:var(--az); font-weight:650; text-decoration:none;
}
.act-resumen a svg{ width:14px; height:14px; }

/* ---------- Elegir donde ---------- */
.act-modos{ display:flex; gap:8px; margin-bottom:9px; }
.act-modos button{
  flex:1 1 0; padding:11px 8px; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff;
  font-family:inherit; font-size:13.5px; font-weight:650; color:var(--tinta);
}
.act-modos button:hover{ background:var(--az-tenue); }
.act-modos button.on{ background:var(--az-hond); border-color:var(--az-hond); color:#fff; }

.act-sitio{ display:flex; flex-direction:column; gap:8px; }
/* El atributo hidden deja de valer en cuanto una regla propia pone display */
.act-sitio[hidden]{ display:none; }
.act-sel{
  width:100%; padding:12px; border-radius:11px; background:#fff;
  border:1px solid var(--az-borde); font-family:inherit; font-size:15px;
  color:inherit;
}
.act-sel:disabled{ background:var(--fondo); color:var(--gris); }
.act-sel:focus{ outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue); }

/* ---------- La lista ---------- */
.act-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }

.act-fila{
  padding:12px 13px; border-radius:12px; background:#fff;
  border:1px solid var(--linea); box-shadow:inset 3px 0 0 var(--az);
}
/* La que ya entro en un reporte: apagada pero a la vista. Esconderla dejaria
   a quien la busca pensando que se perdio. */
.act-fila.cerrada{ box-shadow:inset 3px 0 0 var(--gris); background:var(--fondo); }

.act-cab{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px; }
.act-fecha{
  font-size:12.5px; font-weight:700; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.act-sitio-tx{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--gris);
  overflow-wrap:anywhere; }
.act-nfotos{ font-size:11px; color:var(--gris); }

.act-sello{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px;
  background:var(--linea); color:var(--gris);
  font-size:10.5px; font-weight:700;
}
.act-sello svg{ width:11px; height:11px; }

.act-detalle{
  margin:0 0 8px; font-size:14px; font-weight:600; line-height:1.35;
  color:var(--tinta); overflow-wrap:anywhere;
}

.act-miniaturas{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.act-mini{
  display:block; width:66px; height:66px; border-radius:9px; overflow:hidden;
  border:1px solid var(--linea); background:var(--fondo);
}
.act-mini img{ width:100%; height:100%; object-fit:cover; display:block; }

.act-acciones{ display:flex; align-items:center; gap:8px; }
.act-acciones form{ margin:0; }
.act-nota{ font-size:11.5px; color:var(--gris); }

.act-borrar{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:9px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff; color:var(--rojo);
  font-family:inherit; font-size:12.5px; font-weight:650;
}
.act-borrar:hover{ background:var(--rojo-tenue); border-color:var(--rojo); }
.act-borrar svg{ width:14px; height:14px; }

/* ===========================================================================
   REPORTES DE TRABAJO
   =========================================================================== */

.inf-periodo{
  display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap; margin-bottom:12px;
}
.inf-periodo .campo{ flex:1 1 130px; margin-bottom:0; }
.inf-periodo .btn{ flex:0 0 auto; padding-block:12px; }

.inf-cifras{ display:flex; gap:9px; margin-bottom:12px; }
.inf-cifras div{
  flex:1 1 0; padding:12px 14px; border-radius:12px;
  border:1px solid var(--az-borde); background:#fff; text-align:center;
}
.inf-cifras b{ display:block; font-size:22px; font-weight:750; color:var(--az-hond); }
.inf-cifras span{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris); }

.inf-previo{ margin-bottom:14px; }
.inf-ojo{ margin-bottom:14px; }

.inf-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px; }
.inf-fila{
  display:flex; align-items:center; gap:11px;
  padding:12px 13px; border-radius:12px; background:#fff;
  border:1px solid var(--linea); box-shadow:inset 3px 0 0 var(--ok);
}
.inf-tx{ flex:1 1 auto; min-width:0; }
.inf-tx strong{ display:block; font-size:14px; font-weight:700; color:var(--tinta); }
.inf-tx span{ display:block; margin-top:2px; font-size:11.5px; color:var(--gris); }
.inf-codigo{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px !important; letter-spacing:.04em;
}
.inf-pie{ margin-top:12px; text-align:center; }

/* ===========================================================================
   VERIFICACION PUBLICA DEL REPORTE
   ===========================================================================
   La abre el QR del papel. Quien llega casi nunca tiene cuenta, asi que no
   hay barra ni menu: solo lo que hace falta para cotejar.
   =========================================================================== */

.ver-cont{ max-width:620px; padding-top:24px; }
.ver-marca{ text-align:center; margin-bottom:18px; }
.ver-marca img{ height:44px; width:auto; }

.ver-caja{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:20px 18px; border-radius:14px; margin-bottom:16px;
}
.ver-caja.bien{ background:#e9f4ee; border:1px solid #cfe3d5; }
.ver-caja.mal{  background:var(--rojo-tenue); border:1px solid #e6c3c0; }
.ver-ico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:10px; border-radius:50%;
  background:#fff;
}
.ver-caja.bien .ver-ico{ color:var(--ok); }
.ver-caja.mal  .ver-ico{ color:var(--rojo); }
.ver-ico svg{ width:24px; height:24px; }
.ver-caja strong{ font-size:16.5px; font-weight:750; }
.ver-caja.bien strong{ color:#1f5e42; }
.ver-caja.mal  strong{ color:#8c332e; }
.ver-caja p{ margin:5px 0 0; font-size:12.5px; line-height:1.45; }
.ver-caja.bien p{ color:#2f6b52; }
.ver-caja.mal  p{ color:#8c332e; }

.ver-datos{
  padding:4px 14px; border-radius:12px; background:#fff;
  border:1px solid var(--az-borde); margin-bottom:18px;
}
.ver-datos div{
  display:flex; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--linea);
}
.ver-datos div:last-child{ border-bottom:0; }
.ver-datos span{ flex:0 0 92px; font-size:11px; color:var(--gris);
  text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.ver-datos strong{ flex:1 1 auto; min-width:0; font-size:13.5px;
  color:var(--tinta); overflow-wrap:anywhere; }
.ver-codigo{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.06em; font-size:12.5px !important;
}

.ver-tit{ margin:0 0 10px; font-size:13px; font-weight:750; color:var(--az-hond);
  text-transform:uppercase; letter-spacing:.05em; }

.ver-lista{ margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:10px; }
.ver-lista li{ padding-left:4px; }
.ver-fila-cab{ display:flex; gap:9px; flex-wrap:wrap; align-items:baseline; }
.ver-fecha{ font-size:12px; font-weight:700; color:var(--az-hond);
  font-variant-numeric:tabular-nums; }
.ver-sitio{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--gris);
  overflow-wrap:anywhere; }
.ver-nfotos{ font-size:11px; color:var(--gris); }
.ver-lista p{ margin:2px 0 0; font-size:13.5px; line-height:1.35; color:var(--tinta);
  overflow-wrap:anywhere; }

.ver-nota{ margin:20px 0 0; font-size:11.5px; line-height:1.5; color:var(--gris); }
.ver-pie{ margin:26px 0 0; text-align:center; font-size:11px; color:var(--gris); }

/* ---------- Tipo de trabajo y momento ---------- */
/* El tipo sale del catalogo, asi que es un dato cerrado y se pinta como tal:
   pastilla, no texto suelto. Se distingue del sitio de un vistazo. */
.act-tipo{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:var(--az-tenue); color:var(--az-hond);
  font-size:10.5px; font-weight:750; letter-spacing:.03em;
  white-space:nowrap;
}
.act-fila.cerrada .act-tipo{ background:var(--linea); color:var(--gris); }

/* Fecha y hora en la misma linea: son un solo dato partido en dos campos */
.act-cuando{ display:flex; gap:9px; }
.act-cuando .campo{ flex:1 1 0; min-width:0; }

/* ---------- Añadir renglones: lista de lo hecho, e insumos ---------- */
/* Escribir y pulsar Añadir. Un renglón por toque: se teclea de pie y con el
   móvil en una mano, y un párrafo largo ahí no lo escribe nadie. */
.act-add{ display:flex; gap:8px; }
.act-add input[type="text"]{
  flex:1 1 auto; min-width:0;
  padding:12px; border-radius:11px; background:#fff;
  border:1px solid var(--az-borde); font-family:inherit; font-size:15px;
  color:inherit;
}
.act-add input:focus, .act-add select:focus{
  outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue);
}
.act-add button{
  flex:0 0 auto; padding:12px 16px; border-radius:11px; cursor:pointer;
  border:1px solid var(--az-hond); background:var(--az-hond); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700;
}
.act-add button:hover{ background:var(--az-osc); }
.act-add button:disabled{ opacity:.45; cursor:default; }

/* Insumos: en el móvil el desplegable va en su propia línea, que con el
   nombre completo de un insumo no queda ancho para nada más */
.act-add-ins{ flex-wrap:wrap; }
.act-add-ins .act-sel{ flex:1 1 100%; }
.act-add-ins input[type="number"]{
  flex:0 0 92px; width:92px;
  padding:12px; border-radius:11px; background:#fff;
  border:1px solid var(--az-borde); font-family:inherit; font-size:15px;
  color:inherit; text-align:center;
}
.act-add-ins button{ flex:1 1 auto; }

.act-items{
  list-style:none; margin:9px 0 0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.act-items:empty{ display:none; }
.act-items li{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:10px;
  background:var(--fondo); border:1px solid var(--linea);
}
.act-item-n{
  flex:0 0 auto; font-size:11.5px; font-weight:700; color:var(--gris);
  font-variant-numeric:tabular-nums;
}
.act-item-cant{
  flex:0 0 auto; min-width:30px; padding:2px 7px; border-radius:7px;
  background:var(--az-hond); color:#fff;
  font-size:11.5px; font-weight:750; text-align:center;
  font-variant-numeric:tabular-nums;
}
.act-item-tx{
  flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--tinta);
  overflow-wrap:anywhere;
}
.act-item-x{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; cursor:pointer;
  border:0; background:transparent; color:var(--gris);
  font-family:inherit; font-size:19px; line-height:1;
}
.act-item-x:hover{ background:var(--rojo-tenue); color:var(--rojo); }

/* ---------- Cómo se leen después ---------- */
.act-hechas{
  margin:0 0 8px; padding:0 0 0 16px;
  font-size:12.5px; line-height:1.45; color:var(--gris);
}
.act-hechas li{ overflow-wrap:anywhere; }

.act-insumos{
  list-style:none; display:flex; flex-wrap:wrap; gap:5px;
  margin:0 0 8px; padding:0;
}
.act-insumos li{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:999px;
  background:#f3f0f8; color:#553c73;
  font-size:11px; font-weight:600;
}
.act-insumos li b{ font-weight:800; font-variant-numeric:tabular-nums; }

/* ---------- Elegir el trabajo: categoría y detalle ---------- */
/* En el móvil cada control ocupa su propia línea: con el nombre completo de
   un detalle no queda ancho para poner dos al lado. */
.act-add-trab{ flex-wrap:wrap; }
.act-add-trab .act-sel{ flex:1 1 100%; }
.act-add-trab .act-otro{
  flex:1 1 100%;
  padding:12px; border-radius:11px; background:#fff;
  border:1px solid var(--az); font-family:inherit; font-size:15px; color:inherit;
}
.act-add-trab .act-otro[hidden]{ display:none; }
.act-add-trab button{ flex:1 1 auto; }

/* La categoría, delante del detalle en cada renglón ya añadido */
.act-item-cat{
  flex:0 0 auto; padding:2px 8px; border-radius:7px;
  background:var(--az-tenue); color:var(--az-hond);
  font-size:10.5px; font-weight:750; letter-spacing:.03em;
  white-space:nowrap;
}

/* ---------- Cómo se leen después ---------- */
/* Una línea por categoría, con sus detalles al lado. Repetir la categoría en
   cada detalle la escribía tres veces seguidas y costaba ver dónde cambiaba. */
.act-trab{
  display:flex; gap:8px; align-items:baseline;
  margin:0 0 5px; font-size:13px; line-height:1.4; color:var(--tinta);
  overflow-wrap:anywhere;
}
.act-trab-cat{
  flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--az); text-transform:uppercase;
}

/* ===========================================================================
   ENVIANDO
   ===========================================================================
   Registrar una actividad sube cinco fotos y generar un reporte arma un PDF
   con todas: son segundos en los que la pantalla no cambia. Sin señal, la
   reacción natural es volver a pulsar, y salían dos actividades iguales.
   =========================================================================== */

/* Los toques se apagan de inmediato. El disabled del botón llega un turno
   después, por JS: deshabilitarlo dentro del submit le quita su name al envío
   (ver public/js/app.js). */
form.enviando{ pointer-events:none; }

.cargando{ position:relative; color:transparent !important; opacity:.9; }

/* El contenido se esconde con visibility y no se quita: así el botón conserva
   su tamaño y la fila no da un salto al empezar a girar. */
.cargando svg, .cargando span, .cargando b, .cargando i{ visibility:hidden; }

.cargando::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
  border:2px solid var(--az);
  border-top-color:transparent;
  border-radius:50%;
  animation:gira .6s linear infinite;
}

/* Sobre fondo oscuro el aro va en blanco. currentColor no sirve: la regla de
   arriba lo dejó en transparent para esconder el texto. */
.btn-pri.cargando::after,
.act-add button.cargando::after,
.act-modos button.on.cargando::after{ border-color:#fff; border-top-color:transparent; }

@keyframes gira{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .cargando::after{ animation-duration:1.8s; }
}

/* ===========================================================================
   REPORTES: el número manda
   =========================================================================== */

.inf-num{
  font-size:16px !important; font-weight:800 !important;
  letter-spacing:.02em; color:var(--az-hond) !important;
  font-variant-numeric:tabular-nums;
}
.inf-periodo-tx{
  display:block; margin-top:2px;
  font-size:12.5px; color:var(--tinta);
}
.inf-meta{
  display:block; margin-top:3px;
  font-size:11px; color:var(--gris);
}

/* Solo el icono y la palabra PDF: la fila gana ancho para el número, que es
   lo que se busca al repasar la lista. */
.inf-pdf{
  flex:0 0 auto;
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 12px; border-radius:11px; text-decoration:none;
  border:1px solid var(--rojo-tenue); background:var(--rojo-tenue);
  color:var(--rojo);
}
.inf-pdf:hover{ border-color:var(--rojo); }
.inf-pdf svg{ width:19px; height:19px; }
.inf-pdf b{ font-size:9.5px; font-weight:800; letter-spacing:.06em; }

/* ===========================================================================
   TURNO DE GUARDIA
   ===========================================================================
   Se usa de noche, de pie, a veces con guantes y con una sola mano. Todo
   grande, poco texto, y lo urgente en rojo.
   =========================================================================== */

/* ---------- Sin turno abierto: una sola cosa que hacer ---------- */
.gu-caja{
  padding:22px 18px; margin-bottom:16px; text-align:center;
  border:1px solid var(--az-borde); border-radius:var(--r); background:#fff;
}
.gu-caja-ico{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin:0 auto 12px; border-radius:50%;
  background:var(--az-tenue); color:var(--az-hond);
}
.gu-caja-ico svg{ width:26px; height:26px; }
.gu-caja strong{ display:block; font-size:16.5px; font-weight:750; color:var(--tinta); }
.gu-caja p{ margin:6px 0 16px; font-size:12.5px; line-height:1.5; color:var(--gris); }
.gu-caja .campo{ text-align:left; }

/* ---------- Turno abierto ---------- */
.gu-turno{
  padding:14px 15px; margin-bottom:12px;
  border-radius:var(--r); background:#fff; border:1px solid var(--az-borde);
}
.gu-turno-cab{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.gu-turno-cab strong{ display:block; font-size:14.5px; font-weight:750; color:var(--az-hond); }
.gu-turno-cab span{ display:block; margin-top:1px; font-size:12px; color:var(--gris); }

/* El punto que late: se ve de un vistazo que el turno corre */
.gu-punto-vivo{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 0 rgba(47,125,91,.5);
  animation:late 2s infinite;
}
@keyframes late{
  70%{ box-shadow:0 0 0 9px rgba(47,125,91,0); }
  100%{ box-shadow:0 0 0 0 rgba(47,125,91,0); }
}
@media (prefers-reduced-motion:reduce){ .gu-punto-vivo{ animation:none; } }

.gu-cifras{ display:flex; gap:8px; }
.gu-cifras div{
  flex:1 1 0; padding:10px 8px; text-align:center;
  border-radius:11px; background:var(--fondo);
}
.gu-cifras b{ display:block; font-size:20px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums; }
.gu-cifras b i{ font-style:normal; font-size:13px; font-weight:650; color:var(--gris); }
.gu-cifras span{ display:block; margin-top:1px; font-size:10.5px; color:var(--gris); }
.gu-cifras .ojo{ background:var(--rojo-tenue); }
.gu-cifras .ojo b{ color:var(--rojo); }
.gu-cifras .ojo span{ color:#8c332e; }

.gu-reportar{ margin-bottom:8px; }
.gu-reportar svg{ width:18px; height:18px; }
.gu-nota-qr{ margin:0 0 14px; text-align:center; }

/* ---------- Los que faltan ---------- */
.gu-faltan{
  margin-bottom:14px; padding:11px 13px;
  border-radius:11px; background:var(--ambar-tenue, #fbf3e3); border:1px solid #e3c893;
}
.gu-faltan summary{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  font-size:13px; color:#7d5b18; list-style:none;
}
.gu-faltan summary::-webkit-details-marker{ display:none; }
.gu-faltan summary strong{ font-size:15px; font-weight:800; }
.gu-faltan summary svg{ width:15px; height:15px; margin-left:auto; transition:transform .15s; }
.gu-faltan[open] summary svg{ transform:rotate(180deg); }
.gu-faltan ul{ margin:9px 0 0; padding:0 0 0 4px; list-style:none;
  display:flex; flex-direction:column; gap:6px; }
.gu-faltan li a{ font-size:12.5px; color:#7d5b18; text-decoration:underline; }

/* ---------- Lo reportado ---------- */
.gu-tit{ margin:18px 0 9px; font-size:13px; font-weight:750; color:var(--az-hond);
  text-transform:uppercase; letter-spacing:.05em; }

.gu-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px; }
.gu-nov{
  padding:11px 13px; border-radius:11px; background:#fff;
  border:1px solid var(--linea);
}
.gu-nov.ok{ box-shadow:inset 3px 0 0 var(--ok); }
.gu-nov.ojo{ box-shadow:inset 3px 0 0 var(--rojo); background:#fffbfb; }
.gu-nov-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gu-hora{ font-size:12.5px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums; }
.gu-tipo{ font-size:11.5px; font-weight:800; letter-spacing:.03em; }
.gu-nov.ok .gu-tipo{ color:var(--ok); }
.gu-nov.ojo .gu-tipo{ color:var(--rojo); }
.gu-via{
  margin-left:auto; padding:1px 7px; border-radius:999px;
  background:var(--az-tenue); color:var(--az-hond);
  font-size:9.5px; font-weight:800; letter-spacing:.06em;
}
.gu-punto{ display:block; margin-top:2px; font-size:11.5px; color:var(--gris);
  overflow-wrap:anywhere; }
.gu-nov p{ margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--tinta);
  overflow-wrap:anywhere; }
.gu-nov .act-miniaturas{ margin-top:8px; margin-bottom:0; }

/* ---------- Cerrar ---------- */
.gu-cerrar{ margin-top:20px; padding-top:16px; border-top:1px solid var(--linea); }
.gu-btn-cerrar{
  background:var(--az-hond); border-color:var(--az-hond); color:#fff;
}
.gu-btn-cerrar:hover{ background:var(--az-osc); }

/* ---------- Emergencia ---------- */
/* Abajo del todo a propósito: es lo último que se encuentra al bajar, no algo
   que se roce al entrar. Y aun así pide confirmación. */
.gu-sos{
  margin-top:26px; padding:14px; border-radius:var(--r);
  background:var(--rojo-tenue); border:1px solid #e6c3c0;
}
.gu-sos .campo span{ color:#8c332e; }
.gu-btn-sos{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px; border:0; border-radius:12px; cursor:pointer;
  background:var(--rojo); color:#fff;
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.02em;
}
.gu-btn-sos:hover{ filter:brightness(1.08); }
.gu-btn-sos svg{ width:19px; height:19px; }

/* ---------- Elegir punto ---------- */
.gu-puntos{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px; }
.gu-puntos li[hidden]{ display:none; }
.gu-area{
  margin-top:12px; padding:0 2px 3px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  color:var(--gris); text-transform:uppercase;
}
.gu-puntos li a{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; border-radius:11px; text-decoration:none;
  background:#fff; border:1px solid var(--linea); color:inherit;
}
.gu-puntos li a:hover{ border-color:var(--az); background:var(--az-tenue); }
.gu-p-nom{ flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:650;
  color:var(--tinta); overflow-wrap:anywhere; }
.gu-p-sub{ flex:0 0 auto; font-size:11px; color:var(--gris); }
.gu-puntos li a svg{ flex:0 0 auto; width:15px; height:15px; color:var(--gris); }

/* ---------- Cabecera del punto al reportar ---------- */
.gu-punto-cab{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:13px 14px; margin-bottom:12px;
  border-radius:var(--r); background:#fff; border:1px solid var(--az-borde);
}
.gu-punto-cab.qr{ border-color:var(--ok); background:#f4faf7; }
.gu-punto-ico{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az-hond);
}
.gu-punto-cab.qr .gu-punto-ico{ background:#e9f4ee; color:var(--ok); }
.gu-punto-ico svg{ width:19px; height:19px; }
.gu-punto-cab strong{ display:block; font-size:15px; font-weight:750; color:var(--tinta);
  overflow-wrap:anywhere; }
.gu-punto-cab > div{ flex:1 1 auto; min-width:0; }
.gu-punto-cab > div span{ display:block; margin-top:1px; font-size:11.5px; color:var(--gris); }
.gu-sello-qr{
  padding:3px 9px; border-radius:999px; background:var(--ok); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.05em;
}

/* ---------- Lo último reportado aquí ---------- */
.gu-ultimo{
  padding:11px 13px; margin-bottom:14px;
  border-radius:11px; background:var(--fondo); border:1px solid var(--linea);
}
.gu-ultimo > span{ font-size:9.5px; font-weight:800; letter-spacing:.06em;
  color:var(--gris); text-transform:uppercase; }
.gu-ultimo strong{ display:block; margin-top:3px; font-size:13px; font-weight:750;
  color:var(--tinta); }
.gu-ultimo em{ display:block; margin-top:1px; font-size:11px; font-style:normal;
  color:var(--gris); }
.gu-ultimo p{ margin:5px 0 0; font-size:12.5px; line-height:1.4; color:var(--gris);
  overflow-wrap:anywhere; }

/* ---------- Botones rápidos de novedad ---------- */
/* Los dos casos del 95%: grandes y a un toque, no escondidos en un
   desplegable de dieciséis opciones. */
.gu-rapidos{ display:flex; flex-direction:column; gap:8px; margin-bottom:9px; }
.gu-rapido{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 15px; cursor:pointer; text-align:left;
  border:1px solid var(--az-borde); border-radius:12px; background:#fff;
  font-family:inherit; font-size:14.5px; font-weight:700; color:var(--tinta);
}
.gu-rapido svg{ flex:0 0 auto; width:18px; height:18px; color:var(--linea); }
.gu-rapido:hover{ border-color:var(--ok); }
.gu-rapido.on{ border-color:var(--ok); background:#e9f4ee; color:#1f5e42; }
.gu-rapido.on svg{ color:var(--ok); }

.campo.exigido span::after{ content:''; }

.gu-atender{ color:var(--rojo); font-weight:800; }

/* ===========================================================================
   HOJA DE QR IMPRIMIBLE
   =========================================================================== */

.qr-hoja{ max-width:900px; }
.qr-intro h2{ margin:0 0 6px; font-size:17px; font-weight:750; color:var(--az-hond); }
.qr-intro p{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--gris); }

.qr-rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px; margin-top:18px;
}
.qr-ficha{
  padding:12px 10px; text-align:center;
  border:1px dashed var(--az-borde); border-radius:10px; background:#fff;
  break-inside:avoid;
}
.qr-ficha strong{ display:block; margin-top:8px; font-size:12.5px; font-weight:750;
  color:var(--tinta); overflow-wrap:anywhere; }
.qr-ficha span{ display:block; font-size:10.5px; color:var(--gris); }
.qr-ficha em{ display:block; margin-top:3px; font-size:9px; font-style:normal;
  color:var(--linea); font-family:ui-monospace, Menlo, Consolas, monospace; }

.qr-caja{ display:flex; justify-content:center; }
/* En tabla y no en canvas: al imprimir, las celdas salen nítidas a cualquier
   resolución; un canvas se imprime a la de la pantalla. */
.qr-tabla{ border-collapse:collapse; width:118px; height:118px; }
.qr-tabla td{ padding:0; background:#fff; }
.qr-tabla td.on{ background:#000; }

@media print{
  .barra, .no-imprimir, .cuenta-velo{ display:none !important; }
  .qr-hoja{ padding:0; max-width:none; }
  .qr-rejilla{ grid-template-columns:repeat(4, 1fr); gap:8px; }
  .qr-ficha{ border-style:solid; border-color:#ccc; }
}

/* ===========================================================================
   DESPLEGABLES PROPIOS
   ===========================================================================
   El <select> del sistema sigue en la página, invisible: es lo que viaja en
   el envío y lo que valida el navegador. Encima va un botón con la misma
   pinta que los demás campos, y al pulsarlo se abre una hoja con buscador.
   =========================================================================== */

.sel{ position:relative; }

/* NO se esconde con display:none.
   Un campo con display:none se salta la validación del navegador: un select
   obligatorio y vacío impediría enviar el formulario sin decir por qué. Así
   sigue ocupando su sitio y el navegador puede enfocarlo y poner su globo de
   aviso justo encima del botón. */
.sel-nativo{
  position:absolute; left:0; top:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
  border:0; padding:0; margin:0;
  -webkit-appearance:none; appearance:none;
}

.sel-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px; cursor:pointer; text-align:left;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
  font-family:inherit; font-size:15px; color:var(--tinta);
}
.sel-btn:hover{ border-color:var(--az); }
.sel-btn:focus-visible{ outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue); }
.sel-btn-tx{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Sin elegir: se lee como un hueco por rellenar, no como un dato puesto */
.sel-btn.vacio .sel-btn-tx{ color:var(--gris); }
.sel-btn svg{ flex:0 0 auto; width:17px; height:17px; color:var(--gris); }

.sel-btn:disabled{ cursor:default; background:var(--fondo); color:var(--gris); }
.sel-btn:disabled:hover{ border-color:var(--az-borde); }

/* ---------- La hoja ---------- */
.sel-velo{
  position:fixed; inset:0; z-index:9200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(26,40,52,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:sel-entra .16s ease-out;
}
.sel-velo[hidden]{ display:none; }
@media (min-width:700px){ .sel-velo{ align-items:center; padding:20px; } }

.sel-hoja{
  display:flex; flex-direction:column;
  width:min(560px,100%); max-height:88%;
  background:#fff; border-radius:18px 18px 0 0; overflow:hidden;
  box-shadow:0 -12px 40px rgba(20,32,42,.3);
  animation:sel-sube .2s cubic-bezier(.2,.9,.3,1);
}
@media (min-width:700px){
  .sel-hoja{ border-radius:16px; max-height:80%; box-shadow:0 20px 60px rgba(20,32,42,.35); }
}

@keyframes sel-entra{ from{ opacity:0; } }
@keyframes sel-sube{ from{ opacity:0; transform:translateY(14px); } }
@media (prefers-reduced-motion:reduce){
  .sel-velo, .sel-hoja{ animation:none; }
}

.sel-hd{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 10px; border-bottom:1px solid var(--linea);
}
.sel-tit{ flex:1 1 auto; min-width:0; font-size:16px; font-weight:700; color:var(--az-hond); }
.sel-x{
  flex:0 0 auto; width:32px; height:32px; border:0; border-radius:9px;
  cursor:pointer; background:var(--linea); color:var(--gris);
  font-size:20px; line-height:1; font-family:inherit;
}
.sel-x:hover{ background:var(--rojo-tenue); color:var(--rojo); }

.sel-busca{ position:relative; padding:12px 16px 8px; }
.sel-busca[hidden]{ display:none; }
.sel-busca svg{
  position:absolute; left:27px; top:50%; transform:translateY(-30%);
  width:16px; height:16px; color:var(--gris); pointer-events:none;
}
.sel-busca input{
  width:100%; padding:11px 12px 11px 36px;
  border:1px solid var(--az-borde); border-radius:11px; background:#fff;
  font-family:inherit; font-size:15px; color:inherit;
}
.sel-busca input:focus{ outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue); }

.sel-lista{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; margin:0; padding:4px 10px 6px;
}
.sel-lista li{
  display:flex; align-items:center; gap:9px;
  padding:13px 12px; border-radius:11px; cursor:pointer;
  border:1px solid transparent;
  font-size:15px; color:var(--tinta);
}
.sel-lista li span{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.sel-lista li:hover{ background:var(--fondo); }
.sel-lista li:focus-visible{ outline:none; background:var(--az-tenue); border-color:var(--az); }
/* La que ya está puesta, marcada: al reabrir se ve enseguida cuál era */
.sel-lista li.on{ background:var(--az-tenue); border-color:var(--az-borde); font-weight:650; }
/* La de "elige…" no es un dato, es un hueco */
.sel-lista li.hueco{ color:var(--gris); font-style:italic; }
.sel-ok{ flex:0 0 auto; width:17px; height:17px; color:var(--az); }

.sel-pie{
  flex:0 0 auto; margin:0;
  padding:9px 16px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linea); background:var(--fondo);
  font-size:11.5px; color:var(--gris); text-align:center;
}

/* Con el teclado abierto quedan ~330 px: se recorta el marco para que la
   lista no se quede en una fila. Mismo criterio que el modal de ventanilla. */
.sel-velo.sel-corto .sel-hoja{ max-height:100%; }
.sel-velo.sel-corto .sel-hd{ padding:9px 16px 7px; }
.sel-velo.sel-corto .sel-hd .sel-tit{ font-size:14.5px; }
.sel-velo.sel-corto .sel-busca{ padding:8px 16px 6px; }
.sel-velo.sel-corto .sel-busca input{ padding-block:9px; }
.sel-velo.sel-corto .sel-lista li{ padding:10px 12px; }
.sel-velo.sel-corto .sel-pie{ display:none; }

/* ---------- Los que ya tenían estilo propio ---------- */
/* act-sel y los <select> de los filtros se pintaban a mano; ahora la cara la
   pone el botón, así que el nativo escondido no debe conservar su caja. */
.sel .act-sel, .sel select{ box-shadow:none !important; }

/* ===========================================================================
   LO QUE NO ES UNA CAJA DE TEXTO NO LLEVA LA CAJA DEL CAMPO
   ===========================================================================
   ".campo input" les daba width:100% y relleno a TODOS los input del campo,
   incluidos los que van escondidos (los de archivo) y los radios de
   prioridad, que además son position:absolute. Un elemento absoluto del ancho
   de la pantalla, repetido cuatro veces, dejaba la página en 635 px de ancho
   con desplazamiento horizontal: la app dejaba de parecer una app.

   Van con más peso que ".campo input" -dos clases contra clase+etiqueta- para
   que gane esto y no aquello.
   =========================================================================== */

.campo input[type="radio"],
.campo input[type="checkbox"]{
  width:auto; padding:0; border:0; background:none;
}

/* Los escondidos de verdad: ocupan un píxel y no arrastran la página */
.campo .entrada-oculta,
.campo .opcion input,
.opcion input{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; border:0; background:none;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Red de seguridad: en un teléfono nada justifica desplazarse a los lados.
   Si algún día se cuela otro elemento ancho, se verá recortado en vez de
   descuadrar la pantalla entera. Lo que sí necesita ancho -una tabla, un
   bloque de código- se desplaza dentro de su propia caja. */
body{ overflow-x:hidden; }

/* ---------- Panel para las listas cortas ---------- */
/* Con menos de diez opciones, una hoja que tapa la pantalla entera para
   elegir entre tres cosas es un aspaviento: se pierde de vista el formulario
   y hay que volver a situarse. */
.sel-velo.sel-panel{
  align-items:flex-start; justify-content:flex-start; padding:0;
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  animation:none;
}
.sel-velo.sel-panel .sel-hoja{
  position:absolute;
  width:auto; max-height:none;
  border-radius:12px;
  box-shadow:0 12px 34px rgba(20,32,42,.22), 0 0 0 1px var(--az-borde);
  animation:sel-cae .13s ease-out;
}
@keyframes sel-cae{ from{ opacity:0; transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce){ .sel-velo.sel-panel .sel-hoja{ animation:none; } }

.sel-velo.sel-panel .sel-hd[hidden],
.sel-velo.sel-panel .sel-pie[hidden]{ display:none; }
.sel-velo.sel-panel .sel-lista{ padding:6px; }
.sel-velo.sel-panel .sel-lista li{ padding:11px 11px; font-size:14.5px; }

/* ===========================================================================
   LOS DESPLEGABLES, MÁS SUAVES
   ===========================================================================
   La primera versión les puso a todos la misma caja blanca con borde azul,
   estuvieran rellenos o no. En un formulario con seis, eso son seis cajas
   blancas gritando lo mismo y ninguna diciendo cuál falta.

   Ahora el vacío se ve como un hueco -fondo apagado, borde tenue, letra
   gris- y el relleno como un dato -blanco, borde marcado, letra oscura-. Se
   sabe de un vistazo qué queda por hacer sin leer nada.
   =========================================================================== */

.sel-btn{
  gap:8px; padding:11px 12px;
  border:1px solid var(--az-borde); border-radius:12px;
  background:#fff; font-size:15px; font-weight:600; color:var(--tinta);
  transition:border-color .15s, background .15s, box-shadow .15s;
}

/* Sin elegir: apagado. No compite con lo que ya está puesto. */
.sel-btn.vacio{
  background:var(--fondo);
  border-color:var(--linea);
  font-weight:500; color:var(--gris);
}
.sel-btn.vacio:hover{ background:#fff; border-color:var(--az-borde); }

.sel-btn:hover{ border-color:var(--az-borde); }
.sel-btn:not(.vacio):hover{ border-color:var(--az); }

/* Abierto y con el foco se ven igual: el campo del que se está hablando */
.sel-btn:focus-visible,
.sel-btn.abierto{
  outline:none; background:#fff;
  border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue);
}

.sel-btn svg{
  width:16px; height:16px; color:var(--az-borde);
  transition:transform .18s ease, color .15s;
}
.sel-btn:not(.vacio) svg{ color:var(--az); }
.sel-btn.abierto svg{ transform:rotate(180deg); color:var(--az); }

/* Apagado: ni blanco ni gris del todo. Se lee "todavía no", no "roto".
   Sin borde punteado ni tachados: el motivo lo dice la nota del campo. */
.sel-btn:disabled{
  background:var(--fondo); border-color:var(--linea);
  color:var(--az-borde); font-weight:500;
}
.sel-btn:disabled svg{ color:var(--az-borde); }

@media (prefers-reduced-motion:reduce){
  .sel-btn, .sel-btn svg{ transition:none; }
}

/* ===========================================================================
   REGISTRAR ACTIVIDAD: DOS COLUMNAS Y EL BOTÓN DEBAJO
   ===========================================================================
   Torre y piso, categoría y detalle, insumo y cantidad: son pares, y en una
   sola columna el formulario se hacía largísimo -había que desplazar tres
   pantallas para registrar una limpieza-. Puestos de dos en dos se ve el
   bloque entero de una vez.

   El botón de añadir va abajo y de lado a lado: es el final del gesto, no un
   campo más, y al ancho completo se acierta sin mirar.

   Las cajas son ".sel", no los <select>: el desplegable propio envuelve al
   nativo y es el envoltorio el que ocupa sitio ahora.
   =========================================================================== */

.act-sitio,
.act-add-trab,
.act-add-ins{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  align-items:start;
}

/* En rejilla hay que decirlo: si no, el texto largo de una oficina estira la
   columna en vez de recortarse con puntos suspensivos. */
.act-sitio > *, .act-add-trab > *, .act-add-ins > *{ min-width:0; }

/* La oficina, tercera del bloque, de lado a lado: los nombres son largos
   -"OFICINA 12-B, PISO 12"- y a media columna no se lee ninguno */
.act-sitio > .sel:nth-child(3){ grid-column:1 / -1; }

/* Lo que se escribe a mano y el botón, de lado a lado */
.act-add-trab > .act-otro,
.act-add-trab > button,
.act-add-ins > button{ grid-column:1 / -1; }

/* La cantidad ya no necesita ancho fijo: se lo da su columna */
.act-add-ins input[type="number"]{ flex:none; width:100%; }

.act-add-trab > button,
.act-add-ins > button{ padding:13px 16px; }

/* Con sitio de sobra caben los tres de la cadena en fila */
@media (min-width:700px){
  .act-sitio{ grid-template-columns:repeat(3, 1fr); }
  .act-sitio > .sel:nth-child(3){ grid-column:auto; }
  .act-sitio#actSitioArea{ grid-template-columns:1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   El botón de añadir no es el de guardar
   ---------------------------------------------------------------------------
   Al pasarlos a todo el ancho quedaron dos rectángulos azul oscuro que pesaban
   más que "Guardar", que es el que de verdad cierra el formulario. Aquí van
   dibujados, no rellenos: se ven, se aciertan de un dedazo, y no compiten.
   --------------------------------------------------------------------------- */
.act-add-trab > button,
.act-add-ins > button{
  background:#fff; color:var(--az-hond);
  border:1px solid var(--az-borde); font-size:14px;
}
.act-add-trab > button:hover,
.act-add-ins > button:hover{ background:var(--az-tenue); border-color:var(--az); }
.act-add-trab > button::before,
.act-add-ins > button::before{
  content:'+'; margin-right:7px; font-weight:700; color:var(--az);
}

/* Un desplegable apagado espera a otro -el piso, a la torre-. El borde
   discontinuo lo dice sin necesidad de una nota debajo. */
.sel-btn:disabled{ border-style:dashed; }

/* ===========================================================================
   ELEGIR CON UN VISTO
   ===========================================================================
   Es el mismo componente que los botones de novedad del guardia (.gu-rapido),
   con nombre propio porque ya no es solo de allí: cuando las opciones son
   pocas y fijas -cuatro categorías de trabajo, dos formas de decir dónde-,
   verlas todas y tocar una gana a abrir un desplegable y elegir dentro.

   El visto está siempre puesto, en gris casi invisible. Al elegir se pone
   verde. Así el botón no cambia de tamaño al marcarse, que es lo que hace
   saltar la fila entera y perder el sitio.
   =========================================================================== */

.elige{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
.elige > button{
  display:flex; align-items:center; gap:8px; width:100%; min-width:0;
  padding:12px 11px; cursor:pointer; text-align:left;
  border:1px solid var(--az-borde); border-radius:12px; background:#fff;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--tinta);
  transition:border-color .15s, background .15s, color .15s;
}
.elige > button svg{
  flex:0 0 auto; width:17px; height:17px; color:var(--linea);
  transition:color .15s;
}
.elige > button:hover{ border-color:var(--ok); }
.elige > button.on{ border-color:var(--ok); background:#e9f4ee; color:#1f5e42; }
.elige > button.on svg{ color:var(--ok); }

/* La que no hace pareja ocupa la fila entera */
.elige > button.ancho{ grid-column:1 / -1; }

@media (prefers-reduced-motion:reduce){
  .elige > button, .elige > button svg{ transition:none; }
}

/* ¿Dónde?: eran dos pastillas azul oscuro, distintas de todo lo demás.
   Ahora se eligen igual que la categoría, tres centímetros más abajo. */
.act-modos.elige button.on{
  background:#e9f4ee; border-color:var(--ok); color:#1f5e42;
}

/* El aro de espera, ahora que el elegido ya no es azul oscuro: sobre verde
   claro un aro blanco no se ve. Igual el de "Añadir", que dejó de ser relleno. */
.act-modos.elige button.on.cargando::after,
.act-add-trab > button.cargando::after,
.act-add-ins > button.cargando::after{
  border-color:var(--ok); border-top-color:transparent;
}

/* Categoría y detalle, uno al lado del otro: son la pareja del bloque. Lo
   que no cabe se recorta con puntos suspensivos dentro del botón, y al
   abrirlo se lee entero. */
.act-add-trab > .sel{ grid-column:auto; }

/* ---------------------------------------------------------------------------
   El vacío, con un poco de color
   ---------------------------------------------------------------------------
   Estaba gris sobre el gris del fondo -#f4f7f9 la página, #f4f7f9 el campo- y
   los que faltaban por rellenar casi no se veían. Ahora llevan un azul muy
   claro y el borde en azul en vez de en línea gris: se distinguen del fondo,
   se leen como un hueco por rellenar, y siguen sin gritar por encima de los
   que ya tienen dato.
   --------------------------------------------------------------------------- */
.sel-btn.vacio{
  background:#f5fafd;
  border-color:var(--az-borde);
  color:#7a92a6;
}
.sel-btn.vacio svg{ color:#a8c1d4; }
.sel-btn.vacio:hover{ background:#fff; border-color:var(--az); }

/* El que espera a otro campo -el piso, a la torre- se queda un tono por
   debajo: el borde discontinuo ya dice que todavía no es su turno. */
.sel-btn:disabled{
  background:#f7fafc; border-color:#cfe0ec; color:#9db3c4;
}
.sel-btn:disabled svg{ color:#c2d6e4; }

/* ===========================================================================
   SUPERVISIÓN
   ===========================================================================
   Pantalla de solo lectura para secretarías y administración: qué hizo cada
   quien, qué reportaron los guardias y a qué hora entraron y salieron.

   Todo el filtro son enlaces, no controles con guion detrás: en un móvil con
   mala cobertura, un desplegable que espera a que cargue el JavaScript se
   siente roto. Un enlace ya filtrado llega y se pinta.
   =========================================================================== */

/* ---------- Pestañas ---------- */
.sup-pes{
  display:flex; gap:4px; margin-bottom:11px; padding:4px;
  border-radius:13px; background:var(--linea);
}
.sup-pes a{
  flex:1 1 0; min-width:0; padding:9px 6px;
  border-radius:10px; text-align:center; text-decoration:none;
  font-size:13.5px; font-weight:700; color:var(--gris);
}
.sup-pes a:hover{ color:var(--az-osc); }
.sup-pes a.on{ background:#fff; color:var(--az-hond); box-shadow:0 1px 3px rgba(47,59,69,.12); }

/* ---------- La barra de filtros ----------
   Una tarjeta con la búsqueda arriba y los desplegables debajo. Antes eran
   dos filas de pastillas sueltas: se veía cuál estaba elegida pero no QUÉ se
   filtraba, y no había sitio para un filtro más. */
.sup-barra{
  margin-bottom:12px; padding:12px; border-radius:14px;
  background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra);
}

.sup-busca{ position:relative; display:flex; gap:8px; margin-bottom:10px; }
.sup-busca > svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--gris); pointer-events:none;
}
.sup-busca input[type="search"]{
  flex:1 1 auto; min-width:0;
  padding:11px 12px 11px 35px;
  border:1px solid var(--az-borde); border-radius:12px; background:#fbfdfe;
  font-family:inherit; font-size:15px; color:inherit;
  /* La cruz que pinta el navegador se sale del redondeo y además solo borra
     el texto, no recarga sin búsqueda. La de al lado sí. */
  -webkit-appearance:none; appearance:none;
}
.sup-busca input[type="search"]::-webkit-search-cancel-button{ display:none; }
.sup-busca input:focus{
  outline:none; border-color:var(--az); background:#fff;
  box-shadow:0 0 0 3px rgba(82,120,152,.14);
}
.sup-busca .sup-lupa{
  flex:0 0 auto; padding:11px 15px; border-radius:12px; cursor:pointer;
  border:1px solid var(--az-hond); background:var(--az-hond); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700;
}
.sup-busca .sup-lupa:hover{ background:var(--az-osc); }
.sup-limpia{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:40px; border-radius:12px; text-decoration:none;
  border:1px solid var(--az-borde); background:#fff;
  font-size:20px; line-height:1; color:var(--gris);
}
.sup-limpia:hover{ background:var(--rojo-tenue); border-color:var(--rojo); color:var(--rojo); }

/* Periodo y estado en pareja; la persona a lo ancho, que los nombres
   completos no caben a media columna */
.sup-campos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sup-campos .campo{ margin-bottom:0; min-width:0; }
.sup-campos .sup-quien-campo{ grid-column:1 / -1; }

/* El botón solo se ve si no corrió el guion: con él, cambiar un desplegable
   ya envía. Se esconde desde supervision.js, no desde la plantilla. */
#supAplicar{ margin-top:10px; }

/* Quitar los filtros: discreto, y solo sale si hay alguno puesto */
.sup-quitar{ margin:-6px 0 12px; font-size:12.5px; }
.sup-quitar a{ color:var(--az-osc); }

/* ---------- Resumen del periodo ---------- */
.sup-periodo{
  margin:2px 0 12px; font-size:12.5px; color:var(--gris);
}
.sup-periodo strong{ color:var(--az-hond); }
.sup-ojo{ color:var(--ambar); }

/* ---------- La lista ---------- */
.sup-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }

.sup-fila{
  padding:12px 13px; border-radius:14px; background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra);
}
/* Una raya al canto en vez de teñir la tarjeta entera: se localiza de un
   vistazo al recorrer la lista y no estorba la lectura de lo que dice. */
.sup-fila.ojo{ border-left:3px solid var(--rojo); }
.sup-fila.abierto{ border-left:3px solid var(--ok); }
.sup-fila.cerrada{ background:var(--fondo); }

.sup-cab{
  display:flex; align-items:baseline; gap:8px; margin-bottom:6px;
}
.sup-quien{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; font-weight:750; color:var(--az-hond);
}
.sup-fecha{ flex:0 0 auto; font-size:11.5px; color:var(--gris); }

.sup-que{ margin:0 0 7px; font-size:13.5px; line-height:1.45; color:var(--tinta); }
.sup-eti{
  display:inline-block; margin-right:6px; padding:2px 7px;
  border-radius:6px; background:var(--az-tenue); color:var(--az-osc);
  font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  vertical-align:1px;
}
.sup-eti.mal{ background:var(--rojo-tenue); color:var(--rojo); }

.sup-pie{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:11.5px; color:var(--gris);
}
.sup-donde{ flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.sup-fotos{ flex:0 0 auto; }
.sup-suelta{
  flex:0 0 auto; padding:2px 8px; border-radius:999px;
  background:#fdf4e3; color:var(--ambar); font-weight:750;
}
.sup-turno{ flex:0 0 auto; color:var(--az-osc); text-decoration:none; font-weight:650; }
.sup-turno:hover{ text-decoration:underline; }

.sup-nota{
  margin:8px 0 0; padding-top:8px; border-top:1px solid var(--linea);
  font-size:12.5px; line-height:1.45; color:var(--tinta);
}
.sup-nota b{ color:var(--gris); font-weight:700; }

/* ---------- Entrada y salida ---------- */
.sup-turno-horas{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px;
}
.sup-turno-horas > div{
  padding:8px 10px; border-radius:11px; background:var(--fondo);
}
.sup-turno-horas span{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gris);
}
.sup-turno-horas strong{ display:block; font-size:19px; color:var(--az-hond); }
.sup-turno-horas i{ display:block; font-style:normal; font-size:11px; color:var(--gris); }
/* El que sigue en turno: el hueco es el dato, no un fallo de la pantalla */
.sup-turno-horas .pendiente{ background:#eaf5ef; }
.sup-turno-horas .pendiente strong{ font-size:15px; color:#1f5e42; }

/* ===========================================================================
   EQUIPOS: PLAN DE MANTENIMIENTO Y GASTOS
   ===========================================================================
   El semáforo es lo que se lee de un vistazo: una raya al canto de la tarjeta
   con el color del peor estado. Al canto y no tiñendo la tarjeta entera para
   que se localice recorriendo la lista sin que estorbe leer lo que dice.
   =========================================================================== */

.eq-lista{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px; }

.eq-fila{
  padding:12px 13px; border-radius:14px; background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra);
  border-left:3px solid var(--linea);
}
.eq-fila.mal{ border-left-color:var(--rojo); }
.eq-fila.ojo{ border-left-color:var(--ambar); }
.eq-fila.ok{ border-left-color:var(--ok); }

.eq-cab{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.eq-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.eq-ico svg{ width:20px; height:20px; }
.eq-tx{ flex:1 1 auto; min-width:0; }
.eq-tx strong{
  display:block; font-size:14.5px; font-weight:750; color:var(--az-hond);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.eq-tx > span{ display:block; font-size:11.5px; color:var(--gris); }

.eq-sello{
  flex:0 0 auto; padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--linea); color:var(--gris);
}
.eq-sello.mal{ background:var(--rojo-tenue); color:var(--rojo); }
.eq-sello.ojo{ background:#fdf4e3; color:var(--ambar); }
.eq-sello.ok{ background:#e9f4ee; color:#1f5e42; }

/* El horómetro: es el dato que se mira al pasar por el cuarto de máquinas */
.eq-horas{ margin:10px 0 0; font-size:12.5px; color:var(--gris); }
.eq-horas strong{
  font-size:22px; font-weight:750; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.eq-sin{ font-style:italic; }

.eq-planes{ list-style:none; margin:9px 0 0; padding:0;
  display:flex; flex-direction:column; gap:5px; }
.eq-planes li{
  display:flex; align-items:baseline; gap:8px;
  padding:6px 9px; border-radius:9px; background:var(--fondo);
  font-size:12.5px;
}
.eq-planes li.mal{ background:var(--rojo-tenue); }
.eq-planes li.ojo{ background:#fdf4e3; }
.eq-tarea{ flex:1 1 auto; min-width:0; color:var(--tinta); font-weight:650;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eq-cuanto{ flex:0 0 auto; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums; }
.eq-planes li.mal .eq-cuanto{ color:var(--rojo); font-weight:700; }
.eq-planes li.ojo .eq-cuanto{ color:var(--ambar); font-weight:700; }
.eq-mas{ margin:6px 0 0; font-size:11.5px; color:var(--gris); }

/* Los tres accesos directos: el guardia entra a esto, no a leer la ficha */
.eq-acc{
  display:flex; gap:6px; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--linea);
}
.eq-acc a{
  flex:1 1 0; min-width:0; padding:9px 6px; border-radius:10px;
  text-align:center; text-decoration:none;
  border:1px solid var(--az-borde); background:#fff;
  font-size:12.5px; font-weight:700; color:var(--az-osc);
}
.eq-acc a:hover{ border-color:var(--az); background:var(--az-tenue); }

/* ---------- La ficha ---------- */
.eq-ficha{
  padding:14px; border-radius:var(--r); background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra); margin-bottom:16px;
}
.eq-ficha h2{
  display:flex; align-items:center; gap:11px; margin:0 0 12px; font-size:15px;
}
.eq-ficha h2 strong{ display:block; font-size:16px; color:var(--az-hond); }
.eq-ficha h2 span span{ display:block; font-size:11.5px; font-weight:500; color:var(--gris); }

.eq-datos{ display:flex; flex-wrap:wrap; gap:10px; }
.eq-datos > div{ flex:1 1 130px; }
.eq-datos span{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gris);
}
.eq-datos b{ display:block; font-size:14px; color:var(--tinta); }
.eq-datos i{ display:block; font-style:normal; font-size:11px; color:var(--gris); }
.eq-nota{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--linea);
  font-size:12.5px; color:var(--gris); }

.eq-tit{
  margin:20px 0 9px; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase;
}
.eq-vacio-tx{ margin:0 0 12px; font-size:12.5px; color:var(--gris); line-height:1.45; }

.eq-planes-l{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.eq-planes-l li{
  padding:11px 13px; border-radius:13px; background:#fff;
  border:1px solid var(--linea); border-left:3px solid var(--linea);
  box-shadow:var(--sombra);
}
.eq-planes-l li.mal{ border-left-color:var(--rojo); }
.eq-planes-l li.ojo{ border-left-color:var(--ambar); }
.eq-planes-l li.ok{ border-left-color:var(--ok); }
.eq-plan-cab{ display:flex; align-items:center; gap:9px; }
.eq-plan-cab strong{ flex:1 1 auto; min-width:0; font-size:14px; color:var(--az-hond); }
.eq-plan-tx{ margin:5px 0 0; font-size:12px; color:var(--gris); }
.eq-plan-nota{ margin:5px 0 0; font-size:12px; color:var(--tinta); }

.eq-formularios{ display:flex; flex-direction:column; gap:9px; }
.eq-form{ padding:14px; }
/* Cantidad y unidad son una pareja: separadas se leen como dos preguntas */
.eq-par{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.eq-par .campo{ margin-bottom:14px; min-width:0; }

.eq-lecturas{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px;
  border-radius:12px; overflow:hidden; border:1px solid var(--linea); }
.eq-lecturas li{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 12px; background:#fff; font-size:12.5px;
}
.eq-lecturas li:nth-child(even){ background:var(--fondo); }
.eq-lecturas strong{
  flex:0 0 auto; min-width:74px; font-size:14px; color:var(--az-hond);
  font-variant-numeric:tabular-nums;
}
.eq-lecturas span{ flex:1 1 auto; color:var(--gris); }
.eq-lecturas i{ flex:0 0 auto; font-style:normal; font-size:11px; color:var(--gris); }

/* ---------------------------------------------------------------------------
   Guardia: el punto ya recorrido, y la casilla del relevo
   --------------------------------------------------------------------------- */

/* Sin novedad / Hay una novedad: la respuesta en verde, no en rojo. Lo que se
   marca es "ya contesté", no "va todo mal". */
.gu-modo{ margin-bottom:0; }

.gu-avance{
  margin:0 0 10px; font-size:12.5px; color:var(--gris);
}
.gu-avance strong{ color:var(--ok); }

/* El visto delante de cada punto: gris casi invisible mientras falta, verde
   en cuanto se reportó. Ocupa su sitio siempre, para que marcar uno no
   desplace la fila entera. */
.gu-p-visto{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--linea); color:#fff;
  transition:background .15s;
}
.gu-p-visto svg{ width:13px; height:13px; }
.gu-puntos li.hecho .gu-p-visto{ background:var(--ok); }
.gu-puntos li.hecho .gu-p-nom{ color:var(--gris); }
.gu-p-tx{ flex:1 1 auto; min-width:0; }
.gu-p-fl{ flex:0 0 auto; }

/* Solo para quien lee la pantalla en voz alta: el color no puede ser el
   único que diga que ya está hecho. */
.visor-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

/* El nombre y el área pasaron a ir apilados dentro de .gu-p-tx: antes eran
   hermanos directos del enlace y se repartían la fila a lo ancho. */
.gu-p-tx .gu-p-nom{ display:block; font-size:14.5px; }
.gu-p-tx .gu-p-sub{ display:block; font-size:11px; }

/* Pesa más que ".gu-puntos li a svg", que le daba 15px y color gris al visto
   junto con la flecha. Dos clases contra una clase y tres etiquetas. */
.gu-puntos .gu-p-visto svg{ width:13px; height:13px; color:currentColor; }

/* El atributo hidden deja de valer en cuanto una regla propia pone display, y
   ".campo{display:block}" es exactamente eso. Sin esto, esconder un campo con
   JavaScript no hacía nada: en la novedad del guardia, decir "sin novedad"
   dejaba a la vista el tipo y el detalle que ya no venían a cuento.
   Va aquí y no en cada pantalla porque le pasa a todos los .campo. */
.campo[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   Equipos: aviso, pestañas y administración
   --------------------------------------------------------------------------- */

/* El aviso de mantenimiento próximo. Va arriba del todo y con su triángulo:
   quien abre el generador viene a saber si le toca algo, no a leer la serie. */
.eq-alerta{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 13px; border-radius:13px; margin-bottom:14px;
  border:1px solid #e3c893; background:#fdf6e7; color:#7d5b18;
}
.eq-alerta.mal{ border-color:#e8c4c1; background:var(--rojo-tenue); color:#8a2f2a; }
.eq-alerta-ico{ flex:0 0 auto; }
.eq-alerta-ico svg{ width:21px; height:21px; }
.eq-alerta strong{ display:block; font-size:14px; }
.eq-alerta ul{ margin:5px 0 0; padding-left:17px; font-size:12.5px; }
.eq-alerta li{ margin-top:2px; }

/* Las pestañas de la ficha: son botones, no enlaces, porque no recargan */
.eq-pes{ margin-top:18px; }
.eq-pes button{
  flex:1 1 0; min-width:0; padding:9px 6px;
  border:0; border-radius:10px; cursor:pointer; background:none;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--gris);
}
.eq-pes button.on{
  background:#fff; color:var(--az-hond); box-shadow:0 1px 3px rgba(47,59,69,.12);
}
.eq-panel[hidden]{ display:none; }
.eq-panel .eq-tit:first-child{ margin-top:14px; }

/* ---------- Administración ---------- */
/* Lo dado de baja no se esconde: hay que poder volver a activarlo, y ver que
   existe explica por qué el código sigue ocupado. */
.adm-lista .apagada{ opacity:.55; }
.adm-lista .apagada .eq-tx strong{ text-decoration:line-through; }
.eq-planes-l .apagada{ opacity:.55; }

.adm-falta{
  margin:8px 0 0; padding:7px 10px; border-radius:9px;
  background:#fdf4e3; color:var(--ambar);
  font-size:11.5px; font-weight:650;
}

/* El botón de editar una tarea vive en la misma fila que el de quitarla, que
   es un formulario: sin esto uno es un botón y el otro una caja distinta. */
.eq-acc .adm-editar{
  flex:1 1 0; min-width:0; padding:9px 6px; border-radius:10px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--az-osc);
}
.eq-acc .adm-editar:hover{ border-color:var(--az); background:var(--az-tenue); }
.eq-acc form{ flex:1 1 0; min-width:0; display:flex; }
.eq-acc form button{
  flex:1 1 auto; padding:9px 6px; border-radius:10px; cursor:pointer;
  border:1px solid var(--az-borde); background:#fff;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--az-osc);
}
.eq-acc form button:hover{ border-color:var(--az); background:var(--az-tenue); }

/* La placa hace de código del vehículo, y una placa se lee de un tirón: en
   mayúsculas y con los números de ancho fijo para que no bailen. */
.veh-placa{ letter-spacing:.04em; font-variant-numeric:tabular-nums; }
/* Un vehículo dado de baja se ve, pero apagado: sigue explicando por qué esa
   placa aparece en un registro de entrada de hace un año. */
.espacio.apagado{ opacity:.6; }

/* ===========================================================================
   LA PORTADA DE LA FICHA, REHECHA
   ===========================================================================
   Lo que tenía: un degradado de 115 grados que en 375 px recorre tan poco que
   se ve plano y gris; el logo, el RUC, la etiqueta y las cifras todos en
   blancos translúcidos parecidos, así que nada guiaba la vista; y tres
   renglones -nombre, RUC, condición- para dos datos.

   Lo que tiene ahora: el degradado va en diagonal completa y con un punto de
   luz arriba a la derecha, que es lo que le da bulto; el nombre manda; el RUC
   y la condición comparten renglón; y las cifras van sobre un zócalo más
   oscuro, que las agrupa sin necesidad de rayas verticales.
   =========================================================================== */

.fi-hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, #223c54 0%, var(--az-hond) 42%, var(--az) 100%);
  border-radius:20px; padding:20px 18px 0;
  box-shadow:0 8px 24px rgba(26,40,52,.18);
}

.fi-hero-fila{ gap:13px; align-items:center; }

/* El logo tenía el mismo blanco translúcido que todo lo demás y se perdía.
   Con el reflejo interior arriba parece una placa, no un hueco. */
.fi-logo{
  width:54px; height:54px; border-radius:16px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  font-size:19px; font-weight:800; letter-spacing:.03em;
}

.fi-id h1{ font-size:21px; letter-spacing:-.01em; line-height:1.2; }

/* El RUC y la condición, en el mismo renglón */
.fi-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:6px 0 0;
}
.fi-ruc{
  margin:0; font-size:12.5px; color:#aec7dc;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

/* La etiqueta pesaba más que el RUC por el borde y el relleno. Aquí es una
   marca, no un botón: sin borde y un punto más pequeña. */
.fi-hero .emp-tipo{
  padding:3px 9px; font-size:10px; letter-spacing:.07em; border:0;
}
.fi-hero .emp-tipo.arr{ background:rgba(255,255,255,.16); color:#dbe9f4; }
.fi-hero .emp-tipo.pro{ background:rgba(147,222,184,.22); color:#c6f0d9; }

/* ---------- Las cifras ----------
   Zócalo más oscuro en vez de rayas verticales: agrupa igual, y al entrar la
   quinta cifra -los vehículos- las rayas dejaban columnas de 60 px con la
   palabra partida. En rejilla se reparten y bajan de fila cuando toca. */
.fi-cifras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr));
  margin:18px -18px 0; padding:0 8px;
  background:rgba(11,25,38,.16);
  border-top:1px solid rgba(255,255,255,.12);
  border-radius:0 0 20px 20px;
}
.fi-cifras > div{
  padding:12px 4px 14px; text-align:center; border-left:0;
}
.fi-cifras strong{ font-size:19px; letter-spacing:-.01em; }
.fi-cifras span{
  margin-top:3px; font-size:9.5px; letter-spacing:.07em;
  color:rgba(255,255,255,.6);
}

/* Con cinco cifras y 375 px de pantalla, 74 px de mínimo dejaban cuatro
   columnas y la quinta sola en otra fila. Con 58 entran las cinco, que es lo
   que hace que la cinta se lea como una cinta. */
.fi-cifras{ grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)); }
/* El total, detrás del contador: dice de cuántos son los activos sin gastar
   una palabra en la etiqueta. */
.fi-cifras strong small{
  font-size:12px; font-weight:650; color:rgba(255,255,255,.5);
}

/* ===========================================================================
   CASILLA DE VERIFICACIÓN
   ===========================================================================
   No existía y se estaba usando ".opcion", que es la pastilla segmentada:
   marcada se pone azul entera y se lee como un botón encendido. Un botón
   encendido no dice si está marcado ni si es lo único que se puede pulsar.

   Esto es una casilla de las de siempre -cuadro con visto- dentro de una fila
   tocable entera: en un móvil, acertar un cuadro de 20 px con el pulgar y con
   guantes no pasa nunca.
   =========================================================================== */

.casilla{
  display:flex; align-items:flex-start; gap:11px;
  margin:4px 0 16px; padding:12px 13px;
  border:1px solid var(--az-borde); border-radius:12px; background:#fbfdfe;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.casilla:hover{ border-color:var(--az); }

/* El de verdad sigue ahí y es el que viaja en el envío; solo se esconde.
   No con display:none: así el navegador puede enfocarlo y el :checked de
   abajo sigue teniendo a quién mirar. */
.casilla input[type="checkbox"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.casilla-caja{
  flex:0 0 auto; width:21px; height:21px; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--az-borde); border-radius:6px; background:#fff;
  color:transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.casilla-caja svg{ width:13px; height:13px; }

.casilla input:checked ~ .casilla-caja{
  background:var(--az); border-color:var(--az); color:#fff;
}
/* El foco se ve en el cuadro, que es lo que hace de casilla */
.casilla input:focus-visible ~ .casilla-caja{
  outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue);
}
.casilla:has(input:checked){ border-color:var(--az-borde); background:#fff; }

.casilla-tx{
  flex:1 1 auto; min-width:0;
  font-size:14px; font-weight:650; color:var(--tinta); line-height:1.35;
}
/* Lo que pasa al marcarla. Va debajo y en gris: quien ya lo sabe no lo lee,
   y quien duda no tiene que ir a preguntar. */
.casilla-tx i{
  display:block; margin-top:3px;
  font-style:normal; font-size:11.5px; font-weight:500; color:var(--gris);
}

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

/* ---------------------------------------------------------------------------
   Ficha de una incidencia
   --------------------------------------------------------------------------- */
.inc-ficha{
  padding:14px; border-radius:var(--r); background:#fff;
  border:1px solid var(--linea); border-left:3px solid var(--linea);
  box-shadow:var(--sombra); margin-bottom:14px;
}
.inc-ficha.ojo{ border-left-color:var(--ambar); }
.inc-ficha.az{ border-left-color:var(--az); }
.inc-ficha.ok{ border-left-color:var(--ok); }

.inc-cab{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.inc-estado, .inc-prio{
  padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:var(--linea); color:var(--gris);
}
.inc-estado.ojo{ background:#fdf4e3; color:var(--ambar); }
.inc-estado.az{ background:var(--az-tenue); color:var(--az-osc); }
.inc-estado.ok{ background:#e9f4ee; color:#1f5e42; }
.inc-prio.mal{ background:var(--rojo-tenue); color:var(--rojo); }
.inc-fecha{ margin-left:auto; font-size:11.5px; color:var(--gris); }

.inc-detalle{
  margin:0 0 12px; font-size:15px; line-height:1.45; color:var(--tinta);
  overflow-wrap:anywhere;
}

.inc-datos{ display:flex; flex-wrap:wrap; gap:10px; }
.inc-datos > div{ flex:1 1 130px; min-width:0; }
.inc-datos span{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gris);
}
.inc-datos b{ display:block; font-size:13px; color:var(--tinta); overflow-wrap:anywhere; }

/* El estado suelto: mover a EN PROCESO no siempre lleva una visita que anotar */
.inc-estados{ display:flex; align-items:flex-end; gap:8px; margin-bottom:6px; }
.inc-estados .campo{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.inc-estados button{ flex:0 0 auto; padding:12px 16px; }

.inc-alta{ margin-top:12px; }

/* Atender una novedad: el estado de su incidencia y el botón que lleva a
   escribir qué se va a hacer. Separado con una línea porque no es parte de lo
   que reportó el guardia: es lo que viene después. */
.sup-atender{
  display:flex; align-items:center; gap:9px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--linea);
}
.sup-est{
  flex:1 1 auto; min-width:0;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gris);
}
.sup-est.ojo{ color:var(--ambar); }
.sup-est.az{ color:var(--az-osc); }
.sup-est.ok{ color:var(--ok); }
.sup-atender .btn{ flex:0 0 auto; padding:9px 14px; font-size:13px; }

/* El atributo hidden pierde contra cualquier regla que ponga display, y ".btn"
   pone inline-flex. Sin esto, el botón "Filtrar" de supervisión seguía a la
   vista aunque el guion ya enviara solo al cambiar un desplegable. Es la misma
   trampa que tenía ".campo": se arregla en el componente, no en cada pantalla. */
.btn[hidden]{ display:none; }

/* Torre y Persona hacen pareja en la segunda fila. Con Persona ocupando el
   ancho entero, Torre se quedaba sola en su fila y la barra crecía otra
   altura para un solo desplegable. Lo que no cabe se recorta en el botón y se
   lee entero al abrirlo. */
.sup-campos .sup-quien-campo{ grid-column:auto; }

/* El sprite vive en la página pero no se ve: los <symbol> solo existen para
   que los referencien los <use>. Sin esto ocupa una caja vacía arriba. */
.sprite{ display:none; }
/* Los iconos por referencia no traen tamaño propio como los escritos enteros */
.ico{ width:13px; height:13px; flex:0 0 auto; vertical-align:-2px; }

/* ===========================================================================
   ASISTENCIA
   =========================================================================== */

/* ---------- La pantalla del guardia ---------- */
/* Todo lo grande que quepa: se escanea desde medio metro, con el móvil de
   otra persona y a veces con el sol dando en la pantalla. */
.aq-cont{ padding-top:12px; }
.aq-caja{
  padding:14px; border-radius:var(--r); background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra);
}
.aq-marco{ position:relative; }
.aq-marco canvas{
  display:block; width:100%; height:auto; border-radius:12px;
  /* Los píxeles del QR son cuadrados a propósito: suavizados, los lectores
     dudan en los bordes y hay que acercarse más. */
  image-rendering:pixelated;
}
.aq-caido{
  position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border-radius:12px; background:rgba(26,40,52,.93); color:#fff; text-align:center;
}
.aq-caido[hidden]{ display:none; }
.aq-caido strong{ font-size:17px; }
.aq-caido span{ font-size:12.5px; color:#c2d6e4; }

/* La barra se vacía en lo que dura cada código: dice sin leer nada que la
   pantalla está viva y que hay que escanear ahora. */
.aq-barra{
  height:6px; margin-top:12px; border-radius:99px;
  background:var(--linea); overflow:hidden;
}
.aq-barra i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--az), var(--az-hond));
}
.aq-pie{ margin:9px 0 0; font-size:12px; color:var(--gris); text-align:center; }
.aq-pie strong{ color:var(--az-hond); font-variant-numeric:tabular-nums; }

.aq-nota{
  margin-top:14px; padding:12px 14px; border-radius:13px;
  background:var(--az-tenue); font-size:12.5px; line-height:1.5; color:var(--az-osc);
}
.aq-nota strong{ display:block; margin-bottom:3px; color:var(--az-hond); }

/* Con sitio de sobra el QR no crece sin fin: a partir de cierto tamaño no se
   lee mejor, solo ocupa más. */
@media (min-width:520px){
  .aq-marco{ max-width:420px; margin:0 auto; }
}

/* ---------- Hoy, del personal ---------- */
.as-hoy{
  padding:14px; border-radius:var(--r); background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra); margin-bottom:14px;
}
.as-hoy-cab{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.as-hoy-cab > span{
  font-size:10.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris);
}
.as-hoy-cab strong{ flex:1 1 auto; font-size:15px; color:var(--az-hond); }
.as-total{ font-size:19px; font-weight:750; color:var(--ok);
  font-variant-numeric:tabular-nums; }

/* Las cuatro, siempre las cuatro: la que falta se ve como un hueco por
   rellenar. Con una lista de lo hecho no se sabe qué queda del día. */
.as-pasos{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0; }
.as-pasos li{ display:flex; align-items:center; gap:11px; padding:7px 0; }
.as-punto{
  flex:0 0 auto; position:relative;
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--linea); background:#fff; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.as-punto svg{ width:12px; height:12px; }
/* La línea que une los pasos. Va en el punto y no entre elementos para que no
   sobre por debajo del último. */
.as-pasos li:not(:last-child) .as-punto::after{
  content:''; position:absolute; top:100%; left:50%;
  width:2px; height:14px; margin-left:-1px; background:var(--linea);
}
.as-pasos li.hecha .as-punto{ background:var(--ok); border-color:var(--ok); }
.as-pasos li.hecha:not(:last-child) .as-punto::after{ background:var(--ok); }
.as-pasos li.toca .as-punto{ border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue); }

.as-paso-tx{ flex:1 1 auto; min-width:0; }
.as-paso-tx b{ display:block; font-size:14px; font-weight:650; color:var(--tinta); }
.as-paso-tx i{ display:block; font-style:normal; font-size:11.5px; color:var(--gris);
  font-variant-numeric:tabular-nums; }
.as-pasos li.hecha .as-paso-tx i{ color:var(--ok); font-weight:650; }
.as-pasos li.toca .as-paso-tx i{ color:var(--az-osc); font-weight:650; }
.as-pasos li:not(.hecha):not(.toca) .as-paso-tx b{ color:var(--gris); font-weight:500; }

.as-marcar{ margin-bottom:8px; }
.as-ayuda{ margin:0 0 14px; font-size:11.5px; color:var(--gris); line-height:1.45; }
.as-ayuda.mal{ color:var(--rojo); }
.as-listo{ margin-bottom:14px; }

/* ---------- Confirmar la marcación ---------- */
.as-confirma{
  padding:22px 16px; border-radius:var(--r); margin-bottom:14px; text-align:center;
  background:linear-gradient(135deg, #223c54 0%, var(--az-hond) 42%, var(--az) 100%);
  color:#fff; box-shadow:0 8px 24px rgba(26,40,52,.18);
}
.as-confirma-eti{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#aec7dc;
}
.as-confirma strong{ display:block; margin:5px 0 3px; font-size:24px; letter-spacing:-.01em; }
.as-confirma-hora{
  display:block; font-size:15px; color:#dbe9f4; font-variant-numeric:tabular-nums;
}

/* ---------- Los días de atrás ---------- */
.as-mes{
  float:right; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  color:var(--ok); text-transform:none;
}
.as-dias{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.as-dias li{
  padding:11px 13px; border-radius:13px; background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra);
}
.as-dias li.incompleta{ border-left:3px solid var(--ambar); }
.as-dia-cab{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.as-dia-cab strong{ flex:1 1 auto; font-size:13.5px; color:var(--az-hond); }
.as-dia-total{ font-size:14px; font-weight:750; color:var(--ok);
  font-variant-numeric:tabular-nums; }
.as-falta{ font-size:10.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ambar); }

.as-horas{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.as-horas span{
  padding:6px 4px; border-radius:9px; background:var(--fondo); text-align:center;
}
.as-horas i{ display:block; font-style:normal; font-size:9.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--gris); }
.as-horas b{ display:block; font-size:13px; color:var(--tinta);
  font-variant-numeric:tabular-nums; }
.as-horas .vacia b{ color:var(--az-borde); }
.as-almuerzo{ margin:7px 0 0; font-size:11.5px; color:var(--gris); }

/* ---------- La cámara del escáner ---------- */
.as-camara{
  position:fixed; inset:0; z-index:9400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:#000;
}
.as-camara video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* El marco de la mira: sin él no se sabe dónde apuntar y la gente acerca el
   teléfono hasta tocar la pantalla. */
.as-mira{
  position:relative; width:min(68vw, 300px); aspect-ratio:1;
  border:3px solid rgba(255,255,255,.9); border-radius:20px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.55);
}
.as-camara p{
  position:relative; margin:0; color:#fff; font-size:14px; font-weight:650;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.as-camara .as-cerrar{ position:relative; }

/* ---------------------------------------------------------------------------
   Una foto que no está
   ---------------------------------------------------------------------------
   Cuando el archivo no se puede servir -se borró del disco, o se está mirando
   la base de producción desde otra máquina- el navegador pinta su icono de
   imagen rota con el nombre del fichero desbordado al lado. Se ve como si la
   app estuviera fallando.

   Con esto queda un marco discreto con el nombre dentro: se entiende que la
   foto no está, y no que la pantalla se rompió.
   --------------------------------------------------------------------------- */
.act-mini img, .galeria img{
  color:var(--gris); font-size:10px; text-align:center; line-height:1.2;
  overflow:hidden; padding:3px;
}
.act-mini{
  display:flex; align-items:center; justify-content:center;
  background:var(--fondo); border:1px solid var(--linea);
}

/* La caja de una foto que no se pudo traer. La marca public/js/app.js al
   fallar la carga; sin JavaScript queda el icono de roto del navegador, que
   es lo que había antes. */
.foto-ida{
  display:flex; align-items:center; justify-content:center;
  background:var(--fondo); border:1px dashed var(--az-borde);
}
.foto-ida img{ display:none; }
.foto-ida::after{
  content:'sin foto';
  font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--gris);
}

/* ===========================================================================
   ROLES Y PERMISOS
   =========================================================================== */

.pm-perfil{ display:flex; align-items:flex-end; gap:8px; margin-bottom:10px; }
.pm-perfil .campo{ flex:1 1 auto; min-width:0; margin-bottom:0; }
.pm-perfil button{ flex:0 0 auto; padding:12px 16px; }
.pm-intro{ margin:0 0 14px; font-size:12.5px; color:var(--gris); line-height:1.5; }
.pm-intro strong{ color:var(--az-hond); }

/* ---------- La vista previa ----------
   Con las MISMAS clases que el inicio de verdad. No es un dibujo parecido: es
   la pantalla, encogida dentro de un marco. */
.pm-marco{
  padding:12px; border-radius:var(--r);
  background:var(--fondo); border:1px dashed var(--az-borde);
}
.pm-marco .rejilla{ margin-bottom:10px; gap:8px; }
/* Los accesos de la previa no llevan a ningún sitio: son span, no enlaces */
.pm-marco .mod{ cursor:default; }
.pm-marco .mod:active{ transform:none; }

.pm-grupo, .pm-banda{
  padding:10px 12px; border-radius:13px; background:#fff;
  border:1px solid var(--linea); margin-top:9px;
}
.pm-banda{ background:var(--az-tenue); }
.pm-grupo[hidden], .pm-banda[hidden]{ display:none; }
.pm-grupo-t{
  display:block; margin-bottom:5px;
  font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gris);
}
.pm-grupo ul, .pm-banda ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:5px; }
.pm-grupo li, .pm-banda li{
  padding:4px 9px; border-radius:999px; background:var(--fondo);
  font-size:11.5px; font-weight:650; color:var(--az-osc);
}
.pm-banda li{ background:#fff; }
.pm-vacio{ margin:0; padding:16px 0; text-align:center;
  font-size:12.5px; color:var(--gris); }

/* ---------- Las filas ---------- */
.pm-lista{ list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-direction:column; gap:9px; }
.pm-fila{
  padding:11px 12px; border-radius:13px; background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra);
  transition:opacity .15s;
}
/* Apagado se ve, no desaparece: hay que poder volver a encenderlo */
.pm-fila.apagada{ opacity:.5; }

.pm-cab{ display:flex; align-items:center; gap:10px; }
.pm-check{ flex:0 0 auto; display:flex; cursor:pointer; }
.pm-check input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.pm-check input:checked ~ .casilla-caja{ background:var(--az); border-color:var(--az); }
.pm-check input:focus-visible ~ .casilla-caja{
  outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue);
}

.pm-ico{
  flex:0 0 auto; width:32px; height:32px; border-radius:10px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.pm-ico svg{ width:17px; height:17px; }

.pm-nom{ flex:1 1 auto; min-width:0; }
.pm-nom strong{ display:block; font-size:14px; color:var(--az-hond);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-nom i{ display:block; font-style:normal; font-size:10.5px; color:var(--gris);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Subir y bajar. Área de toque de 34 px: son los dos botones que más se usan
   de esta pantalla y fallar uno mueve la fila al revés. */
.pm-mover{ flex:0 0 auto; display:flex; flex-direction:column; gap:3px; }
.pm-mover button{
  width:34px; height:26px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--az-borde); border-radius:8px; background:#fff;
  color:var(--az-osc);
}
.pm-mover button:hover{ background:var(--az-tenue); border-color:var(--az); }
.pm-mover svg{ width:14px; height:14px; }

.pm-campos{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--linea);
}
.pm-campos .campo{ margin-bottom:0; min-width:0; }
.pm-campos .pm-titulo{ grid-column:1 / -1; }

.pm-guardar{ margin-bottom:20px; }

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

/* La previa, encogida.
   Con las tarjetas a tamaño real, diez módulos son tres pantallas de
   desplazamiento antes de llegar a la lista que se está editando — y la
   previa está justamente para no tener que desplazarse. Aquí solo interesa la
   FORMA: cuántas filas, qué va antes, qué icono lleva. */
.pm-marco .mod{ padding:9px 5px; gap:5px; border-radius:11px; }
.pm-marco .mod-ico{ width:30px; height:30px; border-radius:9px; }
.pm-marco .mod-ico svg{ width:16px; height:16px; }
.pm-marco .mod-tit{ font-size:8.5px; letter-spacing:.02em; }

/* El visto de la casilla del panel de roles. Tenía el fondo azul pero el
   dibujo se quedaba en transparent: se veía un cuadro relleno sin visto, que
   se lee como "seleccionado" y no como "marcado". */
.pm-check input:checked ~ .casilla-caja{ color:#fff; }

/* El dibujo dentro de un desplegable: en la lista de opciones y en el botón
   de lo elegido. Sin tamaño propio, un <use> hereda el del símbolo y sale
   enorme. */
.sel-ico, .sel-btn-ico{
  flex:0 0 auto; width:17px; height:17px; color:var(--az);
}
.sel-btn.vacio .sel-btn-ico{ color:var(--az-borde); }

/* ===========================================================================
   EL TABLERO DE ROLES
   ===========================================================================
   El menú tal y como lo verá esa persona, y se edita ahí mismo: se arrastra
   para ordenar, la equis lo quita, y manteniendo pulsado se le cambian el
   nombre y el icono.

   Las tarjetas son las mismas que el inicio de verdad, un punto más pequeñas:
   lo que se ve aquí no se parece al menú, ES el menú.
   =========================================================================== */

.tb{ margin-bottom:18px; }
.tb-cab{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.tb-ayuda{ flex:1 1 auto; margin:0; font-size:12px; color:var(--gris); line-height:1.45; }
.tb-anadir{ flex:0 0 auto; padding:10px 14px; font-size:13px; }
.tb-anadir span{ font-size:10.5px; font-weight:500; color:var(--gris); }

.tb-zona-t{
  margin:16px 0 7px; font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.07em; text-transform:uppercase;
}
.tb-zona-t i{
  display:block; font-style:normal; font-size:10.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--az-borde);
}

/* El hueco de cada zona. Se ve SIEMPRE, aunque esté vacío: si desapareciera,
   no habría dónde soltar y no se podría mover nada a una zona vacía. */
.tb-zona{
  padding:8px; border-radius:14px;
  background:var(--fondo); border:1px dashed var(--az-borde);
  min-height:64px;
}
.tb-rejilla{ display:grid; gap:8px; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:400px){ .tb-rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.tb-fila{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.tb-hueco{
  grid-column:1 / -1; margin:0; padding:12px 0;
  text-align:center; font-size:11.5px; color:var(--gris);
}

/* ---------- Una tarjeta ---------- */
.tb-item{
  position:relative; cursor:grab;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 6px 10px; border-radius:12px;
  background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra);
  /* Sin esto, mantener pulsado en el móvil saca el menú de copiar del sistema
     justo cuando se quiere editar. */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.tb-item:focus-visible{ outline:none; border-color:var(--az); box-shadow:0 0 0 3px var(--az-tenue); }
.tb-ico{
  width:34px; height:34px; border-radius:11px;
  background:var(--az-tenue); color:var(--az);
  display:flex; align-items:center; justify-content:center;
}
.tb-ico svg{ width:18px; height:18px; }
.tb-tit{
  font-size:9.5px; font-weight:750; letter-spacing:.03em; text-transform:uppercase;
  color:var(--az-hond); text-align:center; line-height:1.25;
  overflow-wrap:anywhere;
}

/* Las del acordeón y la banda son pastillas: allí el menú no es cuadrícula */
.tb-chico{
  flex-direction:row; gap:7px; padding:8px 11px; border-radius:999px;
}
.tb-chico .tb-ico{ width:22px; height:22px; border-radius:7px; }
.tb-chico .tb-ico svg{ width:13px; height:13px; }
.tb-chico .tb-tit{ font-size:11px; text-transform:none; letter-spacing:0; }

/* La equis. Arriba a la derecha y saliéndose un poco, como en cualquier
   pantalla de reordenar aplicaciones. */
.tb-quita{
  position:absolute; top:-7px; right:-7px;
  width:22px; height:22px; padding:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--fondo); background:var(--gris); color:#fff;
  font-size:14px; line-height:1; font-family:inherit;
}
.tb-quita:hover{ background:var(--rojo); }
.tb-chico .tb-quita{ top:-6px; right:-4px; width:19px; height:19px; font-size:12px; }

/* Mientras se arrastra: levantada y por encima de todo */
.tb-moviendo{
  cursor:grabbing; z-index:20; opacity:.92;
  box-shadow:var(--sombra-alta); border-color:var(--az);
  transform-origin:center;
}

/* ---------- Las hojas ---------- */
.tb-velo{
  position:fixed; inset:0; z-index:9300;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(26,40,52,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.tb-velo[hidden]{ display:none; }
@media (min-width:700px){ .tb-velo{ align-items:center; padding:20px; } }

.tb-hoja{
  width:min(560px,100%); max-height:86%; overflow-y:auto;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  background:#fff; border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(20,32,42,.3);
}
@media (min-width:700px){ .tb-hoja{ border-radius:16px; } }

.tb-hoja-cab{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.tb-hoja-cab span{ flex:1 1 auto; min-width:0; }
.tb-hoja-cab strong{ display:block; font-size:16px; color:var(--az-hond); }
.tb-hoja-cab i{ display:block; font-style:normal; font-size:11.5px; color:var(--gris); }

.campo-eti{
  display:block; margin-bottom:7px;
  font-size:11px; font-weight:700; color:var(--gris);
  letter-spacing:.08em; text-transform:uppercase;
}

/* Los iconos en rejilla: elegir un dibujo mirando dibujos es un gesto */
.tb-iconos{
  display:grid; gap:7px; grid-template-columns:repeat(auto-fill, minmax(52px,1fr));
}
.tb-op{
  aspect-ratio:1; padding:0; cursor:pointer; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--az-borde); background:#fff; color:var(--az);
}
.tb-op svg{ width:20px; height:20px; }
.tb-op:hover{ border-color:var(--az); background:var(--az-tenue); }
.tb-op.on{ background:var(--az); border-color:var(--az); color:#fff; }

/* ---------- La hoja de añadir ---------- */
.tb-add-lista{ display:flex; flex-direction:column; gap:7px; }
.tb-add{
  display:flex; align-items:center; gap:11px; width:100%; cursor:pointer;
  padding:10px 12px; border-radius:12px; text-align:left;
  border:1px solid var(--az-borde); background:#fff; font-family:inherit;
}
.tb-add:hover{ border-color:var(--az); background:var(--az-tenue); }
.tb-add-tx{ flex:1 1 auto; min-width:0; }
.tb-add-tx strong{ display:block; font-size:14px; color:var(--az-hond); }
.tb-add-tx i{ display:block; font-style:normal; font-size:10.5px; color:var(--gris); }

/* ===========================================================================
   [hidden] TIENE QUE GANAR
   ===========================================================================
   El atributo hidden lo pone el navegador con "display:none" en su hoja por
   defecto, que pierde contra CUALQUIER regla propia que ponga display. Ya ha
   mordido tres veces en esta app: .campo, .btn y .pm-lista se quedaban a la
   vista después de esconderlos con JavaScript, y cada vez parecía un fallo
   del guion.

   Se arregla aquí y de una vez, en lugar de ir persiguiéndolo componente a
   componente. Lo que de verdad necesite verse estando hidden -no hay nada-
   tendría que decirlo con una regla más específica.
   =========================================================================== */
[hidden]{ display:none !important; }