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

:root{
  --negro:#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;
  --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(--negro);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul)}
button{font-family:inherit;font-size:inherit}

/* ---------- Cabecera ---------- */
.cabecera{
  background:var(--negro);
  color:var(--papel);
  border-bottom:3px solid var(--oro);
}
.cabecera-int{
  max-width:1400px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:16px;
}
.cabecera img{height:56px;width:56px;object-fit:contain;
  background:#fff;border-radius:50%;padding:3px;flex:none}
.cabecera h1{
  font-family:var(--serif);font-size:19px;font-weight:600;margin:0;
  letter-spacing:.02em;line-height:1.25;
}
.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}
.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)}

/* ---------- Navegación ---------- */
.menu{background:var(--negro-suave);border-bottom:1px solid rgba(0,0,0,.2)}
.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}
.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)}
.modulo .etiqueta{position:absolute;top:12px;right:12px;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  border:1px solid var(--gris-claro);border-radius:9px;padding:2px 7px;background:#fff}

.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 .etiqueta.verde{color:var(--verde);border-color:#c8d8c4;background:#f3f8f2;font-weight:600}
.modulo .etiqueta.ambar{color:#8a6516;border-color:var(--oro-claro);background:#fdf8ed;font-weight:600}
.modulo.empezado{border-left:4px solid var(--oro)}
.modulo.empezado h3{padding-right:84px}
.modulo .icono svg{display:block}
.panel-cab .numero svg{display:block;width:34px;height:34px}
.modulo .pendientes{margin-top:12px;font-size:11px;color:#8a6516;background:#fdf8ed;
  border:1px solid var(--oro-claro);border-radius:9px;padding:3px 9px;align-self:flex-start}
.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}
.cifra span{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.07em}
.cifra.alerta b{color:var(--rojo)}
.cifra.clicable{cursor:pointer}
.cifra.clicable:hover{border-color:var(--oro)}

/* ---------- 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(--negro);
}
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}
.crece{flex:1}

.btn{
  border:1px solid var(--gris-claro);background:#fff;color:var(--negro);
  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(--negro);white-space:nowrap}
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(--negro);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(--negro);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(--negro)}
.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{background:#fff}
  .tabla-caja{border:0;box-shadow:none}
}

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

.portal-cab{
  background:linear-gradient(135deg,#1d1916 0%,#2e2721 55%,#3c3229 100%);
  color:#fff;border-radius:14px;padding:26px 28px;margin-bottom:18px;
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid #3a322b;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:#efe9e0}
.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:#bdb3a6}

.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(--negro);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))}
.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}
.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}

@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(--negro)}
.pestana.activa{color:var(--negro);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)}
.firmantes{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
.firmantes li{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid #eee7dd}
.firmantes li:last-child{border-bottom:0}
.firmantes .cargo{min-width:130px;color:var(--gris)}

.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(--negro);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))}
.cifras.dinero .cifra b{font-size:21px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- 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}

.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(--negro)}
#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(--negro);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(--negro)}

.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(--negro);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}
.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(--negro)}
#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(--negro);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)}

.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(--negro); }
.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; }

@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(--negro);margin-top:12px;
}
tr.apagada{opacity:.62}


/* ---- Estación de Penitencia: puestos del cortejo y archivo ---- */
.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(--negro);font-family:var(--serif);font-size:14px;font-weight:600}
.num-cortejo.vacio{background:var(--gris-claro);color:var(--gris)}
.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(--gris);color:#fff;
  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}


/* ---- 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}