/* ==========================================================
   Hermandad de Ntra. Sra. de la Soledad · Aracena
   Hoja de estilos
   ========================================================== */

:root{
  --negro:#14110f;
  /* El color de la letra que se lee. Nace igual que el principal,
     pero es suyo: aclarar el texto ya no aclara la cabecera. */
  --texto:#14110f;
  --negro-suave:#3a332e;
  --gris:#6f665e;
  --gris-claro:#d9d2c8;
  --papel:#f7f4ef;
  --papel-2:#fffdfa;
  --oro:#a5813f;
  --oro-claro:#e7d9bd;
  --verde:#4b6b45;
  --rojo:#9b3226;
  --azul:#39536b;
  /* Las chapitas con el número de cosas sin leer */
  --aviso:#6f665e;
  --aviso-texto:#ffffff;
  /* El hábito del nazareno del Portal del Hermano */
  --nazareno-tunica:#fffdfa;
  --nazareno-capirote:#14110f;
  --nazareno-cingulo:#a5813f;
  --nazareno-fondo:#efe9e0;
  /* El Portal del Hermano. Su franja de arriba no lleva un color liso,
     lleva un degradado; se guarda ya montado en --portal-fondo para que
     Configuración pueda cambiarle también la dirección y no solo las
     tintas. Lo que hay aquí es lo que se ve si nadie ha tocado nada. */
  --portal-1:#1d1916;
  --portal-2:#2e2721;
  --portal-3:#3c3229;
  --portal-texto:#ffffff;
  --portal-fondo:linear-gradient(135deg,var(--portal-1) 0%,var(--portal-2) 55%,
                                 var(--portal-3) 100%);
  --sombra:0 1px 2px rgba(20,17,15,.06),0 8px 24px rgba(20,17,15,.07);
  --radio:10px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:15px;
  color:var(--texto);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul)}
button{font-family:inherit;font-size:inherit}
/* Lo que se lleva a la vista con scrollIntoView no se queda debajo de la cabecera */
html{scroll-padding-top:calc(var(--alto-visible, 0px) + 12px)}

/* ---------- Cabecera ----------
   Fija arriba. Al bajar se queda fina (body.cabecera-fina) y la barra de los
   módulos se esconde detrás de ella (body.menu-escondido); al subir vuelve.
   Las dos van fijas y el sitio que ocupan de verdad lo guarda el relleno de
   arriba del body, que no cambia al encogerse: si la cabecera empujara la
   página al cambiar de tamaño, la página daría un salto a cada cambio.
   Las medidas las pone vigilarLaCabecera() en app.js. */
body{padding-top:var(--alto-arriba, 0px)}
.cabecera{
  background:var(--negro);
  color:var(--papel);
  border-bottom:3px solid var(--oro);
  position:fixed;top:0;left:0;right:0;z-index:30;
}
.cabecera-int{
  max-width:1400px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px;
  transition:padding .25s ease;
}
.cabecera img{height:56px;width:56px;object-fit:contain;
  background:#fff;border-radius:50%;padding:3px;flex:none;
  transition:width .25s ease,height .25s ease,padding .25s ease}
.cabecera h1{
  font-family:var(--serif);font-size:19px;font-weight:600;margin:0;
  letter-spacing:.02em;line-height:1.25;min-width:0;
  transition:font-size .25s ease;
}
.cabecera h1 small{display:block;font-size:12.5px;font-weight:400;
  color:var(--oro-claro);letter-spacing:.16em;text-transform:uppercase;margin-top:3px;
  max-height:40px;overflow:hidden;
  transition:max-height .25s ease,opacity .2s ease,margin .25s ease}
.cabecera .ejercicio{margin-left:auto;text-align:right;font-size:12.5px;color:var(--oro-claro)}
.cabecera .ejercicio b{display:block;font-size:17px;color:#fff;font-family:var(--serif);
  transition:font-size .25s ease}
.cabecera-fina .cabecera-int{padding-top:6px;padding-bottom:6px}
.cabecera-fina .cabecera img{height:32px;width:32px;padding:2px}
.cabecera-fina .cabecera h1{font-size:16px}
.cabecera-fina .cabecera h1 small{max-height:0;opacity:0;margin-top:0}
.cabecera-fina .cabecera .ejercicio b{font-size:14px}

/* ---------- Navegación ---------- */
.menu{background:var(--negro-suave);border-bottom:1px solid rgba(0,0,0,.2);
  position:fixed;left:0;right:0;top:var(--alto-cabecera, 0px);z-index:29;
  transition:transform .3s ease}
