/* ------------------------------------------------------------------
   gestion.vvtamaduste.es
   Colores tomados de vvtamaduste.es: azul-negro profundo, mar y arena.
   Movil primero. Tipografias del sistema, para no depender de Google
   Fonts (romperia la CSP) y que la app funcione sin conexion.
   ------------------------------------------------------------------ */

:root{
  /* Papel frio y tinta azul-negra, los de vvtamaduste.es. La cabecera
     se queda oscura, como la foto del mar de la portada de la web. */
  --ink:#F2F5F7; --surf:#FFFFFF; --surf2:#E9EEF1; --line:#DCE4E8; --line2:#C3D0D7;
  --txt:#16222B; --txt2:#4E5F6A; --txt3:#7C8D97;
  --mar:#14708C; --mar-d:#E2EFF4; --mar-b:#AACEDC;
  --arena:#8F6A3C; --arena-d:#F5EBDB;
  --ok:#256F4F; --ok-d:#E0F0E7; --wr:#8A5F12; --wr-d:#F8EEDA; --bad:#A63B33; --bad-d:#FAE4E2;
  --cab:#101A21;        /* cabecera y menu, oscuros */
  --cab-txt:#EEF3F5;
  --cab-txt2:#93A5AF;
  --cab-line:#26343D;
  --r:10px; --r-s:7px; --r-l:16px;
  --tap:46px;
  color-scheme:light;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5;
  padding-bottom:34px;
  overscroll-behavior-y:contain;
}
a{color:var(--mar); text-decoration:none}
:focus-visible{outline:2px solid var(--mar); outline-offset:2px; border-radius:4px}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}

/* ------------------------------ cabecera ------------------------------ */
.top{
  background:var(--cab); color:var(--cab-txt);
  border-bottom:1px solid var(--cab-line);
  padding:calc(8px + env(safe-area-inset-top)) 14px 10px;
  display:flex; align-items:center; gap:12px;
}
.top .marca{color:inherit; text-decoration:none; display:block}
.top .marca:active{opacity:.7}
.top h1{margin:0; font-size:17px; font-weight:650; letter-spacing:-.01em}
.top h1 small{display:block; font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--cab-txt2)}
.top .der{margin-left:auto; display:flex; gap:8px; align-items:center}

.envoltorio{max-width:760px; margin:0 auto; padding:0 14px}

/* ------------------------------ botones ------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap); padding:0 16px; border-radius:var(--r-s);
  border:1px solid var(--line2); background:var(--surf2); color:var(--txt);
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--mar); border-color:var(--mar); color:#fff}
.btn.peq{min-height:36px; padding:0 11px; font-size:13.5px; font-weight:500}
.top .btn{background:#1E2C36; border-color:#33454F; color:var(--cab-txt)}
.btn.malo{color:var(--bad); border-color:#E6BDB9}
.btn.ancho{width:100%}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ------------------------------- avisos ------------------------------- */
.flash{margin:12px 0; padding:12px 14px; border-radius:var(--r-s); font-size:14.5px; border:1px solid}
.flash.ok{background:var(--ok-d); border-color:#B6DCC8; color:var(--ok)}
.flash.aviso{background:var(--wr-d); border-color:#E4D2A8; color:var(--wr)}
.flash.malo{background:var(--bad-d); border-color:#EFC3BE; color:var(--bad)}

.avisos{display:flex; flex-direction:column; gap:7px; margin:14px 0}
.avisoLinea{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:var(--r-s); border:1px solid var(--line); background:var(--surf);
  font-size:14px; color:var(--txt2);
}
.avisoLinea .punto{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--mar)}
.avisoLinea.aviso .punto{background:var(--wr)}
.avisoLinea.malo .punto{background:var(--bad)}
.avisoLinea b{color:var(--txt); font-weight:600}
.avisoLinea .flecha{margin-left:auto; color:var(--txt3)}

/* ------------------------------- filtros ------------------------------ */
.barraFiltros{display:flex; gap:7px; overflow-x:auto; padding:12px 0 4px; scrollbar-width:none}
.barraFiltros::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:7px 13px; border-radius:20px; font-size:13px;
  border:1px solid var(--line); background:var(--surf); color:var(--txt2); white-space:nowrap;
}
.chip.on{background:var(--mar-d); border-color:var(--mar-b); color:var(--mar); font-weight:600}
.chipSel{
  flex:0 0 auto; padding:7px 30px 7px 13px; border-radius:20px; font-size:13px;
  border:1px solid var(--mar-b); background:var(--mar-d); color:var(--mar);
  font-weight:600; font-family:inherit; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mar) 50%),
                   linear-gradient(135deg,var(--mar) 50%,transparent 50%);
  background-position:calc(100% - 16px) 14px,calc(100% - 11px) 14px;
  background-size:5px 5px; background-repeat:no-repeat;
}
.buscador{
  width:100%; min-height:var(--tap); padding:0 14px; margin-top:10px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-s);
  color:var(--txt); font-size:16px; font-family:inherit;
}
.buscador::placeholder{color:var(--txt3)}

/* -------------------------------- tiras ------------------------------- */
.mesCab{
  display:flex; justify-content:space-between; align-items:baseline;
  position:sticky; top:calc(100px + env(safe-area-inset-top)); z-index:20;
  background:var(--ink); padding:18px 2px 8px; margin-bottom:9px;
  border-bottom:1px solid var(--line2);
}
.mesCab .m{font-size:12.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase}
.mesCab.ahora .m{color:var(--mar)}
.mesCab.ahora{border-bottom-color:var(--mar-b)}

/* Separa lo que viene de lo que ya pasó */
.corte{
  height:7px; border-radius:4px; background:var(--line2);
  margin:30px 0 6px; position:relative;
}
.corte span{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  background:var(--ink); padding:0 10px; font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt3);
}
.mesCab .t{font-size:12px; color:var(--txt3)}

.tira{
  display:grid; grid-template-columns:4px 1fr; background:var(--surf);
  border:1px solid var(--line); border-left:0;
  border-radius:var(--r); overflow:hidden; margin-bottom:9px; color:inherit;
  box-shadow:0 1px 2px rgba(16,34,43,.05);
}
.tira .rail{background:var(--mar)}
.tira .cuerpo{padding:11px 13px 12px; min-width:0}
.tira .l1{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.tira .fechas{font-size:13px; font-weight:600; color:var(--txt)}
.tira .importe{font-size:14px; font-weight:700; white-space:nowrap}
.tira .nombre{font-size:15.5px; font-weight:650; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tira .meta{font-size:12.5px; color:var(--txt3); margin-top:2px}
.tira .etiquetas{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.tira.cancelada{opacity:.55}
.tira.cancelada .nombre{text-decoration:line-through}

.eti{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:20px; border:1px solid var(--line2); color:var(--txt3);
}
.eti.mar{background:var(--mar-d); border-color:var(--mar-b); color:var(--mar)}
.eti.are{background:var(--arena-d); border-color:#E3D0B2; color:var(--arena)}
.eti.ok{background:var(--ok-d); border-color:#B6DCC8; color:var(--ok)}
.eti.wr{background:var(--wr-d); border-color:#E4D2A8; color:var(--wr)}
.eti.bad{background:var(--bad-d); border-color:#EFC3BE; color:var(--bad)}

.vacio{text-align:center; padding:50px 20px; color:var(--txt3)}
.vacio b{display:block; color:var(--txt2); font-size:16px; margin-bottom:6px}

/* ----------------------------- formularios ---------------------------- */
.campo{margin-bottom:13px}
.campo label, .etiqueta{
  display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt3); margin-bottom:5px; font-weight:600;
}
.campo input, .campo select, .campo textarea{
  width:100%; min-height:var(--tap); padding:11px 13px;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-s);
  color:var(--txt); font-size:16px; font-family:inherit;   /* 16px evita el zoom de iOS */
}
.campo textarea{min-height:88px; resize:vertical; line-height:1.5}
.campo select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--txt3) 50%),linear-gradient(135deg,var(--txt3) 50%,transparent 50%); background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size:5px 5px; background-repeat:no-repeat}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--mar); outline:none}
.pareja{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.trio{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}

.seccion{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mar); margin:26px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
}
.seccion span{color:var(--txt3); letter-spacing:0; text-transform:none; font-weight:500; font-size:12px}

.interruptor{display:flex; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden}
.interruptor label{
  flex:1; text-align:center; padding:12px 6px; font-size:14px; color:var(--txt3);
  cursor:pointer; margin:0; letter-spacing:0; text-transform:none; font-weight:500;
}
.interruptor input{position:absolute; opacity:0; pointer-events:none}
.interruptor input:checked + label{background:var(--mar); color:#fff; font-weight:700}

.calculo{
  background:var(--mar-d); border:1px solid var(--mar-b); border-radius:var(--r-s);
  padding:12px 14px; display:flex; flex-direction:column; gap:5px; font-size:14px;
}
.calculo .fila{display:flex; justify-content:space-between; color:var(--txt2)}
.calculo .fila b{color:var(--txt)}
.calculo .fila.sep{border-top:1px solid var(--mar-b); padding-top:6px; margin-top:2px}

/* ------------------------------- tarjetas ----------------------------- */
.tarjeta{background:var(--surf); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; margin-bottom:12px; box-shadow:0 1px 2px rgba(16,34,43,.05)}
.tarjeta h3{margin:0 0 10px; font-size:16px; font-weight:650}
.dato{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.dato:last-child{border-bottom:0}
.dato .k{color:var(--txt3)}
.dato .v{text-align:right; font-weight:500; min-width:0; overflow-wrap:anywhere}

.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.cifra{background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.cifra b{display:block; font-size:21px; font-weight:700; letter-spacing:-.01em}
.cifra span{font-size:11.5px; color:var(--txt3)}

/* ------------------------------- listados ----------------------------- */
.linea{display:flex; align-items:center; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line)}
.linea:last-child{border-bottom:0}
.linea .icono{width:34px; height:34px; border-radius:var(--r-s); background:var(--surf2); display:grid; place-items:center; font-size:15px; flex:0 0 auto}
.linea .txt{min-width:0; flex:1}
.linea .t1{font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linea .t2{font-size:12px; color:var(--txt3)}
.linea .val{font-size:14.5px; font-weight:700; white-space:nowrap}

.barraDato{height:6px; border-radius:3px; background:var(--surf2); overflow:hidden; margin-top:5px}
.barraDato i{display:block; height:100%; background:var(--mar)}

/* ----------------------------- navegacion ----------------------------- */
.nav{
  position:sticky; top:0; z-index:45;
  display:flex; background:var(--cab); color:var(--cab-txt);
  border-bottom:1px solid var(--cab-line);
}
.nav a{
  flex:1; padding:9px 4px 8px; text-align:center; color:var(--cab-txt2);
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
}
.nav a .ico{display:block; font-size:19px; margin-bottom:1px; line-height:1.2}
.nav a.on{color:#5FC0DE}

.fab{
  position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:60;
  width:56px; height:56px; border-radius:50%; background:var(--mar); color:#fff;
  display:grid; place-items:center; font-size:30px; font-weight:600;
  box-shadow:0 6px 18px rgba(16,26,33,.28);
}

/* ------------------------------- entrada ------------------------------ */
.centrado{min-height:100dvh; display:grid; place-items:center; padding:24px 18px}
.caja{width:100%; max-width:380px}
.caja .marca{text-align:center; margin-bottom:28px}
.caja .marca h1{font-size:22px; font-weight:700; margin:0 0 4px; letter-spacing:-.01em}
.caja .marca p{margin:0; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt3)}
.qr{background:#fff; padding:14px; border-radius:var(--r); display:grid; place-items:center; margin:0 auto 14px; width:max-content}
.qr img, .qr canvas{display:block; width:196px; height:196px}
.clave{
  font-size:15px; letter-spacing:.14em; text-align:center; word-break:break-all;
  background:var(--surf2); border:1px dashed var(--line2); border-radius:var(--r-s); padding:12px;
}
.codigos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0}
.codigos span{background:var(--surf2); border:1px solid var(--line); border-radius:var(--r-s); padding:11px; text-align:center; font-size:15px; letter-spacing:.06em}
.pin{text-align:center; font-size:27px; letter-spacing:.35em; padding:14px !important}

.nota{font-size:13px; color:var(--txt3); line-height:1.55; margin:12px 0 0}
.nota a{text-decoration:underline}

@media (min-width:640px){
  .envoltorio{padding:0 20px}
  .fab{bottom:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media print{
  .nav,.fab,.top,.barraFiltros{display:none}
  body{background:#fff; color:#000; padding:0}
}

/* ------------------------- filtros avanzados ------------------------- */
details.filtros{
  margin:12px 0 4px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surf); overflow:hidden;
}
details.filtros > summary{
  padding:13px 14px; font-size:14px; font-weight:600; color:var(--txt2);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
}
details.filtros > summary::-webkit-details-marker{display:none}
details.filtros > summary::before{content:"⌕"; color:var(--mar); font-size:16px}
details.filtros > summary::after{content:"▾"; margin-left:auto; color:var(--txt3)}
details.filtros[open] > summary{border-bottom:1px solid var(--line); color:var(--txt)}
details.filtros[open] > summary::after{content:"▴"}
details.filtros form{padding:14px}
details.filtros .pareja:last-child{margin-top:4px}
details.filtros .btn{width:100%}

/* --------------------- vista previa de WhatsApp --------------------- */
.previaWa{
  background:#E4DDD4; border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; font-size:14.5px; line-height:1.5; color:#111B21;
  white-space:normal; word-break:break-word; min-height:80px;
}
.previaWa b{font-weight:700}
.previaWa code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; background:#D5CCC1; padding:1px 4px; border-radius:4px}
.previaWa .enlaceWa{color:#027EB5; text-decoration:underline}
.previaWa .varWa{background:#CBDDE4; color:#0B5A72; border-radius:4px; padding:0 4px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.nav a .ico{font-size:18px}


/* ============================ CALENDARIO ============================ */
.calCab{display:flex; align-items:center; gap:8px; margin:14px 0 12px}
.calCab .calNav{
  flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--surf); color:var(--txt);
  display:grid; place-items:center; font-size:22px; line-height:1; text-decoration:none;
}
.calCab .calTit{flex:1; text-align:center; min-width:0}
.calCab .calTit b{display:block; font-size:17px; font-weight:650; text-transform:capitalize}
.calCab .calTit span{font-size:12px; color:var(--txt3)}

.calDias{
  display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
  font-size:11px; font-weight:700; color:var(--txt3); text-align:center;
  letter-spacing:.08em; margin-bottom:5px;
}
.calRejilla{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.calVacio{aspect-ratio:1}

.calDia{
  position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:var(--surf);
  display:grid; place-items:center; text-decoration:none; color:var(--txt);
}
.calDia .bandas{position:absolute; inset:0; display:flex}
.calDia .bandas i{flex:1; display:block}
.calDia .num{
  position:relative; font-size:14px; font-weight:600;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(255,255,255,.55);
}
.calDia.libre .num{color:var(--txt3); text-shadow:none; font-weight:500}
.calDia.hoy{border-color:var(--mar); border-width:2px}
.calDia.hoy .num{color:var(--mar)}
.calDia.elegido{outline:2px solid var(--txt); outline-offset:1px}
.calDia.revisar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(45deg,
    rgba(166,59,51,.55) 0 3px, transparent 3px 7px);
}

.calLeyenda{
  display:flex; flex-wrap:wrap; gap:9px 14px; justify-content:center;
  margin:14px 0 4px; font-size:12px; color:var(--txt2);
}
.calLeyenda span{display:flex; align-items:center; gap:6px}
.calLeyenda i{width:13px; height:13px; border-radius:3px; display:block}
.calLeyenda i.libre{background:var(--surf); border:1px solid var(--line2)}
.calLeyenda i.rev{background:repeating-linear-gradient(45deg,
  rgba(166,59,51,.6) 0 3px, transparent 3px 7px); border:1px solid var(--line2)}

.calPunto{width:11px; height:11px; border-radius:3px; flex:0 0 auto}

@media (min-width:520px){
  .calDia{aspect-ratio:auto; min-height:74px}
  .calDia .num{font-size:15px}
}