/* Se sube entera, y la cabecera —por encima y opaca— la tapa */
.menu-escondido .menu{transform:translateY(-100%)}
.menu-int{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap}
.menu button{
  background:none;border:0;color:#cfc6ba;padding:11px 16px;cursor:pointer;
  font-size:13.5px;letter-spacing:.03em;border-bottom:3px solid transparent;
}
.menu button:hover{color:#fff;background:rgba(255,255,255,.05)}
.menu button.activo{color:#fff;border-bottom-color:var(--oro);font-weight:600}
.menu button:disabled{color:#7d746a;cursor:not-allowed}
.menu button:disabled:hover{background:none;color:#7d746a}
.menu .proximamente{font-size:9.5px;background:rgba(255,255,255,.12);
  padding:1px 5px;border-radius:8px;margin-left:6px;vertical-align:1px;letter-spacing:.05em}

/* ---------- Estructura ---------- */
.contenido{max-width:1400px;margin:0 auto;padding:22px 24px 60px}
.oculto{display:none !important}

h2.titulo{font-family:var(--serif);font-size:23px;margin:0 0 3px}
p.subtitulo{color:var(--gris);margin:0 0 20px;font-size:13.5px}

.tarjeta{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:var(--radio);box-shadow:var(--sombra)}

/* ---------- Portada ---------- */
.portada{text-align:center;padding:26px 0 8px}
.portada img{width:200px;height:200px;object-fit:contain}
.portada h2{font-family:var(--serif);font-size:29px;margin:14px 0 2px;font-weight:600}
.portada p{color:var(--gris);margin:0 0 26px;letter-spacing:.13em;
  text-transform:uppercase;font-size:11.5px}

.modulos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.modulo{
  background:var(--papel-2);border:1px solid var(--gris-claro);border-radius:var(--radio);
  padding:20px;text-align:left;cursor:pointer;box-shadow:var(--sombra);font:inherit;
  color:inherit;transition:transform .12s ease,border-color .12s ease;position:relative;
  display:flex;flex-direction:column;
}
.modulo:hover{transform:translateY(-2px);border-color:var(--oro)}
.modulo.listo{border-left:4px solid var(--verde)}
.modulo .icono{font-size:26px;line-height:1}
.modulo h3{font-family:var(--serif);font-size:17px;margin:10px 0 5px;
  padding-right:26px}          /* deja sitio al «?» de la esquina */
.modulo p{margin:0;color:var(--gris);font-size:13px;line-height:1.5}
.modulo.inactivo{background:#f5f2ec}
.modulo.inactivo h3,.modulo.inactivo .icono{opacity:.75}
.modulo.inactivo p{color:var(--gris)}
/* El «?» de la esquina: qué se puede hacer dentro del módulo. Discreto, que
   el recuadro es para entrar; esto es la consulta de vez en cuando. */
.modulo-ayuda{position:absolute;top:10px;right:10px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--gris-claro);background:#fff;color:var(--gris);
  font-size:12px;font-weight:600;line-height:1;cursor:help}
.modulo-ayuda:hover{border-color:var(--oro);color:var(--texto);background:#fdf8ed}
.modulo-ayuda:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}

.modulo.destacado{grid-column:span 2;background:
  linear-gradient(135deg,#fffdfa 0%,#fbf6ec 100%);border-color:var(--oro-claro)}
.modulo.destacado .icono{font-size:32px}
.modulo.destacado h3{font-size:19px}
.modulo.destacado p{font-size:13.5px}
@media (max-width:640px){.modulo.destacado{grid-column:span 1}}
.modulo .icono svg{display:block}
.panel-cab .numero svg{display:block;width:34px;height:34px}
.modulo h3{padding-right:64px}
.modulo.listo h3{padding-right:84px}

/* ---------- Mapa de módulos ---------- */
.mapa-cab{max-width:1400px;margin:34px auto 4px;text-align:center}
.mapa-cab h3{font-family:var(--serif);font-size:20px;margin:0 0 4px}
.mapa-cab p{margin:0 0 22px;color:var(--gris);font-size:13px}
.grupo{margin-bottom:30px}
.grupo-cab{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid var(--gris-claro);flex-wrap:wrap}
.grupo-cab h4{font-family:var(--serif);font-size:16.5px;margin:0}
.grupo-cab p{margin:0;color:var(--gris);font-size:12.5px}

.lista-modulo{margin:0;padding-left:18px;font-size:13.5px;line-height:1.65}
.lista-modulo li{margin-bottom:5px}
.lista-modulo.dependencias{list-style:none;padding-left:0}
.lista-modulo.dependencias li{padding:5px 0 5px 22px;position:relative}
.lista-modulo.dependencias li:before{content:"→";position:absolute;left:2px;color:var(--oro)}
.lista-modulo.pendiente{padding-left:16px}
.lista-modulo.pendiente li{margin-bottom:6px}

.menu-nota{margin-left:auto;align-self:center;font-size:11.5px;color:#9a9188;
  letter-spacing:.04em;padding-right:4px}

/* ---------- Cifras ---------- */
.cifras{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  margin:26px auto 0;max-width:1080px}
.cifra{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:var(--radio);padding:14px 16px;text-align:center}
.cifra b{display:block;font-family:var(--serif);font-size:27px;line-height:1.15;
  font-variant-numeric:tabular-nums}
.cifra span{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.07em}
.cifra.alerta b{color:var(--rojo)}
.cifra.bien b{color:var(--verde)}   /* un resultado positivo */
.cifra.clicable{cursor:pointer}
.cifra.clicable:hover{border-color:var(--oro)}
/* Una cifra sola —el Inicio, donde solo se enseña cuántos hermanos hay— se
   estiraría a los 1080 px de la rejilla y quedaría un recuadro larguísimo con
   un número pequeño en medio. Se le pone freno y se centra. */
.cifra:only-child{max-width:260px;margin:0 auto}

/* ---------- Barra de herramientas ---------- */
.barra{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
input,select,textarea{
  font-family:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--gris-claro);
  border-radius:7px;background:#fff;color:var(--texto);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--oro-claro);border-color:var(--oro)}
input[readonly]{background:#f1ede7;color:var(--gris)}
/* Los campos blindados contra el autorrelleno nacen de solo lectura, pero
   se escriben con normalidad en cuanto se tocan: deben verse como los demás. */
input[readonly][data-blindado]{background:var(--papel-2);color:inherit}
.buscador{min-width:290px}

/* ---- El ojo de las contraseñas ----
   Un botón dentro del propio recuadro, a la derecha, para ver lo que se está
   escribiendo antes de mandarlo. Nace SIEMPRE apagado: la contraseña se
   enseña solo si a uno le da por pedirlo, y vuelve a taparse al entrar. */
/* El envoltorio lo pone el programa alrededor del propio recuadro, no del
   campo entero: así el botón cae siempre sobre la caja de escribir y no se le
   sube al rótulo, mida lo que mida. */
.con-ojo{position:relative;display:block}
.con-ojo input{padding-right:40px;width:100%}
.ojo{
  position:absolute;right:1px;bottom:1px;height:calc(100% - 2px);width:38px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;padding:0;cursor:pointer;color:var(--gris);
  border-radius:0 7px 7px 0;
}
.ojo:hover{color:var(--texto)}
.ojo:focus-visible{outline:2px solid var(--oro-claro);outline-offset:-2px}
.ojo svg{width:21px;height:21px;display:block}
.crece{flex:1}

.btn{
  border:1px solid var(--gris-claro);background:#fff;color:var(--texto);
  padding:8px 14px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.btn:hover{border-color:var(--oro);background:#fffdf8}
.btn.principal{background:var(--negro);color:#fff;border-color:var(--negro);font-weight:600}
.btn.principal:hover{background:#000}
.btn.peligro{color:var(--rojo);border-color:#e4c9c4}
.btn.peligro:hover{background:#fdf4f3}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.pequeno{padding:5px 10px;font-size:12.5px}

/* ---------- Tabla ---------- */
.tabla-caja{overflow-x:auto;background:var(--papel-2);
  border:1px solid var(--gris-claro);border-radius:var(--radio);box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
thead th{
  background:#efe9e0;text-align:left;padding:9px 12px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--negro-suave);
  border-bottom:1px solid var(--gris-claro);white-space:nowrap;position:sticky;top:0;
}
tbody td{padding:9px 12px;border-bottom:1px solid #eee7dd;vertical-align:top}
tbody tr:hover{background:#fbf7f0;cursor:pointer}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--serif);font-weight:600;font-size:15px;
  text-align:right;width:74px;min-width:74px;color:var(--texto);white-space:nowrap;
  font-variant-numeric:tabular-nums}
td.num .antig{font-family:var(--sans);font-weight:400;font-size:10px;
  color:var(--gris);white-space:nowrap;letter-spacing:.01em}
.baja-fila{background:#faf6f5}
.baja-fila td{color:var(--gris)}

.pastilla{display:inline-block;font-size:11px;padding:2px 8px;border-radius:11px;
  border:1px solid;white-space:nowrap;line-height:1.5}
.p-dom{color:var(--azul);border-color:#c3d3e0;background:#f2f7fb}
.p-efe{color:#8a6516;border-color:#e8d9b4;background:#fdf8ed}
.p-activo{color:var(--verde);border-color:#c8d8c4;background:#f3f8f2}
.p-baja{color:var(--rojo);border-color:#e4c9c4;background:#fdf4f3}
.p-aviso{color:var(--rojo);border-color:#e4c9c4;background:#fdf4f3}
.p-tut{color:#5c4a7a;border-color:#d5cce4;background:#f7f4fb}
.p-pendiente{color:#8a4b16;border-color:#e8cdb4;background:#fdf3ea;font-weight:600}
.tenue{color:var(--gris);font-size:12.5px}
.salto{font-size:13px;line-height:1}
.salto.mejor{color:var(--verde)}
.salto.peor{color:#8a6516}
.iban{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:-.2px}

.paginacion{display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:16px;font-size:13px;color:var(--gris)}

th.marca,td.marca{width:34px;text-align:center;padding-left:10px;padding-right:0}
th.marca span{color:var(--gris);font-weight:400}
td.marca input{cursor:pointer;width:15px;height:15px;accent-color:var(--negro)}

h3.seccion-titulo{font-family:var(--serif);font-size:17px;margin:0 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--gris-claro)}

#barra-seleccion{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:70;background:var(--negro);color:#fff;border-radius:10px;
  padding:11px 16px;display:flex;align-items:center;gap:12px;font-size:13.5px;
  box-shadow:0 8px 30px rgba(20,17,15,.32);animation:sube .2s ease}
#barra-seleccion b{font-family:var(--serif);font-size:17px}
#barra-seleccion .btn{border-color:#4a423b;background:#241f1b;color:#fff}
#barra-seleccion .btn:hover{background:#332c26;border-color:var(--oro)}
#barra-seleccion .btn.principal{background:#fff;color:var(--texto);border-color:#fff}

.vacio{padding:44px 20px;text-align:center;color:var(--gris)}
.vacio b{display:block;font-family:var(--serif);font-size:18px;color:var(--texto);margin-bottom:5px}

/* ---------- Panel lateral (ficha) ---------- */
.velo{position:fixed;inset:0;background:rgba(20,17,15,.45);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .16s}
.velo.visible{opacity:1;pointer-events:auto}

.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--papel-2);
  z-index:50;box-shadow:-12px 0 40px rgba(20,17,15,.18);transform:translateX(102%);
  transition:transform .2s ease;display:flex;flex-direction:column;
}
.panel.visible{transform:none}
.panel-cab{padding:16px 22px;border-bottom:1px solid var(--gris-claro);
  display:flex;align-items:flex-start;gap:12px;background:var(--negro);color:#fff}
.panel-cab .numero{font-family:var(--serif);font-size:31px;line-height:1;color:var(--oro-claro)}
.panel-cab h3{margin:0;font-family:var(--serif);font-size:19px;font-weight:600}
.panel-cab .cerrar{margin-left:auto;background:none;border:0;color:#cfc6ba;
  font-size:24px;cursor:pointer;line-height:1;padding:0 4px}
.panel-cab .cerrar:hover{color:#fff}
.panel-cuerpo{padding:20px 22px;overflow-y:auto;flex:1}
.panel-pie{padding:12px 22px;border-top:1px solid var(--gris-claro);
  display:flex;gap:8px;flex-wrap:wrap;background:#f4f0ea}

.bloque{margin-bottom:22px}
.bloque h4{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);
  margin:0 0 10px;padding-bottom:5px;border-bottom:1px solid var(--gris-claro)}
.datos{display:grid;grid-template-columns:130px 1fr;gap:7px 14px;font-size:13.5px}
.datos dt{color:var(--gris);font-size:12.5px}
.datos dd{margin:0}

.historial{list-style:none;margin:0;padding:0;font-size:12.5px}
.historial li{padding:8px 0 8px 14px;border-left:2px solid var(--oro-claro);margin-bottom:4px}
.historial time{display:block;color:var(--gris);font-size:11px}

.familia{list-style:none;margin:0;padding:0;font-size:13px}
.familia li{padding:5px 0;border-bottom:1px dashed var(--gris-claro);cursor:pointer}
.familia li:hover{color:var(--oro)}

/* ---------- Modal ---------- */
/* ---------- El presupuesto y su seguimiento ---------- */
table.presupuesto td.num, table.presupuesto th.num{text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
table.presupuesto tr.categoria td{font-weight:600;background:#faf7f1}
table.presupuesto tr.partida td{font-size:13px;color:var(--negro-suave)}
table.presupuesto tr.suma td{border-top:2px solid var(--gris-claro);background:#f4f0ea}
table.presupuesto tr.fuera td:first-child{color:var(--gris)}
table.presupuesto td.mal{color:var(--rojo);font-weight:600}
table.presupuesto td.logrado{color:var(--verde);font-weight:600}
table.presupuesto .sangria{display:inline-block;width:22px}
.barra-presu{height:6px;border-radius:3px;background:#e7e1d6;overflow:hidden;
  margin-bottom:3px;min-width:70px}
.barra-presu span{display:block;height:100%;background:var(--verde)}
.barra-presu.pasada span{background:var(--rojo)}
.num-presu{width:130px;text-align:right;padding:5px 8px;border:1px solid var(--gris-claro);
  border-radius:6px;font-variant-numeric:tabular-nums}
.num-presu:focus{outline:2px solid var(--oro-claro);border-color:var(--oro)}
.cuadre{font-size:12px;white-space:nowrap}
.cuadre.bien{color:var(--verde)}
.cuadre.mal{color:var(--rojo);font-weight:600}

/* ---------- El visor de documentos ----------
   Los documentos se abren DENTRO del programa. Abrirlos fuera deja sin salida
   a quien lo tiene instalado en el móvil: la ventana que se abre no lleva
   flecha de volver, y hay que cerrar el programa entero para regresar. */
.visor{position:fixed;inset:0;z-index:90;background:var(--papel);
  display:flex;flex-direction:column}
.visor-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--negro);color:#fff;flex:none}
.visor-cab h3{margin:0;font-family:var(--serif);font-size:16px;font-weight:600;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-cab .btn{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.visor-cab .btn:hover{background:rgba(255,255,255,.22)}
.visor-cab .volver{font-weight:600}
.visor-cuerpo{flex:1;min-height:0;background:#3a3733;position:relative}
.visor-cuerpo iframe{width:100%;height:100%;border:0;background:#fff}
.visor-cuerpo .foto{width:100%;height:100%;object-fit:contain;display:block}
.visor-nota{padding:9px 14px;background:#fbf6ea;color:#8a6516;font-size:12.5px;
  border-bottom:1px solid var(--oro-claro);flex:none}
@media (max-width:600px){
  .visor-cab{padding:8px 10px}
  .visor-cab h3{flex-basis:100%;order:-1;font-size:14px}
}

.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;
  justify-content:center;padding:34px 16px;overflow-y:auto}
.modal-caja{background:var(--papel-2);border-radius:var(--radio);width:min(760px,100%);
  box-shadow:0 24px 60px rgba(20,17,15,.3);border-top:4px solid var(--oro)}
.modal-cab{padding:17px 24px;border-bottom:1px solid var(--gris-claro);
  display:flex;align-items:center;gap:12px}
.modal-cab h3{margin:0;font-family:var(--serif);font-size:20px}
.modal-cab .cerrar{margin-left:auto;background:none;border:0;font-size:24px;
  cursor:pointer;color:var(--gris);line-height:1}
.modal-cuerpo{padding:22px 24px}
/* `flex-wrap` no es un adorno: sin él, una ventana con muchos botones los
   saca fuera del marco y no hay manera de pulsar los últimos. Con él, lo que
   no cabe baja a la fila siguiente sin encoger nada. */
.modal-pie{padding:14px 24px;border-top:1px solid var(--gris-claro);
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;background:#f4f0ea;
  border-radius:0 0 var(--radio) var(--radio)}

.rejilla{display:grid;gap:13px;grid-template-columns:repeat(12,1fr)}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}
.c10{grid-column:span 10}.c11{grid-column:span 11}.c12{grid-column:span 12}
.rejilla .campo input,.rejilla .campo select,.rejilla .campo textarea{width:100%}

.seccion-form{font-family:var(--serif);font-size:15px;margin:20px 0 0;
  padding-top:14px;border-top:1px solid var(--gris-claro);grid-column:span 12}
.seccion-form:first-child{margin-top:0;padding-top:0;border-top:0}

.nota{background:#fdf8ed;border:1px solid var(--oro-claro);border-radius:7px;
  padding:11px 13px;font-size:13px;line-height:1.55;color:var(--negro-suave)}
.nota.roja{background:#fdf4f3;border-color:#e4c9c4}
.nota b{color:var(--texto)}
.ayuda{font-size:11.5px;color:var(--gris);line-height:1.45}

/* ---------- Avisos ---------- */
#avisos{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.aviso{background:var(--negro);color:#fff;padding:11px 20px;border-radius:8px;
  box-shadow:var(--sombra);font-size:13.5px;animation:sube .2s ease}
.aviso.error{background:var(--rojo)}
.aviso.exito{background:var(--verde)}
@keyframes sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cargando{padding:44px;text-align:center;color:var(--gris)}

@media (max-width:820px){
  .cabecera h1{font-size:15px}
  .cabecera .ejercicio{display:none}
  .contenido{padding:16px 12px 50px}
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11{grid-column:span 12}
  .datos{grid-template-columns:1fr;gap:2px 0}
  .datos dt{margin-top:8px}
}
@media print{
  .cabecera,.menu,.barra,.paginacion,.panel-pie,#avisos{display:none !important}
  body{padding-top:0 !important}
  body{background:#fff}
  .tabla-caja{border:0;box-shadow:none}
}

/* ==========================================================
   Portal del Hermano
   ========================================================== */

.portal-cab{
  background:var(--portal-fondo);
  color:var(--portal-texto);border-radius:14px;padding:26px 28px;margin-bottom:18px;
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
  /* El borde va en gris a medias y no en oscuro: así se porta igual con un
     degradado negro que con uno claro, que ahora también se puede elegir. */
  border:1px solid rgba(128,120,110,.28);box-shadow:var(--sombra);
}
.portal-saludo{flex:1;min-width:260px}
.portal-saludo h2{font-family:var(--serif);font-size:27px;margin:0 0 4px;font-weight:600;
  line-height:1.2}
.portal-saludo p{margin:0 0 14px;color:var(--oro-claro);font-size:14px}
.portal-pastillas{display:flex;gap:8px;flex-wrap:wrap}
.pp{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:5px 13px;color:var(--portal-texto)}
.pp i{width:7px;height:7px;border-radius:50%;background:#8fbf7f;display:inline-block}
.pp-aviso i{background:#e0a458}
.pp-aviso{color:#f3d2a6;border-color:rgba(224,164,88,.4)}

.portal-numero{border:1px solid rgba(255,255,255,.28);border-radius:12px;
  padding:14px 26px;text-align:center;background:rgba(255,255,255,.05);min-width:170px}
.portal-numero span{display:block;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-claro)}
.portal-numero b{display:block;font-family:var(--serif);font-size:44px;line-height:1.1;
  margin:2px 0}
.portal-numero small{display:block;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--portal-texto);opacity:.72}

.portal-accesos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.acceso{display:inline-flex;align-items:center;gap:9px;background:var(--papel-2);
  border:1px solid var(--gris-claro);border-radius:24px;padding:9px 17px;
  font-size:13.5px;cursor:pointer;color:var(--texto);box-shadow:var(--sombra)}
.acceso:hover:not(:disabled){border-color:var(--oro);transform:translateY(-1px)}
.acceso .ico{font-size:15px}
.acceso.pendiente{opacity:.55;cursor:not-allowed;background:#f4f1eb}
.acceso em{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--gris-claro);border-radius:9px;
  padding:1px 6px;background:#fff}

.portal-datos{padding:20px 24px}
.portal-datos-cab{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap}
.portal-datos-cab h3{font-family:var(--serif);font-size:19px;margin:0}
.portal-campos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
/* En pantalla ancha los cuatro datos van en una sola fila, y ahí repartirlos a
   partes iguales es un desperdicio: un D.N.I. son nueve caracteres y le sobraba
   la mitad del hueco, mientras la dirección se partía en tres renglones. Cada
   uno se lleva lo que necesita. En el móvil no se toca nada: allí cada dato va
   en su propia línea y no compite con los demás. */
/* Ventana mediana: los cuatro no caben en una fila sin apretar la dirección,
   así que se ponen dos y dos. Cada uno respira y nada se parte. */
@media (min-width:1000px) and (max-width:1199px){
  .portal-campos{grid-template-columns:0.9fr 1.9fr}
}
/* Pantalla ancha: los cuatro en una fila, con el peso que pide cada dato. */
@media (min-width:1200px){
  .portal-campos{grid-template-columns:0.8fr 2.2fr 0.9fr 1.6fr}
}
.pcampo{display:flex;gap:11px;align-items:flex-start}
.pcampo .ico{width:30px;height:30px;border-radius:8px;background:#f2ede4;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--negro-suave)}
.pcampo label{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);margin-bottom:2px}
.pcampo b{font-size:14px;font-weight:600;word-break:break-word}

.portal-gestiones{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gestion{background:var(--papel-2);border:1px solid var(--gris-claro);border-radius:10px;
  padding:16px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--sombra)}
.gestion .ico{font-size:18px}
.gestion .txt{flex:1;font-size:14px}
.gestion b{font-family:var(--serif);font-size:21px;font-variant-numeric:tabular-nums}
.gestion.alerta{border-color:#e8cdb4;background:#fdf8f2}
.gestion.alerta b{color:var(--rojo)}

.portal-tut{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tarjeta.tut{padding:16px 18px}
.tut-cab{display:flex;align-items:center;gap:10px;justify-content:space-between;
  margin-bottom:7px}
.tarjeta.tut .btn{margin-top:11px}

.portal-plegables{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.plegable{background:var(--papel-2);border:1px solid var(--gris-claro);border-radius:10px}
.plegable summary{padding:14px 18px;cursor:pointer;font-size:14.5px;font-weight:600;
  list-style:none;display:flex;align-items:center;justify-content:space-between}
.plegable summary::-webkit-details-marker{display:none}
.plegable summary:after{content:"›";font-size:20px;color:var(--gris);
  transform:rotate(90deg);transition:transform .15s}
.plegable[open] summary:after{transform:rotate(-90deg)}
.plegable summary:hover{color:var(--oro)}
.plegable-cuerpo{padding:0 18px 16px;font-size:13.5px;line-height:1.6}

/* ---------- Entrada al programa ---------- */
body.sin-entrar{overflow:hidden}
#entrada{position:fixed;inset:0;z-index:120;background:var(--papel);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.entrada-caja{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-top:4px solid var(--oro);border-radius:14px;padding:34px 34px 26px;
  width:min(400px,100%);text-align:center;box-shadow:0 20px 60px rgba(20,17,15,.16)}
.entrada-caja img{width:96px;height:96px;object-fit:contain;margin-bottom:12px}
.entrada-caja h1{font-family:var(--serif);font-size:20px;margin:0 0 2px;font-weight:600}
.entrada-caja #entrada-sub{margin:0 0 22px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.entrada-caja .ayuda{text-transform:none;letter-spacing:normal;font-size:12.5px;
  line-height:1.55}
.entrada-caja .campo{text-align:left;margin-bottom:13px}
.entrada-caja input{width:100%}
.entrada-caja .btn{width:100%;margin-top:6px;padding:11px}
.entrada-caja .ayuda{margin-top:18px;display:block;text-align:center}
#entrada-error .nota{text-align:left;margin-bottom:12px}

.menu-salir{margin-left:14px;color:#cfc6ba !important;border:0;background:none;
  cursor:pointer;font-size:12.5px;padding:11px 4px}
.menu-salir:hover{color:#fff !important;text-decoration:underline}

/* En el móvil, los módulos en UNA SOLA FILA que se desliza con el dedo a
   izquierda y derecha, como una rueda. En varias filas llegaban a siete y
   tapaban media pantalla cada vez que la barra volvía a salir. A los lados, un
   degradado avisa de que hay más módulos escondidos (lo pone menuComoRueda()
   en app.js), y el módulo en el que se está se centra solo. */
@media (max-width:820px){
  .menu-int{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:0 6px;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .menu-int::-webkit-scrollbar{display:none}
  .menu button{flex:none;white-space:nowrap;padding:11px 12px;scroll-snap-align:center}
  .menu-nota{flex:none;white-space:nowrap}
  .menu::before,.menu::after{content:"";position:absolute;top:0;bottom:0;width:28px;
    pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
  .menu::before{left:0;background:linear-gradient(to right,var(--negro-suave),transparent)}
  .menu::after{right:0;background:linear-gradient(to left,var(--negro-suave),transparent)}
  .menu.mas-izq::before,.menu.mas-der::after{opacity:1}
}

@media (max-width:700px){
  .portal-cab{padding:20px}
  .portal-saludo h2{font-size:22px}
  .portal-numero{width:100%}
}

.escudo-ajuste{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.escudo-ajuste img{width:110px;height:110px;object-fit:contain;flex:none;
  background:#fff;border:1px solid var(--gris-claro);border-radius:12px;padding:8px}
.escudo-ajuste > div{flex:1;min-width:260px}

.entrada-caja .entrada-olvido{margin:16px 0 0;font-size:13px;color:var(--gris);
  text-transform:none;letter-spacing:normal}
.entrada-olvido button{background:none;border:0;padding:0;font-size:inherit;
  color:var(--azul);text-decoration:underline;cursor:pointer;font-family:inherit}
.entrada-olvido button:hover{color:var(--oro)}
#olvido-error .nota,#nueva-error .nota{text-align:left;margin-bottom:12px}
.entrada-caja form .btn + .btn{margin-top:8px}

/* ==========================================================
   Secretaría
   ========================================================== */

.pestanas{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--gris-claro);
  flex-wrap:wrap}
.pestana{background:none;border:0;border-bottom:3px solid transparent;padding:10px 16px;
  cursor:pointer;font-size:14px;color:var(--gris);display:flex;align-items:center;gap:8px}
.pestana:hover{color:var(--texto)}
.pestana.activa{color:var(--texto);border-bottom-color:var(--oro);font-weight:600}
.pestana span{font-size:11px;background:#efe9e0;border-radius:10px;padding:1px 8px;
  color:var(--negro-suave);font-weight:400}
.pestana.activa span{background:var(--oro-claro)}

.docs{display:flex;flex-direction:column;gap:12px}
.doc{background:var(--papel-2);border:1px solid var(--gris-claro);border-radius:var(--radio);
  box-shadow:var(--sombra);display:flex;gap:16px;padding:16px 18px}
.doc-icono{width:64px;height:80px;flex:none;border-radius:7px;background:#f2ede4;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--gris-claro)}
.doc-icono span{font-family:var(--serif);font-size:14px;letter-spacing:.06em;color:var(--gris)}
.doc-icono img{width:100%;height:100%;object-fit:cover}
.doc-cuerpo{flex:1;min-width:0}
.doc-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.doc-num{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--oro)}
.doc-cab h4{margin:0;font-family:var(--serif);font-size:17px;font-weight:600}
.doc-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:7px 0;
  font-size:12.5px;color:var(--gris)}
.doc-resumen{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--negro-suave)}
.doc-pie{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* La firma del documento: siempre a la vista en su ficha, firmado o no */
.doc-firma{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;
  font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:6px;
  border:1px solid var(--gris-claro);background:#faf7f1}
.doc-firma .senal{font-weight:700;flex:none}
.doc-firma.firmada{border-color:#cfdfcb;background:#f4f8f2;color:var(--verde)}
.doc-firma.pendiente{border-color:var(--oro-claro);background:#fbf6ea;color:#8a6516}
.doc-firma .quien{color:var(--negro-suave)}
/* El texto de la firma se parte dentro de su recuadro: sin esto, un nombre
   largo empujaba hacia fuera y en el móvil se salía por la derecha. */
.doc-firma .doc-firma-texto{flex:1;min-width:0;overflow-wrap:anywhere}
.firmantes{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
.firmantes li{display:grid;grid-template-columns:auto minmax(110px,max-content) minmax(0,1fr) auto;
  gap:2px 8px;align-items:baseline;padding:5px 0;border-bottom:1px solid #eee7dd}
.firmantes li:last-child{border-bottom:0}
.firmantes .cargo{color:var(--gris)}
/* En el móvil, cada firmante en dos líneas: el cargo, y debajo quién y cuándo */
@media (max-width:600px){
  .firmantes li{grid-template-columns:auto minmax(0,1fr) auto}
  .firmantes .cargo{grid-column:2 / -1}
  .firmantes li > :nth-child(3){grid-column:2}
}

.categorias{list-style:none;margin:0;padding:0}
.categorias li{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid #eee7dd}
.categorias li > div:first-child{flex:1}
.categorias li:last-child{border-bottom:0}

#sec-aviso code{background:#efe9e0;padding:1px 6px;border-radius:5px;font-size:12px}

/* ---------- Permisos ---------- */
.permisos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  max-height:52vh;overflow-y:auto;padding:4px 2px}
.permisos-modulo{background:#faf7f2;border:1px solid var(--gris-claro);
  border-radius:9px;padding:12px 14px}
.permisos-modulo h4{margin:0 0 9px;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--gris)}
.permiso{display:flex;gap:9px;align-items:flex-start;padding:4px 0;cursor:pointer;
  font-size:13px;line-height:1.4}
.permiso input{margin-top:2px;flex:none;accent-color:var(--negro)}
.permiso em{font-style:normal;font-size:10px;color:var(--oro);letter-spacing:.03em;
  display:block}

/* ==========================================================
   Tesorería
   ========================================================== */

.dos-columnas{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  margin-top:22px}

.grafico{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:var(--radio);padding:14px 16px 8px;box-shadow:var(--sombra)}
.grafico svg{width:100%;height:auto;display:block}
.leyendas{display:flex;gap:16px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.leyenda{font-size:12px;color:var(--gris);display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

.barras-h{display:flex;flex-direction:column;gap:7px;background:var(--papel-2);
  border:1px solid var(--gris-claro);border-radius:var(--radio);padding:14px 16px;
  box-shadow:var(--sombra)}
.barra-h{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;gap:10px;
  align-items:center;font-size:12.5px}
.barra-h .etiqueta{color:var(--negro-suave);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.barra-h .pista{background:#efe9e0;border-radius:4px;height:13px;overflow:hidden}
.barra-h .pista i{display:block;height:100%;border-radius:4px}
.barra-h .valor{font-variant-numeric:tabular-nums;color:var(--texto);font-weight:600}

tr.fila-categoria td{background:#faf7f2;border-top:1px solid var(--gris-claro)}
tr.fila-total td{background:#f2ede4;border-top:2px solid var(--oro);font-size:14px}

.anos-elegir{display:flex;gap:8px;flex-wrap:wrap}
.anos-elegir .ano{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
  border:1px solid var(--gris-claro);border-radius:20px;padding:6px 13px;cursor:pointer;
  background:#fff}
.anos-elegir .ano:hover{border-color:var(--oro)}

.cifras.dinero{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
/* El dinero va un punto por debajo de los demás contadores —24 en vez de 27—,
   que es lo que pidió la hermandad al verlos juntos: un importe trae siempre
   más caracteres que un recuento, y al mismo cuerpo pesa demasiado en la
   pantalla. Además pide su tarjeta más ancha y no partirse por la mitad. */
.cifras.dinero .cifra b{font-size:24px;white-space:nowrap}

/* ---------- Puesta a cero ---------- */
.vaciar-lista{display:flex;flex-direction:column;gap:8px}
.vaciar-bloque{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--gris-claro);border-radius:9px;background:var(--papel-2);
  cursor:pointer;font-size:13.5px}
.vaciar-bloque:hover{border-color:var(--oro)}
.vaciar-bloque input{margin-top:3px;flex:none;accent-color:var(--rojo)}
.vaciar-bloque.vacio{opacity:.55;cursor:default;background:#f5f2ec}
.vaciar-bloque.vacio:hover{border-color:var(--gris-claro)}
.cuenta-registros{font-size:12px;color:var(--rojo);margin-top:3px}
.vaciar-bloque.vacio .cuenta-registros{color:var(--gris)}

/* ---------------- correo y mensajería ---------------- */

.nota.verde{background:#f3f8f2;border-color:#c8d8c4}

.bloque-oauth{border:1px solid var(--oro-claro);border-radius:9px;
  padding:16px 18px;background:#fdfbf6;margin:6px 0}
.bloque-oauth h4{margin:0 0 8px;font-size:15px}

.oauth-paso p{margin:6px 0}
.oauth-codigo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;
  letter-spacing:3px;text-align:center;background:var(--papel-2);
  border:1px dashed var(--oro-claro);border-radius:9px;padding:14px;margin:8px 0;
  user-select:all}
.oauth-enlace{text-align:center;font-size:15px;word-break:break-all}

.ayuda-larga{font-size:14px;line-height:1.65}
.ayuda-larga ol{margin:10px 0 10px 20px;padding:0}
.ayuda-larga li{margin-bottom:7px}

tbody tr.sin-leer td{font-weight:600;background:#fffdf7}
tbody tr.sin-leer td:first-child{box-shadow:inset 3px 0 0 var(--oro-claro)}

.mensaje-cab{border-bottom:1px solid var(--gris-claro);padding-bottom:10px;
  margin-bottom:14px;font-size:14px;line-height:1.6}
.mensaje-cuerpo{white-space:pre-wrap;font-size:14px;line-height:1.65;
  max-height:52vh;overflow-y:auto;word-break:break-word}

/* Los ficheros que trae un correo. Se pulsan y se abren en el visor del
   programa, así que tienen que parecer lo que son: botones, no una lista de
   nombres sueltos como antes. El clip los distingue de un vistazo. */
.adjuntos-correo{border-top:1px solid var(--gris-claro);margin-top:14px;padding-top:12px}
.adjuntos-correo > b{display:block;font-size:13px;margin-bottom:8px}
.adjuntos-correo .adjunto{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;margin-bottom:6px;font:inherit;font-size:13.5px;
  border:1px solid var(--gris-claro);border-radius:8px;
  background:var(--papel-2);color:inherit;cursor:pointer;
}
.adjuntos-correo .adjunto::before{content:"📎";font-size:15px;flex:none}
.adjuntos-correo .adjunto:hover{border-color:var(--oro)}
.adjuntos-correo .adjunto:disabled{opacity:.6;cursor:default}
.adjuntos-correo .adjunto .nombre{flex:1;min-width:0;overflow-wrap:anywhere}

.lista-elegir{max-height:280px;overflow-y:auto;border:1px solid var(--gris-claro);
  border-radius:8px;background:var(--papel-2);padding:6px 4px;margin-top:8px}
.elegible{display:flex;align-items:center;gap:9px;padding:6px 10px;
  border-radius:6px;cursor:pointer;font-size:13.5px}
.elegible:hover{background:#fbf7f0}
.elegible input{width:15px;height:15px;accent-color:var(--negro);cursor:pointer}
.elegible .tenue{margin-left:6px}
.rotulo{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);margin-bottom:2px}
tbody tr.pulsable{cursor:pointer}
.etiqueta.verde{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  color:var(--verde);border:1px solid #c8d8c4;background:#f3f8f2;font-weight:600}
.etiqueta.roja{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  color:#9c3a2e;border:1px solid #e4c9c4;background:#fdf4f3;font-weight:600}

/* El botón de quitar un mensaje del buzón: discreto hasta que se pasa por encima */
td.celda-borrar{text-align:center;padding-right:10px}
.btn-borrar-msj{background:none;border:0;cursor:pointer;line-height:0;display:inline-flex;
  padding:5px 7px;border-radius:6px;opacity:.28;color:var(--gris);transition:opacity .12s}
tbody tr:hover .btn-borrar-msj{opacity:.75}
.btn-borrar-msj:hover{opacity:1;background:#fdf4f3;color:#9c3a2e}

/* Barra que aparece al marcar mensajes del buzón */
#barra-marcados:empty,#barra-internos:empty{display:none}
#barra-marcados.activa,#barra-internos.activa{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:var(--papel-2);border:1px solid var(--oro-claro);border-radius:9px;
  padding:10px 14px;margin-bottom:12px;font-size:13.5px}
#barra-marcados b,#barra-internos b{color:var(--texto)}
#barra-marcados .btn,#barra-internos .btn{padding:6px 12px;font-size:13px}
#barra-marcados .btn.plano,#barra-internos .btn.plano{border-color:transparent;background:none;color:var(--gris)}
#barra-marcados .btn.plano:hover,#barra-internos .btn.plano:hover{color:var(--texto);text-decoration:underline}
td.celda-marca, th.celda-marca{width:34px;text-align:center;padding-left:12px}
.celda-marca input{width:15px;height:15px;accent-color:var(--negro);cursor:pointer}

/* ---------------- calendario ---------------- */

.barra-mes{align-items:flex-end}
.mes-titulo{margin:0;font-size:21px;font-weight:600;letter-spacing:.01em}

.rejilla-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  /* minmax(0,1fr) y no 1fr: si no, el título de un acto largo ensancha su
     columna y descuadra la semana entera. */
  background:var(--gris-claro);border:1px solid var(--gris-claro);
  border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.cab-dia{background:#f6f1e8;padding:8px 6px;text-align:center;font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--gris);font-weight:600}
.casilla{background:var(--papel-2);min-height:104px;padding:5px 6px 7px;
  display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.casilla.otro-mes{background:#faf7f2}
.casilla.otro-mes .num-dia{color:#c3bab0}
.casilla.hoy{background:#fffdf5;box-shadow:inset 0 0 0 2px var(--oro-claro)}
.num-dia{font-size:12px;color:var(--gris);font-weight:600;margin-bottom:1px}
.casilla.hoy .num-dia{color:var(--texto)}

.chip{display:block;width:100%;text-align:left;border:0;border-radius:5px;
  padding:3px 6px;font-size:11.5px;line-height:1.35;cursor:pointer;font:inherit;
  font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:#efe9e0;color:var(--texto);border-left:3px solid var(--gris)}
.chip:hover{filter:brightness(.96)}
.chip b{font-weight:600}
.chip.morado{background:#f3eef6;border-left-color:#6b4f7d}
.chip.oro{background:#fdf8ed;border-left-color:#b9922f}
.chip.verde{background:#f1f6f0;border-left-color:var(--verde)}
.chip.gris{background:#f1efec;border-left-color:#8a8179}
.chip.anulado{text-decoration:line-through;opacity:.55}

.actos{display:flex;flex-direction:column;gap:10px}
.acto{display:flex;gap:16px;align-items:flex-start;background:var(--papel-2);
  border:1px solid var(--gris-claro);border-left:4px solid var(--gris);
  border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra);cursor:pointer}
.acto:hover{border-color:var(--oro-claro)}
.acto.morado{border-left-color:#6b4f7d}
.acto.oro{border-left-color:#b9922f}
.acto.verde{border-left-color:var(--verde)}
.acto.gris{border-left-color:#8a8179}
.acto-fecha{flex:none;width:52px;text-align:center;line-height:1.15}
.acto-fecha b{display:block;font-size:23px}
.acto-fecha span{display:block;font-size:11px;text-transform:uppercase;color:var(--gris)}
.acto-fecha em{display:block;font-size:10.5px;color:#b6ada3;font-style:normal}
.acto-cuerpo{flex:1;min-width:0}
.acto-cuerpo h4{margin:0 0 3px;font-size:15.5px;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.acto-texto{margin:6px 0 0;font-size:13.5px;color:var(--negro-suave)}
.acto-cuando{flex:none;font-size:12px;color:var(--gris);white-space:nowrap;padding-top:4px}

.etiqueta.gris{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  color:var(--gris);border:1px solid var(--gris-claro);background:#f6f1e8;font-weight:600}

dl.ficha-acto{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0 0 14px;
  font-size:14px}
dl.ficha-acto dt{color:var(--gris);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;padding-top:2px}
dl.ficha-acto dd{margin:0}
.acto-descripcion{white-space:pre-wrap;font-size:14px;line-height:1.6;
  border-top:1px solid var(--gris-claro);padding-top:12px}

.bloque-asistencia{margin-top:16px;border-top:1px solid var(--gris-claro);padding-top:14px}
.bloque-asistencia h4{margin:0 0 8px;font-size:14px}
.botonera-asistencia{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.lista-respuestas{margin-top:8px;font-size:13.5px}
.lista-respuestas summary{cursor:pointer;color:var(--gris)}
.lista-respuestas ul{list-style:none;margin:8px 0 0;padding:0;max-height:200px;
  overflow-y:auto}
.lista-respuestas li{padding:3px 0;border-bottom:1px dashed var(--gris-claro)}
.marca-resp{display:inline-block;width:16px;font-weight:700}
.marca-resp.si{color:var(--verde)}
.marca-resp.no{color:var(--rojo)}

.casilla-larga{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:14px;padding:4px 0}
/* Una casilla con su explicación NO es el rótulo de un campo: ni va en
   mayúsculas ni en cuerpo 11 ni en gris. Dentro de un `.campo` se la comían
   las reglas del rótulo y salía apelotonada y a gritos. */
.campo > .casilla-larga{text-transform:none;letter-spacing:normal;
  font-size:14px;color:var(--texto);width:100%}
/* Y la casilla es una casilla, no una caja de escribir: los formularios de
   rejilla estiran sus campos al 100 % del ancho y aquí eso hacía un cuadradito
   de medio palmo que echaba el texto fuera del recuadro. */
.campo > .casilla-larga input[type=checkbox]{width:16px;flex:none}
.casilla-larga input{width:16px;height:16px;margin-top:2px;accent-color:var(--negro);
  cursor:pointer;flex:none}
.casilla-larga em{display:block;font-style:normal;font-size:12.5px;color:var(--gris);
  margin-top:2px}
textarea.vista-previa{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:#faf7f2;color:var(--negro-suave)}

/* Barra de recordatorios pendientes del calendario */
#c-avisos:empty{display:none}
#c-avisos.activa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fdf8ed;border:1px solid var(--oro-claro);border-radius:9px;
  padding:11px 15px;margin-bottom:14px;font-size:13.5px}
#c-avisos b{color:var(--texto)}
#c-avisos .btn{padding:6px 12px;font-size:13px}

/* ---------------- cargos y grupos ---------------- */

.tarjetas-grupo{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px}
.tarjeta-grupo{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra);cursor:pointer}
.tarjeta-grupo:hover{border-color:var(--oro-claro)}
.tarjeta-grupo.inactivo{opacity:.6}
.tarjeta-grupo h4{margin:0 0 6px;font-size:15.5px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.tarjeta-grupo p{margin:0;font-size:13px}
.cuenta-grupo{margin-top:10px !important;font-size:13.5px !important}
.cuenta-grupo b{font-size:17px}

.titulo-lista{margin:20px 0 8px;font-size:14px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris)}
.titulo-lista:first-child{margin-top:4px}
.acciones-fila{text-align:right;white-space:nowrap}
.acciones-fila .btn.plano{border-color:transparent;background:none;padding:4px 8px;
  font-size:12.5px;color:var(--gris)}
.acciones-fila .btn.plano:hover{color:var(--texto);text-decoration:underline}

.marcador-junta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.marcador-junta .cifra{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:var(--radio);padding:12px 20px;box-shadow:var(--sombra);
  text-align:center;min-width:120px}
.marcador-junta .cifra b{display:block;font-size:26px;line-height:1.1}
.marcador-junta .cifra span{font-size:12px;color:var(--gris)}

/* Columnas de una sola línea: el nº de hermano, la fecha y los botones no
   deben partirse nunca, y son las que hacían crecer la fila a tres renglones. */
#pantalla-usuarios th.col-corta, #pantalla-usuarios td.col-corta{white-space:nowrap}
tbody tr.retirado td{opacity:.55}

/* ---------------- colores de los perfiles ---------------- */
/* Cada perfil lleva el suyo, elegido al crearlo. El de Hermano se queda como
   estaba —oro—, que es el que llevan 338 de las 340 cuentas. */
.pastilla.perfil-oro{color:#8a6516;border-color:#e8d9b4;background:#fdf8ed}
.pastilla.perfil-morado{color:#5d4470;border-color:#d5c8e0;background:#f6f2f9}
.pastilla.perfil-verde{color:var(--verde);border-color:#c8d8c4;background:#f3f8f2}
.pastilla.perfil-azul{color:var(--azul);border-color:#c3d3e0;background:#f2f7fb}
.pastilla.perfil-rojo{color:var(--rojo);border-color:#e4c9c4;background:#fdf4f3}
.pastilla.perfil-gris{color:var(--gris);border-color:var(--gris-claro);background:#f6f1e8}

.muestra-color{display:inline-block;width:15px;height:15px;border-radius:50%;
  margin-right:8px;vertical-align:-3px;border:1px solid rgba(0,0,0,.12)}
.elegir-color{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.elegir-color label{display:flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--gris-claro);border-radius:20px;padding:5px 12px 5px 9px;
  font-size:13px}
.elegir-color input{display:none}
.elegir-color label:has(input:checked){border-color:var(--negro);
  box-shadow:inset 0 0 0 1px var(--negro)}
.permisos-caja{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;max-height:46vh;overflow-y:auto;padding-right:4px}

/* ---------------- inventario ---------------- */

.piezas{display:flex;flex-direction:column;gap:10px}
.pieza{display:flex;gap:16px;align-items:center;background:var(--papel-2);
  border:1px solid var(--gris-claro);border-radius:var(--radio);padding:12px 16px;
  box-shadow:var(--sombra);cursor:pointer}
.pieza:hover{border-color:var(--oro-claro)}
.pieza.de-baja{opacity:.6}
.pieza-foto{width:70px;height:70px;flex:none;border-radius:8px;overflow:hidden;
  background:#f2ede4;display:flex;align-items:center;justify-content:center}
.pieza-foto img{width:100%;height:100%;object-fit:cover}
.sin-foto{font-size:10px;color:var(--gris);text-align:center;padding:0 6px;line-height:1.3}
.pieza-cuerpo{flex:1;min-width:0}
.pieza-cuerpo h4{margin:0 0 3px;font-size:15.5px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.pieza-cuerpo p{margin:0;font-size:13px}
.pieza-texto{margin-top:5px !important;color:var(--negro-suave)}
.pieza-estado{flex:none;text-align:right}
.etiqueta.morada{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
  color:#5d4470;border:1px solid #d5c8e0;background:#f6f2f9;font-weight:600}

.fotos-pieza{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fotos-pieza figure{margin:0;position:relative;width:120px;height:120px;
  border-radius:9px;overflow:hidden;background:#f2ede4}
.fotos-pieza img{width:100%;height:100%;object-fit:cover}
.btn-quitar-foto{position:absolute;top:4px;right:4px;border:0;border-radius:50%;
  width:22px;height:22px;background:rgba(255,255,255,.9);cursor:pointer;
  font-size:15px;line-height:1;color:var(--rojo)}

/* Una fotografía del inventario, en grande. Va por encima de las ventanas
   (z-index 100) para que la ficha se quede debajo esperando. */
.fotos-pieza img{cursor:zoom-in}
.foto-grande{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;padding:34px 24px 54px;background:rgba(20,17,15,.9);
  cursor:zoom-out}
.foto-grande img{max-width:100%;max-height:100%;object-fit:contain;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.foto-grande-pie{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  color:#fff;opacity:.8;font-size:13px;padding:0 20px}

/* Los dos escudos de los papeles, uno al lado del otro. El cuadro a cuadros
   deja ver si el escudo tiene el fondo transparente o trae un rectángulo
   blanco pegado, que en un papel se nota. */
.escudos-papeles{display:flex;gap:18px;flex-wrap:wrap}
.escudo-papel{display:flex;gap:14px;align-items:flex-start;flex:1 1 320px;
  border:1px solid var(--gris-claro);border-radius:var(--radio);padding:14px}
.escudo-papel img{width:86px;height:86px;object-fit:contain;flex:0 0 auto;
  border-radius:8px;
  background-color:#fff;
  background-image:linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0}
.escudo-papel b{font-size:14px}

/* La ventana de elegir a alguien: hermano o quien no lo es. */
.elegir-tipo{display:flex;gap:6px;margin:0 0 12px}
.elegir-tipo button{flex:1;padding:9px 10px;border:1px solid var(--gris-claro);
  border-radius:9px;background:var(--papel);cursor:pointer;font:inherit;color:var(--texto)}
.elegir-tipo button.activa{border-color:var(--oro);background:var(--oro-claro);font-weight:600}
.elegir-lista{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin:6px 0}
.elegible-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;
  text-align:left;padding:8px 10px;border:1px solid var(--gris-claro);border-radius:8px;
  background:none;cursor:pointer;font:inherit;color:inherit}
.elegible-fila:hover{background:var(--papel-2)}
.elegible-fila.elegida{border-color:var(--oro);box-shadow:inset 0 0 0 1px var(--oro);
  background:var(--oro-claro)}
.elegible-fila[disabled]{opacity:.5;cursor:not-allowed}
.elegible-fila .tenue{font-size:12.5px;text-align:right}
.elegible-fila .aviso{color:var(--rojo)}
.elegir-nuevo{border:1px dashed var(--gris-claro);border-radius:10px;padding:10px 12px;margin-top:8px}
.elegir-nuevo .nota{margin:8px 0 0}

/* Los tramos del cortejo */
.subpestanas{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.subpestanas button{padding:6px 16px;border:1px solid var(--gris-claro);border-radius:20px;
  background:var(--papel);cursor:pointer;font:inherit;color:var(--texto)}
.subpestanas button.activa{background:var(--negro);border-color:var(--negro);color:#fff}
.paso-cortejo{margin:20px 0 6px}
.paso-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid var(--oro);padding-bottom:4px;margin-bottom:10px}
.paso-cab h3{font-family:var(--serif);margin:0;font-size:19px}
.tarjeta.tramo{padding:12px 16px;margin:0 0 10px}
/* Los tramos se pliegan: cerrados, una línea con su resumen y sus botones */
.tarjeta.tramo h4.plegar{cursor:pointer;user-select:none}
.tarjeta.tramo h4.plegar:hover .flecha-plegar{color:var(--oro)}
.flecha-plegar{display:inline-block;width:16px;color:var(--gris);font-size:13px}
.tarjeta.tramo.plegado .tramo-cuerpo{display:none}
.tarjeta.tramo:not(.plegado) .tramo-resumen{display:none}
.tramo-resumen{margin:4px 0 0 16px;font-size:12.5px;color:var(--gris)}
.num-tramo{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--oro-claro);color:var(--texto);font-family:var(--sans);
  font-size:12.5px;font-weight:600}
.tramo-datos{margin:6px 0 2px;font-size:14px}
details.parejas summary{cursor:pointer;font-size:14px;margin-top:6px;color:var(--gris)}
.parejas-lista{margin:8px 0 0;padding-left:28px;display:flex;flex-direction:column;gap:5px}
.parejas-lista li{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.parejas-lista li::marker{color:var(--oro);font-size:12px}
/* En el móvil cada pareja va en dos líneas; la raya de abajo las separa. */
@media (max-width:640px){.parejas-lista li{grid-template-columns:1fr;padding-bottom:6px;
  border-bottom:1px dashed var(--gris-claro)}}
.integrante{display:flex;align-items:center;gap:6px;padding:4px 8px;min-width:0;
  border:1px solid var(--gris-claro);border-radius:8px;font-size:13.5px;background:var(--papel)}
.integrante .quien{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.integrante .tenue{font-size:12px;white-space:nowrap}
.integrante.fijado{background:var(--papel-2)}
.btn-mini{border:0;background:none;cursor:pointer;color:var(--gris);font-size:15px;padding:0 3px}
.btn-mini:hover{color:var(--texto)}
.chincheta{font-size:13px;line-height:1}
.chincheta.suelta{opacity:.25;filter:grayscale(1)}
.chincheta.suelta:hover{opacity:.8;filter:none}
/* Los enseres y los puestos dentro de la tarjeta del tramo */
.tramo-bloque{margin:8px 0 4px;border-top:1px solid var(--gris-claro);padding-top:6px}
.tramo-bloque-cab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);margin-bottom:4px}
.fila-tramo{display:grid;grid-template-columns:110px minmax(140px,1fr) 2fr auto;
  gap:8px;align-items:center;padding:4px 0;font-size:14px}
.fila-tramo.acompana .sitio{padding-left:10px}
.fila-tramo .sitio{color:var(--gris);font-size:12.5px}
.fila-tramo .que{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fila-tramo .portadores{display:flex;flex-wrap:wrap;gap:4px}
.portador{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  border:1px solid var(--gris-claro);border-radius:12px;font-size:13px;background:var(--papel)}
.fila-tramo .acciones-fila{display:flex;gap:4px;align-items:center}
@media (max-width:640px){
  .fila-tramo{grid-template-columns:1fr auto}
  .fila-tramo .sitio{grid-column:1 / -1}
  .fila-tramo .portadores{grid-column:1 / -1}
}
.lleva{font-size:11.5px;color:var(--gris);border:1px solid var(--gris-claro);
  border-radius:8px;padding:0 5px;margin-left:2px;white-space:nowrap}
.bandeja{border-color:var(--oro)}
select.sin-decir{border-color:var(--rojo)}
.elegir-paso{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.elegir-paso label{display:flex;gap:6px;align-items:center;cursor:pointer}

.diputado-elegido{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:34px}

/* Los papeles de la Junta de Antigüedad: una fila por papel, con su nombre,
   su plural, cuántos son y la cruz de quitarlo. */
.papeles-junta{display:flex;flex-direction:column;gap:8px}
#tramos-tipos{margin:4px 0 6px 30px}
.tabla select.va-de{padding:3px 6px;font-size:13px;min-width:0}
.papel-junta{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  border:1px solid var(--gris-claro);border-radius:9px;padding:10px 12px}
.papel-junta .campo{padding:0;margin:0}
.papel-junta .campo.nombre{flex:1 1 150px}
.papel-junta .campo.plural{flex:1 1 150px}
.papel-junta .campo.cuantos{flex:0 0 110px}
.papel-junta label{display:block;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris);margin-bottom:3px}
.papel-junta.apagado{background:var(--papel-2);opacity:.75}
.papel-junta .quitar{border:0;background:none;cursor:pointer;color:var(--gris);
  font-size:20px;line-height:1;padding:0 4px;align-self:center}
.papel-junta .quitar:hover{color:var(--rojo)}

/* La tabla de «Varios apuntes»: una fila por apunte, con sus casillas
   dentro. El renglón que falla se marca en rojo al intentar guardar. */
table.varios-apuntes input, table.varios-apuntes select{width:100%;
  padding:5px 7px;font-size:13px;border:1px solid var(--gris-claro);
  border-radius:6px;background:var(--papel-2);font-family:inherit}
table.varios-apuntes td{padding:4px 5px;vertical-align:middle}
table.varios-apuntes th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gris);font-weight:600;padding:6px 5px;text-align:left}
table.varios-apuntes tr.mal input, table.varios-apuntes tr.mal select{
  border-color:var(--rojo);background:#fdf3f2}
table.varios-apuntes .quitar{border:0;background:none;cursor:pointer;
  color:var(--gris);font-size:18px;line-height:1;padding:0 3px}
table.varios-apuntes .quitar:hover{color:var(--rojo)}
.varios-total{margin-top:12px;padding-top:10px;border-top:1px solid var(--gris-claro);
  text-align:right;font-family:var(--serif);font-size:15px}

.ejemplares{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.ejemplar{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  border:1px solid var(--gris-claro);border-radius:20px;padding:3px 6px 3px 11px;
  background:var(--papel-2)}
.ejemplar.tocado{border-color:#e8cdb4;background:#fdf3ea}
.ejemplar button{border:0;background:none;cursor:pointer;color:var(--gris);
  font-size:14px;line-height:1;padding:0 3px}
.ejemplar button:hover{color:var(--rojo)}

.banda-convocatoria{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;background:var(--papel-2);border:1px solid var(--gris-claro);
  border-left:4px solid var(--gris);border-radius:var(--radio);padding:14px 18px;
  box-shadow:var(--sombra);margin-bottom:16px}
.banda-convocatoria.abierta{border-left-color:var(--verde);background:#f7fbf6}
.banda-convocatoria h3{margin:0 0 3px;font-size:17px}
.banda-convocatoria p{margin:0;font-size:13px}

.preferencia{display:block;font-size:13px;line-height:1.5}
.preferencia.agotado{color:var(--gris);text-decoration:line-through}

.elegir-enseres{display:flex;flex-direction:column;gap:6px;max-height:44vh;
  overflow-y:auto;border:1px solid var(--gris-claro);border-radius:9px;padding:8px}
.enser{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;
  cursor:pointer;font-size:14px}
.enser:hover{background:#fbf7f0}
.enser.elegido{background:#f3f8f2}
.enser input{width:16px;height:16px;accent-color:var(--negro);cursor:pointer}
.enser .orden{width:24px;font-weight:700;color:var(--verde);font-size:13px}
.enser-datos{display:flex;flex-direction:column;line-height:1.35}

/* ---------- Mejoras del Portal del Hermano ---------- */

/* Los mensajes que el hermano ha escrito a la hermandad, en su portal */
.hilo{ display:flex; flex-direction:column; gap:12px; }
.hilo-msj{
  border:1px solid var(--gris-claro); border-radius:8px;
  padding:14px 16px; background:var(--papel-2);
}
.hilo-msj > header{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin-bottom:6px; flex-wrap:wrap;
}
.hilo-msj > header b{ font-size:15px; }
.hilo-texto{ white-space:pre-wrap; line-height:1.55; }
.hilo-respuesta{
  margin-top:12px; padding:12px 14px 12px 16px;
  border-left:3px solid var(--verde);
  background:rgba(75,107,69,.06); border-radius:0 6px 6px 0;
}
.hilo-respuesta .quien{ font-size:12px; font-weight:700; color:var(--verde); }
.hilo-sin-respuesta{ margin-top:10px; font-size:13px; }

/* Buzón interno visto desde Mensajería */
.interno-de b{ display:block; }
.interno-cuerpo{ white-space:pre-wrap; line-height:1.6; margin:14px 0; }
.interno-ficha{
  display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 14px;
  border:1px solid var(--gris-claro); border-radius:8px;
  background:var(--papel); font-size:13px;
}

/* Documentos y certificados abiertos al hermano */
.lista-descargas{ display:flex; flex-direction:column; gap:8px; }
.descarga{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--gris-claro); border-radius:8px;
  text-decoration:none; color:inherit; background:var(--papel-2);
}
.descarga[role="button"], .descarga[data-certificado], .descarga[data-expedir]{ cursor:pointer; }
.descarga:hover{ border-color:var(--oro); }
.descarga .ico{ font-size:20px; width:26px; text-align:center; }
.descarga .txt{ flex:1; min-width:0; }
.descarga .txt b{ display:block; }
.descarga.apagada{ opacity:.55; }
.descarga.apagada:hover{ border-color:var(--gris-claro); }

/* Elegir entre dos o tres cosas, cada una con su explicación debajo */
.opcion{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1px solid var(--gris-claro); border-radius:8px;
  cursor:pointer; margin-bottom:10px; background:var(--papel-2);
}
.opcion:hover{ border-color:var(--oro); }
.opcion input{ width:15px; height:15px; margin-top:2px; accent-color:var(--negro); cursor:pointer; }
.opcion em{ display:block; font-style:normal; font-size:13px; color:var(--gris); margin-top:2px; }

/* ---------- Secretaría: convocatorias y registro ---------- */

/* Pestañas de segundo nivel, dentro de un apartado */
.pestanas.sub{ margin:0 0 6px; border-bottom:0; }
.pestanas.sub .pestana{ font-size:13px; padding:6px 14px; }

/* El orden del día, en la ficha de la convocatoria */
.orden-dia{ margin:10px 0 4px; padding-left:22px; font-size:13.5px; line-height:1.6; }
.orden-dia li{ margin:2px 0; }

/* El orden del día mientras se escribe */
.punto-od{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.punto-od .num{
  width:22px; text-align:right; font-family:var(--serif);
  font-size:15px; color:var(--gris); flex:0 0 auto;
}
.punto-od input{ flex:1; min-width:0; }
.btn-quitar-punto{
  flex:0 0 auto; width:28px; height:28px; padding:0; line-height:1;
  border:1px solid var(--gris-claro); border-radius:6px;
  background:var(--papel-2); color:var(--gris); font-size:17px; cursor:pointer;
}
.btn-quitar-punto:hover{ border-color:var(--rojo); color:var(--rojo); }

/* Cuenta de reuniones pendientes de convocar, en su botón */
.btn .cuenta{
  display:inline-block; margin-left:7px; padding:0 7px; border-radius:9px;
  background:var(--oro-claro); color:var(--negro-suave);
  font-size:11px; font-weight:600;
}

/* La lista de resultados al buscar un hermano para su certificado */
#ct-resultados{
  max-height:260px; overflow-y:auto; margin-top:6px;
  border:1px solid var(--gris-claro); border-radius:8px; background:var(--papel-2);
}
#ct-resultados .elegible{ cursor:pointer; }

/* ---------- Instalar en el móvil ---------- */

.aviso-instalar{
  position:fixed; left:12px; right:12px; z-index:85;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:var(--negro); color:var(--papel);
  box-shadow:0 6px 28px rgba(20,17,15,.35);
  animation:sube-aviso .28s ease-out;
}
@keyframes sube-aviso{ from{ transform:translateY(16px); opacity:0 } to{ transform:none; opacity:1 } }
.aviso-instalar img{ width:38px; height:38px; border-radius:8px; background:var(--papel-2); }
.aviso-instalar .texto{ flex:1; min-width:0; line-height:1.4; }
/* Solo el titular va en su propia línea; las negritas de dentro de la
   explicación —«Compartir», «Añadir a pantalla de inicio»— no. */
.aviso-instalar .texto > b{ display:block; font-family:var(--serif); font-size:15px; }
.aviso-instalar .texto span{ display:block; font-size:12.5px; color:var(--gris-claro); }
.aviso-instalar .texto span b{ color:var(--papel); font-weight:600; }
.aviso-instalar .texto i{ font-style:normal; }
.aviso-instalar .btn{ flex:0 0 auto; }
.aviso-instalar .btn.principal{ background:var(--oro); border-color:var(--oro); color:var(--texto); }
.aviso-instalar .btn.plano{
  border-color:transparent; background:none; color:var(--gris-claro);
  font-size:19px; padding:2px 8px;
}
.aviso-instalar .btn.plano:hover{ color:#fff; }

/* El aviso de «ábralo en Chrome» tiene más que contar que el de instalar, y en
   un móvil estrecho el texto y el botón se estrangulan si van en la misma
   línea: quedaban tres palabras por renglón. Este se apila —icono, texto y la
   equis arriba; el botón entero debajo— y así se lee del tirón. */
.aviso-instalar.apilado{ flex-wrap:wrap; }
.aviso-instalar.apilado .btn.plano{ order:2; align-self:flex-start; }
.aviso-instalar.apilado .btn.principal{ order:3; flex:1 0 100%; margin-top:2px; }

@media (min-width:640px){
  .aviso-instalar{ left:auto; right:20px; max-width:420px; }
}

/* Instalado en el móvil, la pantalla llega hasta los bordes */
@media (display-mode:standalone){
  .cabecera{ padding-top:env(safe-area-inset-top); }
  body{ padding-bottom:env(safe-area-inset-bottom); }
}


/* Contador de la última copia de seguridad descargada. El color dice de un
   vistazo si la hermandad está protegida o lleva un mes sin estarlo. */
.contador-copia{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:10px;border-left:4px solid;
  margin:0 0 12px;
}
.contador-copia b{font-family:var(--serif);font-size:17px;line-height:1.25}
.contador-copia span{font-size:13.5px;color:var(--gris)}
.contador-copia.bien {background:#eef3ec;border-color:var(--verde)}
.contador-copia.bien b{color:var(--verde)}
.contador-copia.medio{background:#f5f1e7;border-color:var(--oro)}
.contador-copia.medio b{color:var(--oro)}
.contador-copia.mal  {background:#fbeeec;border-color:var(--rojo)}
.contador-copia.mal  b{color:var(--rojo)}


/* Bloque para activar los avisos del móvil, en el portal y en Mensajería. */
.aviso-avisos{
  display:flex;flex-direction:column;gap:3px;
  background:#f3efe7;border-left:4px solid var(--oro);
  padding:12px 15px;border-radius:0 10px 10px 0;margin:0 0 16px;
}
.aviso-avisos.puesto{background:#eef3ec;border-color:var(--verde)}
.aviso-avisos b{font-family:var(--serif);font-size:16.5px}
.aviso-avisos.puesto b{color:var(--verde)}
.aviso-avisos span{font-size:13.5px;color:var(--gris)}
.botones-avisos{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
/* Dentro del desplegable «Notificaciones» del portal no sobra hueco abajo */
.plegable-cuerpo .aviso-avisos{margin-bottom:0}


/* ---- Papeleta de sitio en el Portal del Hermano ---- */
.papeleta-caja{
  background:var(--papel-2);border:1px solid var(--gris-claro);
  border-left:4px solid var(--oro);border-radius:0 10px 10px 0;
  padding:14px 18px;margin:18px 0 0;box-shadow:var(--sombra);
}
.papeleta-caja b{font-family:var(--serif);font-size:17px;display:block;margin-bottom:3px}
.papeleta-caja p{margin:4px 0 0;font-size:14px}
.papeleta-caja .btn{margin-top:10px}
.papeleta-caja.pedida{border-left-color:var(--azul)}
.papeleta-caja.fuera{border-left-color:var(--rojo)}

/* El número del cortejo: es lo que el hermano quiere ver, y se ve. */
.papeleta-dada{
  text-align:center;padding:22px 18px 18px;margin:18px 0 0;
  background:var(--papel-2);border:1px solid var(--oro-claro);
  border-radius:12px;box-shadow:var(--sombra);
}
.papeleta-dada .rotulo{
  display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);
}
.papeleta-dada .numero{
  display:block;font-family:var(--serif);font-size:64px;line-height:1.05;
  color:var(--oro);margin:2px 0 6px;
}
.papeleta-dada p{margin:2px 0;font-size:14px}
.papeleta-dada .lema{
  font-family:var(--serif);font-size:17px;color:var(--texto);margin-top:12px;
}
tr.apagada{opacity:.62}


/* ---- Estación de Penitencia: puestos del cortejo y archivo ---- */
/* El puesto que sale en la Estación de este año, señalado al margen */
/* En la Estación de Penitencia los contadores van a todo lo ancho, como
   las pestañas, los botones y las tablas: con su ancho máximo y centrados se
   quedaban metidos hacia dentro en una pantalla grande y no casaban con nada.
   Y cada bloque con su aire debajo: estaban pegados unos a otros. */
#pantalla-estacion .cifras{max-width:none;margin:0 0 16px}
/* Sin subtítulo debajo, el título se quedaba pegado a las pestañas: la misma
   distancia que en las pantallas que sí lo tienen. */
#pantalla-estacion > h2.titulo{margin-bottom:20px}
#pantalla-estacion .nota{margin:0 0 14px}

.tarjeta.puesto.sale{border-left:3px solid var(--oro)}

/* Arrastrar: el asa por donde se coge, lo que se lleva y dónde caería */
.asa-arrastre{border:0;background:none;color:var(--gris);cursor:grab;touch-action:none;
  user-select:none;font-size:15px;line-height:1;padding:4px 3px;letter-spacing:-3px;
  flex:0 0 auto}
.asa-arrastre:hover{color:var(--oro)}
@media (pointer:coarse){ .asa-arrastre{padding:9px 7px;font-size:18px} }
body.arrastrando, body.arrastrando *{cursor:grabbing !important;user-select:none}
.arrastrando-origen{opacity:.35}
.arrastrando-fantasma{position:fixed;z-index:1000;pointer-events:none;margin:0;
  opacity:.95;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.grupo-puestos.sobre{outline:2px dashed var(--oro);outline-offset:4px;border-radius:6px}
.raya-soltar{position:fixed;z-index:999;height:4px;border-radius:2px;background:var(--oro);
  pointer-events:none}
.con-asa{display:flex;align-items:center;gap:2px;min-width:0}

/* Los grupos de puestos: cada uno, una sección que se abre y se cierra */
.grupo-puestos{margin:0 0 14px}
.grupo-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:4px 0 6px;border-bottom:1px solid var(--oro)}
/* El nombre del grupo no se deja aplastar: si no cabe todo en una línea,
   son los botones los que bajan a la siguiente. */
.grupo-cab h3{font-family:var(--serif);font-size:17px;margin:0;flex:1 1 220px;
  cursor:pointer;user-select:none}
.grupo-cab h3:hover .flecha-plegar{color:var(--oro)}
.grupo-cab .acciones{display:flex;gap:6px;flex-wrap:wrap}
.grupo-cuenta{font-family:var(--sans);font-size:12.5px;color:var(--gris);font-weight:400;
  margin-left:6px}
.grupo-cuerpo{padding-top:10px}
.grupo-puestos.plegado .grupo-cuerpo{display:none}
.elegible-fila.en-grupo{padding-left:26px}
.elegible-fila.cabeza-grupo{margin-top:6px;border-top:1px solid var(--gris-claro)}

/* La lista de puestos: rejilla de tarjetas cortas y la gente en fichas */
.rejilla-puestos{display:grid;gap:10px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.tarjeta.puesto-corto{padding:10px 12px;margin:0}
.tarjeta.puesto-corto.sale{border-left:3px solid var(--oro)}
.puesto-corto .cab{display:flex;align-items:center;gap:8px}
.puesto-corto h4{font-family:var(--serif);font-size:16px;margin:0;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.puesto-corto .plazas{font-size:12px;color:var(--gris);white-space:nowrap}
.puesto-corto .plazas.lleno{color:var(--verde);font-weight:600}
.sale-o-no{border:1px solid var(--gris-claro);background:none;border-radius:999px;
  font-size:11.5px;padding:2px 9px;cursor:pointer;white-space:nowrap;color:var(--gris)}
.sale-o-no.si{background:var(--oro-claro);border-color:var(--oro);color:var(--texto)}
span.sale-o-no{cursor:default}
.puesto-corto .cambiar{border:0;background:none;color:var(--gris);font-size:12px;
  cursor:pointer;padding:2px 4px;text-decoration:underline}
.puesto-corto .cambiar:hover{color:var(--texto)}
.lleva-puesto{font-size:12px;color:var(--gris);margin:2px 0 0}
.gente-puesto{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ficha-puesto{display:inline-flex;align-items:center;gap:5px;max-width:100%;
  background:var(--papel);border:1px solid var(--gris-claro);border-radius:999px;
  padding:2px 4px 2px 9px;font-size:13px}
.ficha-puesto b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ficha-puesto .n{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:10px;margin-left:-5px;background:var(--oro-claro);
  font-family:var(--serif);font-size:12px;font-weight:600}
.ficha-puesto .que{font-size:11.5px;color:var(--gris);white-space:nowrap}
.ficha-puesto .que.baja{color:var(--rojo)}
.ficha-puesto .x{border:0;background:none;color:var(--gris);font-size:15px;line-height:1;
  cursor:pointer;padding:0 3px}
.ficha-puesto .x:hover{color:var(--rojo)}
.poner-puesto{border:1px dashed var(--gris);background:none;border-radius:999px;
  padding:2px 10px;font-size:12.5px;color:var(--gris);cursor:pointer}
.poner-puesto:hover{border-color:var(--oro);color:var(--texto)}
.gente-puesto .nadie{font-size:12.5px;color:var(--gris)}
.puesto-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.puesto-cab h4{font-family:var(--serif);font-size:17px;margin:0;display:flex;align-items:center;gap:8px}
.ocupantes{list-style:none;margin:6px 0 0;padding:0}
.ocupantes li{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px solid var(--gris-claro);font-size:14px}
.ocupantes li:last-child{border-bottom:0}
.ocupantes .tenue{font-size:12.5px}
.num-cortejo{display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;border-radius:13px;background:var(--oro-claro);
  color:var(--texto);font-family:var(--serif);font-size:14px;font-weight:600}
.btn-quitar{margin-left:auto;border:0;background:none;color:var(--gris);
  font-size:19px;line-height:1;cursor:pointer;padding:0 4px}
.btn-quitar:hover{color:var(--rojo)}

.anios-archivo{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ano-archivo{text-align:left;background:var(--papel-2);border:1px solid var(--gris-claro);
  border-left:4px solid var(--oro);border-radius:0 10px 10px 0;padding:14px 16px;
  cursor:pointer;box-shadow:var(--sombra);font:inherit}
.ano-archivo:hover{border-left-color:var(--negro)}
.ano-archivo b{display:block;font-family:var(--serif);font-size:18px;margin-bottom:3px}
.ano-archivo span{display:block;font-size:13px;color:var(--gris)}
.ano-archivo em{display:block;font-size:12px;color:var(--gris);font-style:normal;margin-top:5px}


/* El número de lo que falta por leer: sobre la pestaña de Mensajería del menú
   y sobre el desplegable de mensajes del Portal del Hermano. Solo el número.

   Lleva «span.» a propósito, y no se puede quitar: «sin-leer» se usaba ya
   antes en las FILAS de tabla del Buzón y de los mensajes internos, para
   ponerlas en negrita mientras no se abren. Sin acotarlo, este
   `display:inline-flex` caía también sobre esas filas y les amontonaba el De,
   el Asunto y la Fecha en la primera columna. Si algún día hace falta la
   chapita en algo que no sea un <span>, hay que renombrar la clase, no
   ensanchar esta regla. */
span.sin-leer{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:7px;
  border-radius:10px;background:var(--aviso);color:var(--aviso-texto);
  font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1;
  vertical-align:middle;
}
.plegable summary .sin-leer{margin-left:9px}
.hilo-msj.nuevo{border-left:3px solid var(--oro)}
.hilo-msj header{display:flex;align-items:baseline;gap:8px}
.hilo-msj header .btn-quitar{margin-left:auto}


/* ---- Encuestas y votaciones ---- */
.votacion{padding:20px 22px}
.votacion + .votacion{margin-top:16px}
.votacion-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.votacion-datos{margin:10px 0 0}
.votacion-censo{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0;
  padding:10px 12px;background:var(--papel);border-radius:8px;font-size:13px}
.votacion-censo b{font-family:var(--serif);font-size:16px;margin-right:4px}
.votacion-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.votacion .nota{margin-top:12px}

/* La barra de cada respuesta: se lee el reparto de un vistazo, sin cuentas */
.votacion-barras{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.barra-voto-cab{display:flex;justify-content:space-between;gap:12px;
  font-size:13.5px;margin-bottom:4px}
.barra-voto-cab b{font-variant-numeric:tabular-nums;white-space:nowrap}
.barra-voto-riel{height:9px;border-radius:5px;background:#ece6db;overflow:hidden}
.barra-voto-riel span{display:block;height:100%;background:var(--oro);
  border-radius:5px;transition:width .3s ease}

.fila-opcion{display:flex;gap:8px;margin-bottom:8px}
.fila-opcion input{flex:1}

/* Las consultas, tal y como las ve el hermano en su portal */
.votacion-portal{border:1px solid var(--gris-claro);border-radius:9px;
  padding:14px 16px;background:#fff}
.votacion-portal + .votacion-portal{margin-top:12px}
.votacion-portal.por-votar{border-color:var(--oro-claro);background:#fffdf8}
.votacion-portal header{display:flex;align-items:center;gap:10px;
  justify-content:space-between}
.votacion-pregunta{font-family:var(--serif);font-size:15.5px;margin:10px 0 4px}
.votacion-respuestas{margin:10px 0 12px;display:flex;flex-direction:column;gap:2px}
.votacion-respuestas .casilla-larga input{margin-top:3px}
.votacion-resultado{margin-top:12px}
.votacion-resultado .barra-voto + .barra-voto{margin-top:8px}

/* ---- La mesa de firmas ----
   `.tarjeta` pone el fondo, el borde y la sombra, pero NO el relleno: ése lo
   pone quien la usa, y aquí no se puso. El resultado era que los títulos y los
   párrafos salían pegados al borde, a un pelo de la línea. Se le da el mismo
   aire que a las demás cajas del programa. */
#sec-firmas .tarjeta{padding:20px 22px}
#sec-firmas .tarjeta + .tarjeta{margin-top:16px}
#sec-firmas .tarjeta > .ayuda{margin:0 0 14px}
#sec-firmas .tarjeta > .ayuda:last-child{margin-bottom:0}
#sec-firmas .tarjeta > .nota{margin-bottom:14px}
#sec-firmas .docs{margin-top:2px}
/* El título de cada caja, en la letra de la casa: se llamaba `.rotulo-caja` y
   no existía en ninguna hoja de estilo, así que salía con la letra del sistema
   y los márgenes que quisiera el navegador. */
.rotulo-caja{font-family:var(--serif);font-size:16.5px;font-weight:600;
  margin:0 0 6px;color:var(--texto)}

/* ---- Firmas de los cargos y sello de la hermandad ---- */
.firmas{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.firma{background:var(--papel-2);border:1px solid var(--gris-claro);
  border-radius:10px;padding:12px 14px;box-shadow:var(--sombra)}
.firma.puesta{border-color:var(--oro-claro)}
.firma b{display:block;font-family:var(--serif);font-size:15.5px;margin:8px 0 2px}
.firma .tenue{display:block;font-size:12.5px;line-height:1.4}
/* El cuadro de cuadritos deja ver si la firma tiene fondo o no lo tiene */
.firma-lienzo,.firma-prueba{
  display:flex;align-items:center;justify-content:center;
  min-height:84px;border-radius:8px;border:1px solid var(--gris-claro);
  background-color:#fff;
  background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
                   linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
}
.firma-lienzo img{max-width:100%;max-height:80px}
.firma-prueba{min-height:150px;margin-top:10px}
.firma-prueba img{max-width:100%;max-height:220px}
.firma-botones{display:flex;gap:6px;margin-top:10px}

/* El importe que acompaña a una categoría o a una partida en el Cuadro de
   Cuentas. Cifras de ancho fijo para que las de arriba y las de abajo caigan
   unas sobre otras, y sin partirse: un importe cortado no es un importe. */
.importe-cuadro{font-family:var(--serif);font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--texto)}

/* «Ingresos» y «Gastos» llevan al lado lo que suman sus categorías. El título
   a la izquierda y la cifra pegada al borde derecho, encima de la columna de
   importes de abajo, que es donde el ojo va a buscarla. */
h3.seccion-titulo.con-total{display:flex;align-items:baseline;
  justify-content:space-between;gap:14px}
.total-columna{font-size:16px}

/* ==========================================================
   La apariencia: los colores y las letras

   Ojo al tocar esto: es la pantalla desde la que se cambian los
   colores, así que tiene que seguir siendo legible con CUALQUIER
   paleta puesta. Por eso se apoya en las mismas variables que todo
   lo demás y no lleva ni un color escrito a mano: si alguien pone
   un fondo oscuro, esto se oscurece con él en vez de quedarse en
   blanco sobre blanco y dejar a la persona sin poder volver atrás.
   ========================================================== */

.colores-apariencia{
  display:grid; gap:10px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.color-uno{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:8px 10px; border:1px solid var(--gris-claro); border-radius:var(--radio);
  background:var(--papel-2);
}
.color-uno:hover{ border-color:var(--oro); }
/* Un punto de realce en los que ya no están como de origen: de un vistazo se
   ve qué se ha tocado y qué no. */
.color-uno.cambiado{ border-color:var(--oro); }
.color-uno.cambiado b::after{
  content:"•"; color:var(--oro); margin-left:5px; font-size:15px;
}
.color-uno input[type=color]{
  width:38px; height:38px; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--gris-claro); border-radius:8px; background:none;
}
.color-uno span{ min-width:0; line-height:1.3; }
.color-uno b{ display:block; font-size:13px; }
.color-uno i{ display:block; font-style:normal; font-size:11.5px; color:var(--gris); }

/* La muestra: un trozo de programa en pequeño para ver cómo queda todo junto
   sin tener que ir paseando por los módulos. */
.muestra-apariencia{
  border:1px solid var(--gris-claro); border-radius:var(--radio);
  overflow:hidden; margin-bottom:16px;
}
.muestra-cabecera{
  background:var(--negro); color:var(--papel); padding:12px 16px;
  border-bottom:3px solid var(--oro);
}
.muestra-cabecera b{ font-family:var(--serif); font-size:16px; display:block; }
.muestra-cabecera span{
  font-size:11.5px; color:var(--oro-claro);
  letter-spacing:.16em; text-transform:uppercase;
}
.muestra-cuerpo{ background:var(--papel); padding:14px 16px; }
.muestra-cuerpo p{ margin:0 0 10px; }
.muestra-cuerpo .pastilla{ margin-right:6px; }

.botones-apariencia{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.botones-apariencia .ayuda{ margin:0; }

/* Los colores de origen de la hermandad: los que trae el botón de volver.
   Va en un recuadro aparte, más discreto, porque no es lo que se hace todos
   los días: se fija una vez y se olvida. */
.origen-apariencia{
  margin-top:16px; padding:12px 14px;
  border:1px dashed var(--gris-claro); border-radius:var(--radio);
}
.origen-apariencia .btn{ margin-right:8px; }

  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--negro)}

/* ==========================================================
   DARSE DE ALTA: el botón que se desliza

   No es un botón corriente: hay que arrastrar el escudo de un
   extremo al otro, hasta el «+». Se hizo así por dos razones. La
   primera, que no se abra sin querer: en un móvil, en la pantalla
   de entrada, un roce con el pulgar abriría un formulario largo. La
   segunda, que el gesto ya dice lo que va a pasar —se está dando un
   paso, no consultando algo—, y eso se entiende sin leer nada.

   Todo va con las variables de siempre para que siga los colores
   que tenga puesta la hermandad.
   ========================================================== */

#entrada-alta{ margin-top:18px; }
#entrada-alta .ayuda{ margin:7px 0 0; text-align:center; font-size:12px; }

.deslizador{
  position:relative; height:56px; border-radius:28px;
  background:var(--papel); border:1px solid var(--gris-claro);
  overflow:hidden; cursor:grab; user-select:none;
  touch-action:none;            /* el dedo arrastra, no hace correr la página */
}
.deslizador:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.deslizador.arrastrando{ cursor:grabbing; }

/* El rótulo va centrado y por debajo del tirador; se apaga según se avanza,
   para que el final del recorrido se note sin tener que explicarlo. */
/* El rótulo ocupa SOLO el hueco que queda libre entre el escudo y el «+», no
   la barra entera. Antes se extendía de lado a lado y en un móvil estrecho el
   texto se metía debajo de los dos: la «D» quedaba tapada por el escudo y el
   «+» caía encima de «hermano». Medido en una pantalla de 320 px: hueco libre
   115 px, texto 200 px. Con el hueco bien acotado el texto se parte en dos
   renglones, que en una barra de 56 px caben de sobra, y donde hay sitio sigue
   yendo en uno solo. */
.deslizador-rotulo{
  position:absolute; inset:0 40px 0 58px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:.04em; line-height:1.25; text-align:center;
  color:var(--gris);
  pointer-events:none; transition:opacity .12s linear;
}
@media (max-width:400px){
  .deslizador-rotulo{ font-size:12px; letter-spacing:.01em; }
}
.deslizador-mas{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:26px; line-height:1; color:var(--oro); font-weight:300;
  pointer-events:none; transition:transform .15s ease, color .15s ease;
}
.deslizador.a-punto .deslizador-mas{ transform:translateY(-50%) scale(1.35); color:var(--verde); }

.deslizador-tirador{
  position:absolute; left:4px; top:4px; width:48px; height:48px;
  touch-action:none; overflow:hidden; padding:0;
  border-radius:50%; background:var(--papel-2);
  border:1px solid var(--gris-claro); box-shadow:var(--sombra);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.deslizador-tirador img{
  /* RECORTADO AL CIRCULO. El escudo de una hermandad puede ser cuadrado, y
     puesto tal cual dentro de un boton redondo sus esquinas se salen y queda
     como una pegatina mal pegada. Aqui se llena el circulo entero y lo que
     sobra se recorta, asi que entra cualquier escudo —cuadrado, alto o
     ancho— y siempre sale redondo y centrado. */
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:center;
  pointer-events:none;
  /* El «margin-bottom:12px» de «.entrada-caja img» —el que separa el escudo
     grande del nombre de la hermandad— tambien le caia a este, y en una caja
     centrada un margen abajo empuja la imagen 6 px hacia arriba: el escudo
     salia descentrado dentro del circulo. Se anula aqui. */
  margin:0; display:block;
}
/* Al soltarlo sin llegar, vuelve solo a su sitio; mientras se arrastra no hay
   transición, o el escudo iría por detrás del dedo. */
.deslizador-tirador.volviendo{ transition:transform .22s ease-out; }

.deslizador.completo{ border-color:var(--verde); }

/* Las solicitudes de alta esperando decisión, arriba de Gestión de Hermanos */
.aviso-solicitudes{ border-left:4px solid var(--oro); margin-bottom:18px; padding:16px 18px; }
.solicitud{
  display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;
  padding:12px 0; border-top:1px solid var(--gris-claro);
}
.solicitud:first-of-type{ border-top:0; }
.solicitud-quien{ flex:0 0 220px; line-height:1.35; }
.solicitud-quien b{ display:block; font-family:var(--serif); font-size:15px; }
.solicitud-quien span{ display:block; font-size:12px; }
.solicitud-datos{ flex:1 1 260px; min-width:0; line-height:1.45; font-size:13px; }
.solicitud-datos span{ display:block; }
.solicitud-botones{ flex:0 0 auto; display:flex; gap:8px; align-items:center; }
@media (max-width:640px){
  .solicitud-quien, .solicitud-datos{ flex:1 1 100%; }
}

/* Si se pulsa en vez de arrastrar, el escudo da un salto y la pista parpadea:
   mas vale ensenar el gesto que dejar a la persona delante de un boton que,
   para ella, no hace nada. */
@keyframes pista-deslizar{
  0%,100%{ opacity:.75; transform:none }
  50%    { opacity:1;   transform:translateX(3px) }
}
#alta-pista.insistiendo{
  animation:pista-deslizar .5s ease-in-out 2;
  color:var(--oro); font-weight:600;
}

/* Las ventanas que se abren ESTANDO EN LA PANTALLA DE ENTRADA.

   La pantalla de entrada es una capa opaca que lo tapa todo (z-index 120), y
   las ventanas del programa viven en la 60 porque siempre se abren ya dentro.
   La del alta no: se abre antes de entrar. Sin esto se abria entera POR
   DETRAS de la pantalla de entrada —invisible, y bloqueando los clics—, y
   desde fuera se veia como si el programa se hubiera quedado colgado. */
.modal.sobre-entrada{ z-index:130; }
/* Un D.N.I. que falta y hace falta: se marca, que es lo que va a frenar el alta */
.solicitud-quien .falta{ color:var(--rojo); }
/* Una solicitud que llegó sin que se confirmara el correo. Se avisa porque no
   es lo mismo: nadie ha comprobado que esa dirección exista ni sea suya. */
.solicitud-datos .sin-confirmar{
  display:inline-block; margin-top:3px; font-size:11.5px; font-weight:600;
  color:var(--rojo); border:1px solid var(--rojo); border-radius:8px;
  padding:1px 7px;
}

/* ==========================================================
   LA CAPILLA ITINERANTE
   ========================================================== */

.capilla-arriba{
  display:grid; gap:16px; margin-bottom:18px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
}
@media (max-width:820px){ .capilla-arriba{ grid-template-columns:1fr } }

/* EL HUECO DE LA FOTO TIENE SU MEDIDA, y no la de la foto.

   Antes el alto salía de la propia imagen —«height:100%» dentro de una caja
   sin alto definido acaba valiendo el alto natural de la foto—, así que una
   fotografía grande estiraba el recuadro y descuadraba la pantalla entera.
   Ahora el hueco mide lo que mide y la foto se acomoda dentro; lo único que lo
   cambia son los cortes por tamaño de pantalla, aquí abajo. */
/* El hueco se estira hasta igualar a su vecina, la de «¿Dónde está la
   capilla?»: son las dos columnas de la misma fila, y la rejilla las deja del
   mismo alto. Quien manda es la de al lado, NUNCA la foto.

   La imagen va en posición absoluta, y ahí está la clave: así queda fuera del
   flujo y no puede empujar nada. Con una imagen normal, una foto muy alta
   volvería a estirar el recuadro; puesta así, es imposible. El «min-height» es
   solo un suelo para cuando la ventana de al lado quede muy corta. */
.capilla-foto{ padding:0; overflow:hidden; position:relative; min-height:268px; }
.capilla-foto img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;      /* centrada: llena y recorta */
}
/* Ajustada: se ve la foto entera, con su aire alrededor */
.capilla-foto.ajustada img{ object-fit:contain; background:var(--papel); }

.capilla-sin-foto{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; text-align:center; gap:8px;
}
.capilla-sin-foto span{ font-size:44px; opacity:.5 }

.capilla-donde{ padding:18px 20px }
.capilla-quien{ margin:6px 0 2px; font-size:15px }
.capilla-quien b{ font-family:var(--serif); font-size:17px; margin-right:8px }
.capilla-direccion{ margin:8px 0 0; font-size:13.5px; font-weight:600 }

/* El recuadro del mapa. Alto fijo: Leaflet necesita saber cuánto mide. */
.capilla-mapa{
  /* Alto suficiente para arrastrar los puntos a su sitio con comodidad y para
     que quepan los botones del zoom. Con 230 el mapa se quedaba pequeño justo
     para lo que más se usa, que es colocar casas. */
  height:340px; margin-top:14px; border-radius:var(--radio);
  border:1px solid var(--gris-claro); overflow:hidden; background:var(--papel);
}
@media (max-width:560px){ .capilla-mapa{ height:280px } }
/* A pantalla completa el recuadro deja de ser un recuadro: manda la pantalla. */
.capilla-mapa:fullscreen, .capilla-mapa:-webkit-full-screen{
  height:100%; width:100%; border-radius:0; border:0;
}

/* Los puntos del mapa de siempre. Se dibujan como marcas y no como círculos de
   Leaflet porque los círculos no se pueden arrastrar, y las casas hay que
   poder colocarlas a mano también aquí. */
.capilla-circulo span{
  display:block; width:16px; height:16px; border-radius:50%;
  border:3px solid #fff; box-sizing:content-box;
}
.capilla-circulo.pendiente span{ background:transparent }
.capilla-circulo.pasada span{ background:rgba(139,131,120,.55); opacity:.8 }

/* El botón de pantalla completa, al final de la leyenda */
.leyenda-mapa #mapa-completa{ margin-left:auto; font-size:12px }

/* El punto luminoso donde está la capilla: un halo que late alrededor del
   icono, para que se encuentre de un golpe de vista sin tener que buscarlo. */
.capilla-punto{ position:relative }
.capilla-punto .halo{
  position:absolute; inset:0; border-radius:50%;
  background:var(--oro); opacity:.55;
  animation:capilla-late 1.8s ease-out infinite;
}
.capilla-punto .nucleo{
  position:absolute; inset:5px; border-radius:50%;
  background:var(--papel-2); border:2px solid var(--oro);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
@keyframes capilla-late{
  0%   { transform:scale(.7); opacity:.75 }
  70%  { transform:scale(1.7); opacity:0 }
  100% { transform:scale(1.7); opacity:0 }
}

.capilla-cab{ display:flex; align-items:flex-start; gap:12px; margin-bottom:10px }
.capilla-cab > div{ flex:1; min-width:0 }

.tabla-capilla td.turno{
  font-family:var(--serif); font-size:17px; text-align:center; width:56px;
  color:var(--oro);
}
.tabla-capilla tr.la-tiene{ background:var(--oro-claro) }
.tabla-capilla tr.la-tiene td{ font-weight:600 }
.tabla-capilla .pastilla{ margin-left:6px }

/* El orden del listado */
.lista-orden{ list-style:none; margin:12px 0 16px; padding:0 }
.lista-orden li{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border:1px solid var(--gris-claro); border-radius:var(--radio);
  margin-bottom:6px; background:var(--papel-2);
}
.lista-orden li.ya-paso{ opacity:.62; background:var(--papel) }
.lo-turno{
  font-family:var(--serif); font-size:17px; color:var(--oro);
  width:30px; text-align:center; flex:none;
}
.lo-quien{ flex:1; min-width:0; line-height:1.3 }
.lo-quien b{ display:block }
.lo-quien .tenue{ font-size:12px }
.lo-botones{ flex:none; display:flex; gap:2px }
.lo-botones .btn{ padding:2px 9px; font-size:13px }
/* La capilla dentro del Portal del hermano */
.capilla-mia p{ margin:4px 0 }
.capilla-recorrido{ list-style:none; margin:8px 0 0; padding:0; counter-reset:cap }
.capilla-recorrido li{
  counter-increment:cap; display:flex; align-items:baseline; gap:10px;
  padding:7px 0; border-top:1px solid var(--gris-claro); font-size:13.5px;
}
.capilla-recorrido li::before{
  content:counter(cap); font-family:var(--serif); color:var(--oro);
  width:22px; flex:none; text-align:right;
}
.capilla-recorrido li.la-tiene{ font-weight:600 }
.capilla-recorrido .tenue{ margin-left:auto; font-size:12px; white-space:nowrap }
/* Las cajas de La Capilla, con el mismo margen por dentro que las demás del
   programa. «.tarjeta» no lo trae de serie —cada pantalla se lo pone— y a
   estas se les había olvidado: el texto salía pegado al borde. */
.caja-capilla{ padding:20px 22px; margin-bottom:18px; }
.caja-capilla > .tabla-caja{ margin-top:12px; }
.caja-capilla .solicitud:first-of-type{ border-top:0; padding-top:4px; }
/* Una incidencia anotada en un relevo: se marca para que no pase inadvertida */
.tabla-capilla .incidencia{
  display:inline-block; margin-top:3px; font-size:11.5px; font-weight:600;
  color:var(--rojo); cursor:help;
}
/* Quién anotó el relevo, cuando no fue el propio hermano. Se dice en pequeño,
   pero se dice: no es lo mismo contarlo estando delante que apuntarlo después
   de una llamada, y quien lea esto dentro de unos años tiene que distinguirlo. */
.tabla-capilla .lo-anoto{ display:block; font-style:italic; opacity:.75 }
/* La medida recomendada de la foto: se separa del resto para que se lea, que
   es un dato que la gente busca justo antes de elegir el fichero. */
.medida-foto{
  margin:0 0 12px; padding:9px 12px;
  background:var(--papel); border-left:3px solid var(--oro);
  border-radius:0 8px 8px 0; line-height:1.5;
}

/* El corte de pantalla estrecha para el hueco de la foto va AQUÍ, al final, y
   no junto a las demás reglas de la capilla. Allí quedaba por delante de
   «.capilla-foto{min-height:268px}» y, a igual peso, mandaba la última: el
   alto de móvil no llegaba a aplicarse nunca. */
@media (max-width:820px){
  .capilla-foto{ min-height:210px }
}

/* Los círculos del recorrido en el mapa.

   Blanco sin rellenar donde falta por llegar, y blanco atenuado con un gris
   dentro donde ya pasó. Ambos llevan una sombra fina: un círculo blanco sobre
   un mapa claro se pierde, y de nada sirve una marca que no se ve. */
.marca-pendiente{ filter:drop-shadow(0 0 2px rgba(20,17,15,.65)); }
.marca-pasada{ filter:drop-shadow(0 0 2px rgba(20,17,15,.4)); }

.leyenda-mapa{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px;
  margin:8px 0 0; font-size:11.5px; color:var(--gris);
}
.leyenda-mapa .lm{
  width:13px; height:13px; border-radius:50%; display:inline-block;
  margin-right:2px; vertical-align:-2px;
  box-shadow:0 0 0 1px rgba(20,17,15,.35);
}
.leyenda-mapa .lm.ahora{ background:var(--oro); box-shadow:0 0 0 3px var(--oro-claro); }
.leyenda-mapa .lm.pasada{ background:#8b8378; border:2px solid #fff; }
.leyenda-mapa .lm.pendiente{ background:transparent; border:2px solid #fff; }

/* Montar una vuelta que ya está rodando */
.montar-anadir{ margin:14px 0 6px }
.montar-anadir .campo{ max-width:420px }
#cap-resultados{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.resultado-hermano{ font-size:12.5px }
.resultado-hermano:disabled{ opacity:.5 }

.tabla-montar{ width:100%; border-collapse:collapse; margin-top:14px; font-size:13.5px }
.tabla-montar th{
  text-align:left; padding:7px 8px; border-bottom:1px solid var(--gris-claro);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gris);
}
.tabla-montar td{ padding:8px; border-bottom:1px solid var(--gris-claro); vertical-align:middle }
.tabla-montar td.turno{
  font-family:var(--serif); font-size:16px; color:var(--oro);
  text-align:center; width:52px;
}
.tabla-montar select{ max-width:230px }
.tabla-montar .btn.plano{ color:var(--gris); padding:2px 7px }
.tabla-montar .btn.plano:hover{ color:var(--rojo) }

.montar-arrancar{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--gris-claro);
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
}
.montar-arrancar .campo{ max-width:340px }

/* ---------- El degradado del Portal, en Configuración ---------- */

.degradado-apariencia{border:1px solid var(--gris-claro);border-radius:12px;
  padding:18px 20px;margin:18px 0;background:var(--papel-2)}
.degradado-apariencia h4{font-family:var(--serif);font-size:17px;margin:0 0 6px}
.degradado-apariencia .ayuda{margin:0 0 14px}
.degradado-apariencia .colores-apariencia{margin-bottom:14px}

/* La muestra: la misma franja del Portal, en pequeño. Se tiñe sola porque usa
   los mismos nombres que la de verdad. */
.muestra-portal{background:var(--portal-fondo);color:var(--portal-texto);
  border:1px solid rgba(128,120,110,.28);border-radius:12px;padding:16px 18px;
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.muestra-portal b{font-family:var(--serif);font-size:19px;display:block}
.muestra-portal span{font-size:12.5px;opacity:.8}
.muestra-portal-num{border:1px solid rgba(255,255,255,.28);border-radius:10px;
  padding:8px 18px;text-align:center;background:rgba(255,255,255,.06)}
.muestra-portal-num span{display:block;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase}
.muestra-portal-num b{font-size:30px;line-height:1.1}

/* Los permisos que solo reparte el administrador: se ven, pero no se tocan. */
.permiso:has([data-reservado]){opacity:.72;cursor:not-allowed}
.permiso:has([data-reservado]) input{cursor:not-allowed}

/* ---------- Encender y apagar módulos, en Configuración ---------- */

.modulos-encender{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.modulos-grupo{border:1px solid var(--gris-claro);border-radius:11px;
  padding:14px 16px;background:var(--papel-2)}
.modulos-grupo h4{margin:0 0 10px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);font-family:var(--sans)}

.modulo-interruptor{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  padding:8px;border-radius:9px;border:1px solid transparent}
.modulo-interruptor:hover{background:var(--papel)}
.modulo-interruptor + .modulo-interruptor{margin-top:2px}
.modulo-interruptor input{margin-top:3px;flex:0 0 auto}
.modulo-icono{font-size:17px;line-height:1.1;flex:0 0 auto}
.modulo-interruptor b{display:block;font-size:13.5px}
.modulo-interruptor i{display:block;font-style:normal;font-size:11.5px;
  color:var(--gris);line-height:1.35;margin-top:1px}
.modulo-interruptor em{display:block;font-style:normal;font-size:10.5px;
  color:var(--oro);margin-top:3px}
/* Apagado: se ve, pero se ve apagado. */
.modulo-interruptor.apagado{opacity:.5}
.modulo-interruptor.apagado b{text-decoration:line-through}

/* ---------- El nombre y el icono del programa, en Apariencia ---------- */

.marca-apariencia{display:grid;gap:16px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.marca-apariencia > *{border:1px solid var(--gris-claro);border-radius:11px;
  padding:14px 16px;background:var(--papel-2)}
.marca-icono{display:flex;gap:14px;align-items:flex-start}
.marca-icono img{width:64px;height:64px;object-fit:contain;flex:0 0 auto;
  border:1px solid var(--gris-claro);border-radius:12px;background:#fff;padding:4px}
.marca-icono .marca-titulo{display:block;font-family:var(--serif);font-size:15px;
  margin-bottom:4px}
.marca-icono .ayuda{margin:0 0 10px}
.marca-nombre label{display:block;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.marca-nombre input{width:100%;padding:8px 10px;border:1px solid var(--gris-claro);
  border-radius:8px;font-size:15px;font-family:var(--serif);color:var(--texto);
  background:#fff}
.marca-nombre .ayuda{margin:8px 0 10px}
.marca-icono .poco-icono{display:block;color:var(--rojo);margin-top:4px}

/* El saludo de «Poner en marcha»: se lee como un texto, no como una nota al
   pie, porque es lo primero que ve quien estrena el programa.

   Lleva delante «.entrada-caja» a propósito: la caja de entrada centra todas
   sus ayudas —«.entrada-caja .ayuda»—, y con solo la clase de aquí esa regla
   pesaba más y el párrafo seguía saliendo centrado. */
.entrada-caja .estreno-saludo{text-align:left;margin:0 0 12px;line-height:1.6}

/* LOS SUBMENÚS DE CADA MÓDULO EN EL MÓVIL —las pestañas de Tesorería,
   Secretaría, la Estación, Mensajería, la Capilla…—, como la barra de los
   módulos: en UNA SOLA FILA que se desliza con el dedo a izquierda y derecha.
   Partidas en dos o tres filas ocupaban media pantalla antes de llegar a lo
   que se quería ver. El borde se difumina hacia el lado donde quedan más
   pestañas (lo pone pestanasComoRueda() en app.js), y la elegida se centra
   sola. */
@media (max-width:820px){
  .pestanas{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pestanas::-webkit-scrollbar{display:none}
  .pestanas .pestana{flex:none;white-space:nowrap;scroll-snap-align:center}
  .pestanas.mas-der{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .pestanas.mas-izq{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
  .pestanas.mas-izq.mas-der{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
}

/* EL MAPA, POR DEBAJO DE LA CABECERA. Leaflet pone sus capas y sus botones
   con z-index de 400 a 1000, y sin encerrarlas en su recuadro pasaban por
   delante de la cabecera fija al desplazar la página. `isolation` las deja
   dentro del recuadro del mapa, que se queda en el sitio que le toca. */
.leaflet-container, .capilla-mapa{isolation:isolate}

/* La miniatura de un PDF: la primera página, desde arriba */
.doc-icono img.miniatura-pdf{width:100%;height:100%;object-fit:cover;object-position:top;
  background:#fff}

/* Convocatorias: el recuento de asistencia y la lista de asistentes */
.asistencia-resumen{margin:6px 0 2px;font-size:13.5px;color:var(--negro-suave)}
.asistentes-cab{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:14px}
.lista-asistentes{list-style:none;margin:0;padding:0}
.lista-asistentes li{padding:5px 0;border-bottom:1px solid #eee7dd;font-size:13.5px}
.lista-asistentes li:last-child{border-bottom:0}

/* En el Portal, debajo de una convocatoria */
.conv-portal{margin-top:10px;padding-top:10px;border-top:1px dashed var(--gris-claro)}
.conv-asistencia{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.conv-asistencia span{font-weight:600;font-size:14px}
.conv-portal p{margin:6px 0 0;font-size:13px}

/* La miniatura se pulsa para verla en grande */
[data-vista-previa]{cursor:zoom-in}
.foto-grande img[src='']{display:none}

/* La convocatoria a la que se llega desde el registro, señalada un momento */
.doc.resaltada{box-shadow:0 0 0 3px #b8913a;transition:box-shadow .4s}

/* ==========================================================
   Portal del Hermano · rediseño v7
   AÑADIR AL FINAL de estilo.css (no borrar nada de lo anterior).
   Todo va acotado al portal: `.plegable`, `.pp` y `.portal-gestiones`
   se usan también en otras pantallas y no deben cambiar.
   ========================================================== */

/* ---- Cabecera: el número va a la izquierda (primero en el HTML) y todo
        queda centrado en vertical ---- */
.portal-cab{align-items:center;gap:28px}
.portal-cab .portal-numero{flex:none}

/* Fila de datos + pastillas. Las pastillas crecen hacia la derecha y, si no
   caben, hacia ARRIBA (wrap-reverse): la fila de datos no se mueve. */
.pc-fila{display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:10px 22px}
.pc-datos{display:flex;flex-wrap:wrap;margin:0;padding:0}
.pc-datos > div{padding:0 22px 0 0;margin-right:22px;border-right:1px solid rgba(231,217,189,.25)}
.pc-datos > div:last-child{border-right:0;margin-right:0}
.pc-datos dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b9ad9c}
.pc-datos dd{margin:2px 0 0;font-size:14px}
.pc-datos dd.pc-ok::before,.pc-datos dd.pc-aviso::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:7px}
.pc-datos dd.pc-ok::before{background:#8fbf7f}
.pc-datos dd.pc-aviso{color:#f3d2a6}
.pc-datos dd.pc-aviso::before{background:#e0a458}
.portal-cab .portal-pastillas{flex:1 1 0;min-width:150px;flex-wrap:wrap-reverse;align-content:flex-end;padding-bottom:1px}

/* ---- Accesos: fichas bajas de esquinas redondeadas (18 px) ---- */
.portal-accesos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.portal-accesos .acceso{display:flex;gap:12px;align-items:center;text-align:left;min-height:52px;
  padding:8px 16px 8px 10px;border-radius:18px;font-size:13.5px}
.portal-accesos .acceso .ico{width:34px;height:34px;border-radius:50%;background:#f2ede4;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}
.acc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.acc-txt b{font-size:13.5px;font-weight:600;line-height:1.2}
.acc-txt small{font-size:12px;line-height:1.25;color:var(--gris)}
/* Cerrado / no disponible: borde discontinuo en vez de atenuar toda la ficha */
.portal-accesos .acceso.pendiente{opacity:1;background:transparent;border-style:dashed;box-shadow:none}
.portal-accesos .acceso.pendiente .ico{opacity:.5}
.portal-accesos .acceso.pendiente b{color:#8b8378}

/* ---- Desplegables del portal: signo + / − y filete dorado al abrir ----
   Solo los del portal (hijos directos): los que hay dentro de «Documentos»
   y en otras pantallas se quedan como estaban. */
.portal-plegables > .plegable{border-radius:4px;border-left:3px solid var(--gris-claro)}
.portal-plegables > .plegable[open]{border-left-color:var(--oro)}
.portal-plegables > .plegable > summary{justify-content:flex-start;gap:12px}
.portal-plegables > .plegable > summary::after{content:none}
.portal-plegables > .plegable > summary::before{content:"+";width:20px;text-align:center;
  color:var(--oro);font-size:20px;font-weight:400;line-height:1}
.portal-plegables > .plegable[open] > summary::before{content:"\2212"}
.portal-plegables > .plegable > summary .sin-leer{margin-left:-3px}
.portal-plegables > .plegable > .plegable-cuerpo{padding-left:50px}

/* ---- Móvil ---- */
@media (max-width:700px){
  .pc-datos > div{border-right:0;margin-right:0;padding-right:24px;padding-bottom:8px}
  .portal-accesos{grid-template-columns:1fr 1fr}
  .portal-accesos .acceso{padding:8px 12px 8px 8px;gap:9px}
  .portal-accesos .acceso .ico{width:30px;height:30px;font-size:15px}
}
@media (max-width:420px){ .portal-accesos{grid-template-columns:1fr} }

/* Tesorería: los números con la letra «Moderna (sin remates)», la misma de
   Apariencia, se escoja la que se escoja para los títulos. Con cifras de
   igual ancho, para que las columnas de importes cuadren. */
#pantalla-tesoreria .cifra b, #pantalla-tesoreria td.num, #pantalla-tesoreria th.num,
#pantalla-tesoreria .importe-cuadro, #pantalla-tesoreria .num-presu{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums}