/* ============ Sistema de Gestión de Iglesias — estilos ============ */

/* ---- Que se pueda usar sin ver la pantalla y sin tocarla ----
 *
 * Tres cosas que faltaban y que no cuestan nada:
 *
 * 1. El enlace para saltarse el menú. La barra lateral tiene una veintena de
 *    enlaces, y quien navega con el tabulador los recorría todos, en cada
 *    pantalla, antes de llegar a lo que venía a hacer. Este enlace es el
 *    primero de la página y no se ve hasta que el tabulador llega a él.
 * 2. Un anillo visible donde está el foco. Lo tenían los campos de un
 *    formulario y nadie más: con el tabulador uno se perdía entre botones y
 *    enlaces sin saber en cuál estaba.
 * 3. Que quien pidió menos movimiento no lo tenga.
 */
.saltar {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.saltar:focus { top: 0; }

:where(a, button, [tabindex], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sobre el azul de la barra lateral, un anillo azul no se ve */
.sidebar :where(a, button):focus-visible { outline-color: #fff; }

.content:focus { outline: none; } /* recibe el foco al saltar, pero no se dibuja */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --sidebar-bg: #16265c;
  --sidebar-fg: #cbd5e1;
  --sidebar-active: #24397f;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  /* Colores institucionales tomados del emblema de la iglesia */
  --marca-azul: #16265c;
  --marca-azul-claro: #24397f;
  --marca-oro: #e8b52c;
  --marca-oro-oscuro: #a97d12;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #101c45 0%, var(--marca-azul) 55%, var(--marca-azul-claro) 100%);
  padding: 20px;
}
.login-card {
  background: var(--card); border-radius: 16px; padding: 40px 36px; width: 100%;
  max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); text-align: center;
}
.login-card .logo { width: 116px; height: 116px; object-fit: contain; }
.login-card h1 { font-size: 18px; margin: 12px 0 2px; letter-spacing: 0.2px; color: var(--marca-azul); }
.login-card p.lema { color: var(--marca-oro-oscuro); font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.login-card p.sub { color: var(--muted); margin-bottom: 22px; font-size: 13px; }
.login-card input {
  width: 100%; padding: 11px 14px; margin-bottom: 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14.5px;
}
.login-card button { width: 100%; }
.login-error { color: var(--danger); font-size: 13px; margin-bottom: 10px; min-height: 18px; }
.login-version { margin-top: 14px; font-size: 11.5px; color: var(--muted); }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; background: var(--sidebar-bg); color: var(--sidebar-fg);
  flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 11px; padding: 16px 14px;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand .logo {
  width: 42px; height: 42px; object-fit: contain; flex: none;
  background: #fff; border-radius: 50%; padding: 3px;
}
.sidebar .brand .txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidebar .brand .txt b { font-size: 13px; font-weight: 700; letter-spacing: .1px; }
.sidebar .brand .txt i { font-size: 11.5px; font-style: normal; color: var(--marca-oro); }
.side-group { margin-top: 14px; }
.side-group .group-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: #94a3b8;
  padding: 4px 16px 6px; font-weight: 600;
}
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--sidebar-fg);
  cursor: pointer; font-size: 13.5px; border-left: 3px solid transparent;
}
.side-link:hover { background: rgba(255,255,255,0.06); text-decoration: none; color: #fff; }
.side-link.active { background: var(--sidebar-active); border-left-color: var(--accent); color: #fff; font-weight: 600; }
.side-link .ic { width: 20px; text-align: center; }
.sidebar .side-footer { margin-top: auto; padding: 14px 16px; font-size: 11.5px; color: #64748b; border-top: 1px solid rgba(255,255,255,0.08); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--border); padding: 9px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20;
}
.iglesia-local {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto;
  background: #eef2fb; border: 1px solid #dbe3f5; border-radius: 999px; padding: 6px 14px 6px 10px;
}
.iglesia-local .ic { font-size: 15px; line-height: 1; }
.iglesia-local .nm {
  font-size: 13.5px; font-weight: 700; color: var(--marca-azul);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Con qué iglesia se trabaja se dice una sola vez. Cuando el menú de la
   izquierda está a la vista, ya lo dice él; acá arriba solo queda lo que el
   menú no muestra —los cuerpos asignados—, y si no hay, no queda nada. */
/* Cuando además sirve para elegir con qué iglesia trabajar, se queda: es la
   única manera de cambiarla, y esconderla dejaría a la persona encerrada. */
.iglesia-local.elegible {
  cursor: pointer; font-family: inherit; color: inherit;
  /* Un botón no se estira como lo hacía el recuadro: se le da su sitio para
     que quepa el nombre de la iglesia y no quede reducido a la flechita. */
  flex: 0 1 auto; min-width: 160px; max-width: 42vw;
}
.iglesia-local.elegible:hover { background: #e2e9f8; border-color: #c7d4ee; }
.iglesia-local .cambiar { font-size: 11px; color: var(--marca-azul); opacity: 0.75; }

/* Elegir con qué iglesia trabajar */
.ig-todas, .ig-una {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit;
  border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 11px 14px;
  cursor: pointer; font-size: 14px; color: inherit; min-height: 44px;
}
.ig-todas { justify-content: space-between; margin-bottom: 10px; }
.ig-todas .mut, .ig-una .mut { font-size: 12.5px; color: var(--muted); }
.ig-todas.on, .ig-una.on { border-color: var(--marca-azul); background: #eef2fb; }
.ig-todas.on b, .ig-una.on .nm { color: var(--marca-azul); }
.ig-lista { display: flex; flex-direction: column; gap: 8px; }
.ig-una .tic { width: 16px; color: var(--marca-azul); font-weight: 700; flex: none; }
.ig-una .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 901px) {
  .iglesia-local.ya-esta-en-el-menu:not(.elegible) { display: none; }
  /* En el computador el menú de la izquierda ya dice con qué iglesia se
     trabaja, así que acá arriba el nombre sobra… salvo cuando este recuadro
     es además el botón para cambiarla: ahí tiene que decir cuál está puesta. */
  .iglesia-local:not(.elegible) .ic, .iglesia-local:not(.elegible) .nm { display: none; }
}
.page-head .sub-iglesia {
  font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 1px;
}
/* Empuja al usuario y la salida hacia la derecha, esté o no la iglesia */
.topbar .tb-espacio { flex: 1; }

/* ---------------- El buscador general ----------------
   Una sola caja para encontrar cualquier cosa. En el computador va siempre a
   la vista; en el teléfono no cabe junto al nombre de la iglesia, así que se
   muestra la lupa y al tocarla la caja se abre sobre la barra entera. */
.buscador-global { position: relative; flex: 0 1 340px; min-width: 0; }
.buscador-global .lupa {
  display: none; border: none; background: transparent; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 8px; border-radius: 8px; min-height: 40px;
}
.buscador-global .lupa:hover { background: #eef2fb; }
.bg-caja {
  display: flex; align-items: center; gap: 8px;
  background: #f1f5f9; border: 1px solid var(--border); border-radius: 999px; padding: 0 6px 0 12px;
}
.bg-caja:focus-within { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.bg-caja .ic { font-size: 13px; line-height: 1; opacity: .55; flex: none; }
.bg-caja input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 13.5px; color: var(--text); padding: 9px 0; min-height: 38px;
}
.bg-caja input::-webkit-search-cancel-button { display: none; }
.bg-caja .bg-cerrar { display: none; border: none; background: transparent; cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 8px; }

/* El panel de resultados, colgando de la caja */
.bg-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
  max-height: min(70vh, 520px); overflow-y: auto; padding: 6px;
}
.bg-vacio { padding: 16px 14px; font-size: 13px; color: var(--muted); }
.bg-vacio span { display: block; margin-top: 4px; font-size: 12px; }
.bg-grupo + .bg-grupo { border-top: 1px solid #f1f5f9; margin-top: 4px; padding-top: 4px; }
.bg-cab {
  display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}
.bg-cab .ic { font-size: 13px; }
.bg-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.bg-item:hover, .bg-item.marcada { background: #eef2fb; }
.bg-item .t { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.bg-item .p { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bg-mas {
  display: block; padding: 7px 12px 9px; font-size: 12px; font-weight: 700;
  color: var(--accent); text-decoration: none;
}
.bg-mas:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .buscador-global { flex: none; position: static; }
  .buscador-global .lupa { display: block; }
  .buscador-global .bg-caja { display: none; }
  /* Abierta, ocupa la fila entera por encima de lo demás */
  .buscador-global.abierto .lupa { display: none; }
  .buscador-global.abierto .bg-caja {
    display: flex; position: absolute; left: 10px; right: 10px; top: 8px; z-index: 61;
  }
  .buscador-global.abierto .bg-cerrar { display: block; }
  .bg-panel { left: 10px; right: 10px; top: 58px; }
}
.topbar .who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.topbar .who b { color: var(--text); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  flex: none;
}
/* Con foto, el mismo redondel: se recorta al centro y no se deforma */
img.avatar { object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.6); }
.content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- Componentes ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--bg); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }

/* Los botones que van dentro de una fila de tabla: se notan al pasar por
   encima, no antes. Un tacho rojo en cada fila es ruido, no información. */
table.grid .btn.sm { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px 7px; }
table.grid tr:hover .btn.sm { border-color: var(--border); background: #fff; }
table.grid .btn.sm:hover { color: var(--text); background: #fff; border-color: var(--border); }
table.grid .btn.danger.sm:hover { background: #fee2e2; border-color: #fecaca; color: var(--danger); }
/* En una pantalla táctil no existe "pasar por encima": ahí los botones de la
   fila tienen que verse siempre, o nadie los encuentra. */
@media (hover: none) {
  table.grid .btn.sm { border-color: var(--border); background: #fff; color: var(--text); }
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.page-head h2 { font-size: 20px; display: flex; align-items: center; gap: 9px; letter-spacing: -0.2px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }
.card .card-body { padding: 18px 20px; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.toolbar input[type="search"], .toolbar input[type="date"], .toolbar select {
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px;
  background: #fff; height: 34px;
}
/* El buscador crece; los filtros se quedan en su tamaño, aunque una opción
   traiga el nombre completo de la iglesia */
.toolbar input[type="search"] { flex: 1 1 200px; min-width: 160px; max-width: 320px; }
.toolbar select { flex: 0 1 auto; max-width: 190px; }
.toolbar .spacer { flex: 1; }
.toolbar label.range { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th {
  text-align: left; padding: 8px 12px; background: #f8fafc; color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
table.grid th .arrow { font-size: 10px; }
table.grid td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Lo que se lee como número —RUT, montos, fechas, edades— con cifras de
   ancho fijo: así las columnas quedan derechas de arriba abajo */
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid tr:hover td { background: #f8fafc; }
table.grid tr { cursor: pointer; }
.table-scroll { overflow-x: auto; }
.thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
/* La columna de la foto ocupa lo justo: la miniatura y nada más */
table.grid th.col-mini, table.grid td.col-mini { width: 1%; white-space: nowrap; text-align: center; padding-left: 10px; padding-right: 10px; }
table.grid th.col-mini { font-size: 15px; }
.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty-state .big { font-size: 40px; margin-bottom: 8px; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: #e2e8f0; color: #334155;
  /* Se lee en una línea mientras quepa; si la etiqueta es larga y la pantalla
     angosta, corta adentro de la píldora en vez de empujar la página de lado */
  max-width: 100%; overflow-wrap: anywhere;
}
.badge.green { background: #dcfce7; color: #166534; }
.badge.red { background: #fee2e2; color: #991b1b; }
.badge.yellow { background: #fef3c7; color: #92400e; }
.badge.blue { background: #dbeafe; color: #1e40af; }
/* El valor esperado de una lista: se lee, no se destaca */
.valor-normal { color: var(--muted); }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.pager .pages { display: flex; gap: 6px; }
.pager button { border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 5px 11px; cursor: pointer; font-size: 13px; }
.pager button.cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager button:disabled { opacity: 0.4; cursor: default; }

/* ---------- Formularios ---------- */
/* Las columnas se acomodan al ancho que haya: tres en un computador, dos en
   una pantalla mediana, una en el teléfono. Un RUT no necesita medio metro de
   caja para caber. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 14px 18px; padding: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
/* Un campo ancho (la tabla de permisos) no debe estirar su columna: que se
   deslice por dentro en vez de arrastrar de lado a toda la página. */
.form-grid > * { min-width: 0; }
.fld label { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.fld label .req { color: var(--danger); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; background: #fff; font-family: inherit;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--accent); }
.fld textarea { min-height: 84px; resize: vertical; }
.fld .help { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
/* Las fechas y los números no ocupan toda la columna: se leen mejor cortos */
.fld input[type="date"], .fld input[type="time"], .fld input.numero, .fld .conplata { max-width: 210px; }

/* Los números se escriben con los miles separados, con cifras de ancho fijo
   para que no bailen al teclear. Cuando es plata, el signo va pegado a la
   caja: se ve que es un monto sin tener que leer la etiqueta. */
.fld input.numero { font-variant-numeric: tabular-nums; }
.conplata { position: relative; display: block; }
.conplata .signo {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; pointer-events: none;
}
.fld .conplata input { padding-left: 25px; }

/* Una ficha larga se lee por partes: cada sección en su caja, con su número.
   Cuarenta casillas seguidas no se leen; siete bloques de cinco, sí. */
.form-bloques { display: grid; gap: 12px; padding: 16px; }
.form-bloque {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 2px 14px 10px; margin: 0; min-width: 0;   /* min-width: los fieldset se resisten a encoger */
}
/* Lo que va antes del primer título no se encierra: no tiene nombre que poner */
.form-bloque.suelto { border: 0; padding: 0; }
.form-bloque > legend {
  padding: 0 8px; margin-left: 2px;
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--marca-azul);
}
.form-bloque > legend .nb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: var(--marca-azul); color: #fff; font-size: 11px; letter-spacing: 0;
}
.form-bloque .form-grid { padding: 8px 0 0; }

/* ---------- Texto con formato: negrita, cursiva, listas y títulos ---------- */
.rico { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.rico-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 5px 6px; background: #f8fafc; border-bottom: 1px solid var(--border);
}
.rico-barra button {
  border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer;
  padding: 4px 9px; font-size: 12.5px; font-family: inherit; color: #475569; line-height: 1.4;
}
.rico-barra button:hover { background: #fff; border-color: var(--border); color: var(--marca-azul); }
.rico-barra .sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.rico-hoja {
  min-height: 150px; padding: 12px 14px; font-size: 14px; line-height: 1.55; outline: none;
}
.rico-hoja:focus { box-shadow: inset 0 0 0 2px #bfdbfe; }
.rico-hoja p { margin: 0 0 8px; }
.rico-hoja h3 { font-size: 15.5px; color: var(--marca-azul); margin: 12px 0 6px; }
.rico-hoja h4 { font-size: 14px; margin: 10px 0 5px; }
.rico-hoja ul, .rico-hoja ol { margin: 0 0 8px; padding-left: 22px; }
.rico-hoja li { margin-bottom: 3px; }
.rico-hoja blockquote {
  margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted);
}

/* Y cómo se lee después, en la ficha */
.dato-rico { font-size: 14px; line-height: 1.55; }
.dato-rico p { margin: 0 0 8px; }
.dato-rico h3 { font-size: 15px; color: var(--marca-azul); margin: 12px 0 6px; }
.dato-rico h4 { font-size: 13.5px; margin: 10px 0 5px; }
.dato-rico ul, .dato-rico ol { margin: 0 0 8px; padding-left: 22px; }
.dato-rico blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }

/* Campo destacado: lo que no se puede pasar por alto */
.fld.destacado label { color: #92400e; }
.fld.destacado textarea, .fld.destacado input { border-color: #fbbf24; background: #fffbeb; }

/* ---------- Traspaso desde el sistema anterior ---------- */
.traspaso-pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; padding: 16px 18px 18px;
}
.traspaso-pasos .tp {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #f8fafc;
}
.traspaso-pasos .tp b { font-size: 13.5px; color: var(--marca-azul); }
.traspaso-pasos .tp span { font-size: 12.5px; color: var(--muted); line-height: 1.45; flex: 1; }
.traspaso-pasos .tp .btn { margin-top: 4px; }

/* La salida de la importación, tal como se vería en la consola */
.consola { margin: 0 18px 18px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.consola-cab {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #f8fafc; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.consola-cab b { flex: 1; }
.consola pre {
  margin: 0; padding: 14px 16px; max-height: 460px; overflow: auto;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.6; white-space: pre; color: var(--text); background: var(--card);
}
.consola.bien { border-color: #86efac; }
.consola.bien .consola-cab { background: #f0fdf4; color: #14532d; }
.consola.mal { border-color: #fca5a5; }
.consola.mal .consola-cab { background: #fef2f2; color: #991b1b; }

@media (max-width: 700px) {
  .traspaso-pasos { grid-template-columns: 1fr; padding: 14px; }
  .consola { margin: 0 14px 14px; }
  .consola pre { font-size: 11.5px; }
}

/* ---------- El listado en el teléfono: tarjetas, no una tabla ancha ---------- */
/* En pantalla chica una tabla de nueve columnas obliga a desplazarse de lado y
   deja la mitad de los datos fuera de la vista. Cada fila se dibuja entonces
   como una tarjeta, con el nombre del dato al lado de su valor y sin los
   campos que vienen en blanco. */
@media (max-width: 700px) {
  table.grid-lista, table.grid-lista tbody, table.grid-lista tr, table.grid-lista td { display: block; width: auto; }
  table.grid-lista thead { display: none; }
  table.grid-lista tr {
    position: relative;
    border: 1px solid var(--border); border-radius: 12px; margin: 8px 10px; padding: 9px 12px;
    background: var(--card); box-shadow: var(--shadow);
  }
  table.grid-lista tr:hover td { background: transparent; }
  table.grid-lista td {
    border: 0; padding: 3px 0; display: flex; gap: 14px; align-items: baseline;
    justify-content: space-between; text-align: right; font-size: 13.5px; line-height: 1.35;
  }
  table.grid-lista td::before {
    content: attr(data-label); flex: none; text-align: left;
    color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  }
  /* Lo que viene en blanco no ocupa lugar */
  table.grid-lista td:empty { display: none; }
  /* El trato va sobre el nombre, en chico, como se lee en la ficha */
  table.grid-lista td[data-col="tratamiento"] {
    justify-content: flex-start; text-align: left; color: var(--muted);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; padding-bottom: 0;
  }
  table.grid-lista td[data-col="tratamiento"]::before { display: none; }
  /* El nombre encabeza la tarjeta */
  table.grid-lista td[data-col="nombres"], table.grid-lista td[data-col="nombre"],
  table.grid-lista td[data-col="apellidos"] { font-size: 15.5px; font-weight: 700; line-height: 1.22; }
  table.grid-lista td[data-col="nombres"]::before, table.grid-lista td[data-col="nombre"]::before,
  table.grid-lista td[data-col="apellidos"]::before { display: none; }
  table.grid-lista td[data-col="nombres"], table.grid-lista td[data-col="nombre"] { padding-bottom: 0; }
  table.grid-lista td[data-col="apellidos"] { padding-top: 0; }
  table.grid-lista td[data-col="nombres"], table.grid-lista td[data-col="nombre"],
  table.grid-lista td[data-col="apellidos"] { text-align: left; justify-content: flex-start; }
  /* La foto, arriba de todo */
  table.grid-lista td.col-mini { width: auto; justify-content: flex-start; padding: 2px 0 6px; }
  table.grid-lista td.col-mini::before { display: none; }
  /* Imprimir y borrar van en la esquina de la tarjeta, no en una fila propia:
     una fila entera para dos botones chicos es media pantalla desperdiciada
     cuando hay que recorrer ciento setenta y nueve fichas. */
  table.grid-lista td.acciones {
    position: absolute; top: 7px; right: 9px; padding: 0; gap: 4px; justify-content: flex-end;
  }
  table.grid-lista td.acciones::before { display: none; }
  /* Y el nombre no se mete por debajo de ellos */
  table.grid-lista td[data-col="tratamiento"], table.grid-lista td[data-col="nombres"],
  table.grid-lista td[data-col="nombre"], table.grid-lista td[data-col="apellidos"] { padding-right: 78px; }
  /* Y se ven siempre: en el teléfono no hay ratón que pasar por encima */
  table.grid-lista .btn.sm { border-color: var(--border); background: #fff; color: var(--text); }
  table.grid-lista .thumb { width: 46px; height: 46px; }
}

/* ---------- La ficha: todos los datos de un registro, para leerlos ---------- */
.ficha-cabecera {
  display: flex; gap: 18px; align-items: center; padding: 16px 18px; flex-wrap: wrap;
}
.ficha-cabecera .fc-foto {
  width: 92px; height: 92px; border-radius: 14px; object-fit: cover; flex: none;
  border: 1px solid var(--border); background: #f8fafc;
}
.ficha-cabecera .fc-foto.sin {
  display: flex; align-items: center; justify-content: center; font-size: 38px; color: #cbd5e1;
}
.ficha-cabecera .fc-datos { flex: 1 1 240px; min-width: 0; }
.ficha-cabecera h3 { font-size: 20px; line-height: 1.25; margin: 0; }
.ficha-cabecera .fc-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.ficha-cabecera .fc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ficha-cabecera .fc-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha-cabecera .fc-acciones .btn { text-decoration: none; }

.toolbar label.ver-blancos {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.toolbar label.ver-blancos[hidden] { display: none; }

.ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px 18px; padding: 6px 18px 20px;
}
.ficha-seccion {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 18px 0 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--marca-azul);
}
.ficha-seccion::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ficha-dato { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; min-width: 0; }
.ficha-dato .dl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.ficha-dato .dv { font-size: 14.5px; line-height: 1.45; word-break: break-word; }
.ficha-dato .dv a { color: var(--accent); text-decoration: none; }
.ficha-dato .dv .sin { color: #cbd5e1; font-size: 13px; }
.ficha-dato.destacado {
  grid-column: 1 / -1; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 10px 14px; margin: 4px 0;
}
.ficha-dato.destacado .dl { color: #92400e; }
.ficha-dato .dato-texto { white-space: pre-wrap; }
.ficha-dato .dato-nota { color: var(--muted); font-size: 12.5px; }
.ficha-dato .dato-wa { text-decoration: none; margin-left: 4px; }
.ficha-dato .dato-imagen {
  max-width: 160px; max-height: 160px; border-radius: 8px; border: 1px solid var(--border); margin-top: 4px;
}
.ficha-dato .chip {
  display: inline-block; background: #f1f5f9; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 10px; font-size: 12.5px; margin: 2px 2px 0 0;
}
/* Los campos en blanco solo aparecen cuando se piden */
.ficha-datos .vacio { display: none; }
.ficha-datos.con-vacios .ficha-dato.vacio { display: flex; }
.ficha-datos.con-vacios .ficha-seccion.vacio { display: flex; }

@media (max-width: 700px) {
  .ficha-datos { grid-template-columns: 1fr; padding: 4px 14px 16px; gap: 0; }
  .ficha-cabecera { padding: 14px; gap: 14px; }
  .ficha-cabecera .fc-foto { width: 72px; height: 72px; }
  .ficha-cabecera h3 { font-size: 18px; }
  .ficha-cabecera .fc-acciones .btn { flex: 1 1 auto; text-align: center; }
  .ficha-dato { border-bottom: 1px solid #f1f5f9; padding: 10px 0; }
}

/* ---------------- Pestañas de una ficha ----------------
   Todo lo que cuelga de una ficha —la gente de un cuerpo, su plata, sus actas,
   los documentos de un miembro— iba una tarjeta debajo de la otra. En el
   teléfono eso obligaba a recorrer la pantalla entera para llegar a lo de más
   abajo. Acá va la barra que las separa.

   Se corre de lado a propósito y sin barra visible: en un teléfono caben tres
   o cuatro y las demás se alcanzan arrastrando, que es el gesto que la gente
   ya hace. El desvanecido del borde derecho es lo que avisa que hay más. */
.pestanas {
  display: flex; gap: 2px; margin: 14px 0 0;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.pestanas::-webkit-scrollbar { display: none; }
/**
 * Un velo en el borde por el lado que queda barra sin ver.
 *
 * Antes se ponía por el ancho de la pantalla: siempre en el teléfono, nunca de
 * los 900 px para arriba. Eso valía mientras las barras tuvieran seis o siete
 * pestañas, que en un computador caben. La de Configuración tiene diez y no
 * cabe en ninguna pantalla, así que la última quedaba cortada por el borde sin
 * que nada avisara de que seguía.
 *
 * Ahora lo decide el propio contenido: las clases las pone montarPestanas
 * midiendo lo que sobra, y se ponen al día al correr la barra.
 */
.pestanas.mas-derecha {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.pestanas.mas-izquierda {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
}
.pestanas.mas-izquierda.mas-derecha {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.pestanas button {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  border: none; background: transparent; color: var(--muted);
  padding: 11px 15px; font-size: 14px; font-weight: 650; font-family: inherit;
  cursor: pointer; white-space: nowrap; min-height: 44px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas button .ic { font-size: 15px; line-height: 1; }
.pestanas button:hover { color: var(--marca-azul); }
.pestanas button.on { color: var(--accent); border-bottom-color: var(--accent); }
.pestanas button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 6px; }

/* La primera tarjeta de una pestaña ya tiene el aire de la barra encima */
.panel-pestana > .card:first-child,
.panel-pestana > div:first-child > .card:first-child { margin-top: 14px; }

@media (max-width: 700px) {
  .pestanas { margin-top: 12px; }
  .pestanas button { padding: 11px 13px; font-size: 13.5px; gap: 6px; }
}

/* ---------------- Cuadros de diálogo ----------------
   Para preguntar algo que no cabe en un «confirm»: datos a la vista, un aviso
   y un par de campos. Se usa el <dialog> del navegador, que trae el fondo, el
   foco atrapado adentro y el cierre con Escape. */
dialog.dlg {
  border: none; border-radius: 14px; padding: 0; max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28); color: var(--text); background: var(--card);
  /* El navegador centra un diálogo modal con «margin: auto», y el reset de
     arriba del archivo se lo quita a todo. Sin esto queda pegado al borde
     izquierdo, que fue exactamente lo que pasó al probarlo. */
  margin: auto;
}
dialog.dlg::backdrop { background: rgba(15, 23, 42, .45); }
dialog.dlg h3 { font-size: 16px; padding: 18px 20px 0; margin: 0; }
dialog.dlg .dlg-cuerpo { padding: 14px 20px 4px; font-size: 13.5px; line-height: 1.55; max-height: 62vh; overflow-y: auto; }
dialog.dlg .dlg-pie {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px 18px; border-top: 1px solid var(--border); margin-top: 12px;
}
dialog.dlg .btn.peligro { background: var(--danger); }
dialog.dlg .btn.peligro:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
  dialog.dlg .dlg-pie .btn { flex: 1 1 auto; text-align: center; }
}

/* Las credenciales de un pastor, en su ficha */
.mini-list .mono { font-family: "Consolas", "DejaVu Sans Mono", "Courier New", monospace; letter-spacing: .01em; }
.mini-list li .nota { display: block; margin-top: 2px; font-size: 11.5px; }

/* El logo de la institución, en la pantalla de configuración */
.cfg-imagen-caja { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-imagen-caja img {
  width: 84px; height: 84px; object-fit: contain; flex: none;
  border: 1px solid var(--border); border-radius: 12px; background: #f8fafc; padding: 6px;
}
.cfg-imagen-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Una que todavía no se ha cargado: el recuadro se ve, vacío y punteado */
.cfg-imagen-caja img.sin-imagen {
  border-style: dashed; border-color: #cbd5e1;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #eef2f7 6px, #eef2f7 12px);
}
.cfg-imagen-acciones .mut { font-size: 12.5px; }

/* Avisos al encabezar una ficha */
.avisos-ficha { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.aviso {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
/* El título del aviso NO lleva `white-space: nowrap`.
   Lo llevaba, para que un título corto se quedara en una línea y el texto
   fluyera al lado, y con títulos cortos funcionaba. Pero «📦 No hay ningún
   respaldo guardado fuera del servidor» mide 421 px y en un teléfono de 390
   no cabía: al no poder cortarse, empujaba la página entera a 438 px y había
   que desplazarse en horizontal para leer el aviso más importante que da el
   sistema, y justo en el único momento en que aparece —cuando todavía nadie
   se ha bajado un respaldo—, o sea recién publicado.
   Sin `nowrap` el resultado es el mismo cuando el título cabe: al ser un
   elemento flexible, se queda en una línea mientras haya espacio, y solo se
   parte cuando de verdad no lo hay. `overflow-wrap` es para el caso extremo
   de una palabra sola más ancha que la pantalla (un nombre de archivo, un
   correo largo): antes de salirse, se corta. */
.aviso b { overflow-wrap: anywhere; }
.aviso span { flex: 1 1 260px; }
.aviso.importante { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.aviso.salud { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
/* Dos personas guardaron la misma ficha: el aviso trae sus dos salidas */
.aviso.choque { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.aviso.choque .acciones { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aviso.choque .acciones .btn { margin: 0; }
/* Un aviso que pregunta, no que rechaza: el monto que deja una cuenta en rojo.
   Va en el mismo amarillo de «revise esto» y no en el rojo de «esto está mal». */
.aviso.confirmar { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.aviso.confirmar .acciones { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aviso.confirmar .acciones .btn { margin: 0; }

/* ---- En qué se está usando el disco ----
 * Una barra con las tres cosas que ocupan y lo que queda. Los colores llevan
 * además su punto en la leyenda, para que no haya que distinguirlos solo por
 * el color: quien no distinga dos de ellos lee igual el nombre y el peso. */
.disco-barra {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
  margin: 4px 0 14px;
}
.disco-barra span { display: block; height: 100%; }
.disco-barra .doc    { background: #2563eb; }
.disco-barra .base   { background: #0f766e; }
.disco-barra .copias { background: #a16207; }
.disco-barra .otros  { background: #94a3b8; }

.disco-leyenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 18px;
  font-size: 13.5px;
}
.disco-leyenda > div { display: flex; align-items: center; gap: 8px; }
.disco-leyenda b { margin-left: auto; font-variant-numeric: tabular-nums; }
.disco-leyenda .punto {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
}
.disco-leyenda .punto.doc    { background: #2563eb; }
.disco-leyenda .punto.base   { background: #0f766e; }
.disco-leyenda .punto.copias { background: #a16207; }
.disco-leyenda .punto.otros  { background: #94a3b8; }
.disco-leyenda .punto.libre  { background: var(--border); border: 1px solid #cbd5e1; }

/* ---- Editor de permisos: las llaves del sistema ----
 * La explicación va bajo el nombre, porque «Traspaso desde el sistema
 * anterior» no dice por sí solo qué se está concediendo. Y las acciones que
 * una llave no admite se marcan con una raya en vez de dejar el hueco: así se
 * ve que la columna existe y que ahí no aplica. */
.perm-tabla .nom .nota {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
  max-width: 42ch;
  font-weight: 400;
  white-space: normal; /* la celda del nombre va en una línea; la nota, no */
}
.perm-tabla .no-aplica { color: var(--muted); opacity: .55; }

.fld.check { display: flex; align-items: center; gap: 8px; padding-top: 22px; }
.fld.check input { width: auto; }
.fld.check label { margin: 0; }
.form-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); background: #f8fafc; border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.form-foot .left { margin-right: auto; }
.form-error { color: var(--danger); font-size: 13px; padding: 0 20px 10px; }

/* multiref */
.multiref { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.multiref .mr-search { border: none; border-bottom: 1px solid var(--border); border-radius: 0; width: 100%; padding: 8px 12px; }
.multiref .mr-list { max-height: 190px; overflow-y: auto; }
.multiref .mr-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; }
.multiref .mr-item:hover { background: #f8fafc; }
.multiref .mr-item input { width: auto; }
.multiref .mr-count { padding: 6px 12px; font-size: 12px; color: var(--muted); background: #f8fafc; border-top: 1px solid var(--border); }

/* file */
.filefld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filefld img.preview { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.filefld .fname { font-size: 12.5px; color: var(--muted); word-break: break-all; flex: 1 1 120px; min-width: 0; }
.filefld .sin-archivo { color: #94a3b8; }
/* El control del navegador se esconde, pero sigue estando: lo abre la etiqueta */
.fld input.oculto-de-verdad, .oculto-de-verdad {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fld input.oculto-de-verdad { width: 1px; }
.filefld .btn, .filefld label.btn { flex: none; white-space: nowrap; }

/* ---------- Panel de control ---------- */
/* Los conteos: el número manda, el ícono acompaña. Caben todos en una fila
   sin que ninguno quede solo en la siguiente. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; box-shadow: var(--shadow); cursor: pointer; transition: border-color .12s, box-shadow .12s;
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px;
}
.stat:hover { border-color: #c7d2e8; box-shadow: 0 2px 8px rgba(22,38,92,.10); }
.stat .ic { font-size: 17px; grid-row: 1 / span 2; grid-column: 2; opacity: .75; }
.stat .num { font-size: 23px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 12px; color: var(--muted); grid-column: 1; line-height: 1.3; }

/* El dinero: el color dice qué es, sin pintar el bloque entero. Un tablero no
   necesita cuatro cuadrados de color para decir cuatro cifras. */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; margin-bottom: 18px; }
.fin {
  border-radius: var(--radius); padding: 11px 14px; background: var(--card);
  border: 1px solid var(--border); border-left: 3px solid var(--muted); box-shadow: var(--shadow);
}
.fin.green { border-left-color: var(--success); }
.fin.red { border-left-color: var(--danger); }
.fin.blue { border-left-color: var(--accent); }
.fin.slate { border-left-color: #64748b; }
.fin .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.fin .num { font-size: 21px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
.fin.green .num { color: #15803d; }
.fin.red .num { color: #b91c1c; }
.fin.blue .num { color: var(--accent-dark); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dash-cols > * { min-width: 0; }
.dash-cols h3 { font-size: 14.5px; padding: 13px 16px 0; }
/* Las tres tarjetas se acomodan solas en dos columnas: la que termina antes
   deja lugar a la siguiente, en vez de dejar media pantalla en blanco. */
.mini-list { list-style: none; padding: 8px 6px; }
/* Si no cabe en una línea, el dato de la derecha baja a la siguiente: nunca
   se estira la columna ni aparece una barra para desplazarse de lado. */
.mini-list li {
  display: flex; justify-content: space-between; gap: 4px 10px; padding: 8px 12px;
  font-size: 13px; border-radius: 8px; flex-wrap: wrap;
}
.mini-list li:hover { background: #f8fafc; }
.mini-list .mut { color: var(--muted); font-size: 12px; }
.mini-list li > .mut { white-space: nowrap; }
.mini-list li > span { min-width: 0; }

/* resumen tesorería en el listado */
.treasury-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }

/* ---------- Impresión ---------- */
.print-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.print-sheet {
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow);
  margin: 0 auto; padding: 0;
}
.cert-sheet {
  max-width: 900px; padding: 26px; position: relative;
}
.cert-inner {
  border: 3px double var(--marca-oro); padding: 40px 48px; text-align: center; position: relative;
}
.cert-logo { width: 92px; height: 92px; object-fit: contain; margin-bottom: 10px; }
.cert-inner .church { font-size: 13.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--marca-azul); font-weight: 700; line-height: 1.5; }
.cert-inner .church .lema { font-size: 12px; letter-spacing: 1px; color: var(--marca-oro-oscuro); }
.cert-inner .local { font-size: 12.5px; color: #78716c; margin-top: 4px; }
.cert-inner h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; color: var(--marca-azul); margin: 18px 0 6px; }
.cert-inner .cert-no { font-size: 12px; color: var(--marca-oro-oscuro); letter-spacing: 1px; }
.cert-inner .otorgado { margin-top: 26px; font-size: 14px; color: #57534e; }
.cert-inner .titular { font-family: Georgia, serif; font-size: 30px; font-style: italic; color: var(--marca-azul); margin: 10px 0 4px; border-bottom: 1px solid var(--marca-oro); display: inline-block; padding: 0 30px 6px; }
.cert-inner .texto { max-width: 620px; margin: 18px auto 0; font-size: 14.5px; line-height: 1.7; color: #44403c; white-space: pre-wrap; }
.cert-firmas { display: flex; justify-content: space-around; margin-top: 60px; }
.cert-firmas .firma { width: 220px; border-top: 1px solid #78716c; padding-top: 6px; font-size: 13px; color: #57534e; }
.cert-fecha { margin-top: 30px; font-size: 13px; color: #78716c; }

.cred-card {
  width: 420px; border-radius: 14px; overflow: hidden; margin: 0 auto;
  border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff;
}
.cred-head {
  background: linear-gradient(135deg, var(--marca-azul), var(--marca-azul-claro));
  color: #fff; padding: 14px 18px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 3px solid var(--marca-oro);
}
.cred-head .t { font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; }
.cred-logo { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; flex: none; }
.cred-head .n { font-size: 11px; opacity: 0.85; }
.cred-body { display: flex; gap: 16px; padding: 16px 18px; }
.cred-body img, .cred-body .nofoto {
  width: 92px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border);
  background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #cbd5e1;
}
.cred-data { font-size: 12.5px; line-height: 1.55; }
.cred-data .nm { font-size: 16px; font-weight: 800; margin-bottom: 4px; color: var(--marca-azul); }
.cred-data .lbl { color: var(--muted); }
.cred-foot { border-top: 1px solid var(--border); padding: 10px 18px; font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }

.acta-sheet { max-width: 820px; padding: 46px 56px; font-size: 14px; line-height: 1.7; }
.membrete {
  display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--marca-azul);
}
.membrete img { width: 62px; height: 62px; object-fit: contain; flex: none; }
.membrete b { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--marca-azul); }
.membrete i { font-style: normal; font-size: 12.5px; color: var(--marca-oro-oscuro); font-weight: 600; }
/* Los datos de contacto y la personalidad jurídica, bajo el nombre */
.membrete .datos { display: block; font-size: 10.5px; color: #78716c; margin-top: 3px; line-height: 1.4; }
/* Lo mismo al pie de un certificado, donde va abajo del todo */
.cert-pie {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid #e7e5e4;
  font-size: 10px; color: #a8a29e; text-align: center; line-height: 1.5;
}
.acta-sheet h1 { text-align: center; font-size: 19px; text-transform: uppercase; letter-spacing: 1px; }
.acta-sheet .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 13px; }
.acta-sheet .meta-tbl { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13px; }
.acta-sheet .meta-tbl td { border: 1px solid var(--border); padding: 6px 10px; }
.acta-sheet .meta-tbl td.k { background: #f8fafc; font-weight: 600; width: 180px; }
.acta-sheet h3 { margin: 20px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: #334155; }
.acta-sheet .blk { white-space: pre-wrap; }
.acta-firmas { display: flex; justify-content: space-between; margin-top: 70px; gap: 40px; }
.acta-firmas .firma { flex: 1; text-align: center; border-top: 1px solid #64748b; padding-top: 6px; font-size: 13px; }

.print-generic { max-width: 820px; padding: 40px 48px; }
.print-generic h1 { font-size: 20px; margin-bottom: 4px; }
.print-generic .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.print-generic table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.print-generic td { border: 1px solid var(--border); padding: 8px 12px; }
.print-generic td.k { background: #f8fafc; font-weight: 600; width: 220px; }

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .print-actions, .no-print { display: none !important; }
  .content { padding: 0; max-width: none; }
  .print-sheet { border: none; box-shadow: none; }
}


/* ---------- La planilla mensual de un cuerpo ----------
   La hoja de siempre, la que se llevaba a mano: los integrantes en las filas,
   los treinta y un días del mes en las columnas. Sale apaisada porque de otra
   forma no cabe, y las columnas de día se hacen angostas a propósito: lo que
   va dentro es UNA letra. */
.planilla-tit { text-align: center; letter-spacing: 0.5px; }
.planilla-scroll { overflow-x: auto; }
table.planilla-mes {
  border-collapse: collapse; width: 100%; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
table.planilla-mes th, table.planilla-mes td {
  border: 1px solid #cbd2dd; padding: 2px 3px; text-align: center; white-space: nowrap;
}
table.planilla-mes thead th { background: #eef2ff; color: var(--marca-azul); font-weight: 700; }
table.planilla-mes .col-n { width: 26px; color: var(--muted); }
table.planilla-mes .col-nombre { text-align: left; padding-left: 7px; white-space: nowrap; }
table.planilla-mes .col-dia { width: 17px; }
table.planilla-mes .col-tot { width: 30px; font-weight: 600; }
/* El día sin reunión va en gris y en blanco: no es que nadie fuera, es que no
   hubo nada a lo que ir, y confundir las dos cosas arruina la planilla. */
table.planilla-mes .sin-reunion { background: #f4f6f9; }
table.planilla-mes td.marca { font-weight: 700; }
table.planilla-mes .si  { color: #15803d; }
table.planilla-mes .jus { color: #1d4ed8; }
table.planilla-mes .no  { color: #b91c1c; }
table.planilla-mes tbody tr:nth-child(even) td { background: #fbfcfe; }
table.planilla-mes tbody tr:nth-child(even) td.sin-reunion { background: #eef1f6; }
table.planilla-mes tfoot .pie td { background: #f8fafc; font-weight: 600; font-size: 10.5px; }
table.planilla-mes tfoot .pie td:first-child { text-align: left; padding-left: 7px; letter-spacing: 0.3px; }
table.planilla-mes tfoot .pie.si td  { color: #15803d; }
table.planilla-mes tfoot .pie.jus td { color: #1d4ed8; }
table.planilla-mes tfoot .pie.no td  { color: #b91c1c; }

/* La planilla se imprime apaisada: treinta y un columnas de día más el nombre
   no caben a lo alto de ninguna hoja. Se le baja el cuerpo de letra para que
   entre en Carta, que es lo que hay en cualquier oficina, y se repite el
   encabezado en cada página cuando el cuerpo tiene mucha gente. */
@media print {
  .planilla-hoja { padding: 0; }
  .planilla-hoja .planilla-scroll { overflow: visible; }
  table.planilla-mes { font-size: 7.5pt; }
  table.planilla-mes th, table.planilla-mes td { padding: 1px 2px; }
  /* El encabezado sí se repite en cada hoja: un cuerpo grande ocupa más de
     una, y sin los números de los días arriba la segunda hoja no se entiende.
     El pie se pasa a `table-row-group`, que NO es lo que trae de fábrica: un
     `tfoot` es `table-footer-group` por defecto, y con eso Chrome lo reserva
     para el final de la hoja y lo mandaba a una segunda página aunque
     quedaran noventa milímetros libres debajo de la tabla. Como una fila más,
     va justo después de la última persona, que es donde tiene que ir. */
  table.planilla-mes thead { display: table-header-group; }
  table.planilla-mes tfoot { display: table-row-group; }
  table.planilla-mes tr { break-inside: avoid; }
  table.planilla-mes .sin-reunion { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@page planilla { size: Letter landscape; margin: 8mm; }
.planilla-hoja { page: planilla; }


/* ---------- La campanita de los avisos ----------
   Va en la barra de arriba, junto al nombre. El número no es un adorno: es lo
   único que se ve sin abrir nada, así que tiene que leerse de un vistazo desde
   la otra punta del escritorio. */
.campanita { position: relative; }
.cam-boton {
  background: none; border: none; cursor: pointer; font-size: 19px; line-height: 1;
  padding: 7px 9px; border-radius: 10px; position: relative;
}
.cam-boton:hover { background: #eef2ff; }
.campanita.con-avisos .cam-boton { animation: cam-toque 1.4s ease-in-out 1; }
@keyframes cam-toque {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
}
.cam-cuenta {
  position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--danger, #dc2626); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cam-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 92vw);
  background: #fff; border: 1px solid #d7dbe3; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18); z-index: 60; overflow: hidden;
}
.cam-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid #eef1f6; background: #f8fafc;
}
.cam-lista { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.cam-lista li { padding: 11px 14px; border-bottom: 1px solid #f1f4f9; cursor: pointer; }
.cam-lista li:hover { background: #f8fafc; }
/* Lo no leído se marca con una barra al costado y no con negrita a secas: se
   distingue igual de bien y no cambia el ancho del texto al leerlo. */
.cam-lista li.sin-leer { border-left: 3px solid var(--marca-azul); padding-left: 11px; background: #fbfdff; }
.cam-lista li.leido { opacity: 0.72; }
.cam-t { font-weight: 600; font-size: 13.5px; }
.cam-c { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cam-f { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.cam-vacio { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.cam-pie { padding: 9px 14px; border-top: 1px solid #eef1f6; background: #f8fafc; font-size: 12.5px; }
.cam-pie a { color: var(--marca-azul); text-decoration: none; }
.cam-pie a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  /* En el teléfono el panel se ancla a la pantalla y no al botón: colgado del
     botón se saldría por el borde derecho. */
  .cam-panel { position: fixed; right: 8px; left: 8px; width: auto; top: 58px; }
}

/* ---------- Responsive / móvil ---------- */
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }
.backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 40;
}
.backdrop.show { display: block; }
@media (max-width: 900px) {
  body { font-size: 15px; }
  .form-grid { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .form-bloques { padding: 12px; gap: 10px; }
  .form-bloque { padding: 2px 11px 8px; }
  .dash-cols { grid-template-columns: 1fr; }
  .menu-toggle { display: block; }
  .sidebar { position: fixed; z-index: 50; left: -270px; transition: left 0.22s; width: 264px; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
  .sidebar.open { left: 0; }
  .side-link { padding: 12px 16px; font-size: 15px; }        /* objetivos táctiles más grandes */
  .content { padding: 14px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar .who span:last-child { display: none; }             /* ocultar datos del usuario en pantallas chicas */
  .iglesia-local { padding: 5px 10px; }
  /* Acá el nombre de la iglesia es lo único que dice dónde se está parado:
     el adorno cede el espacio para que quepa entero. */
  .iglesia-local .ic { display: none; }
  /**
   * `min-width: 0` no es un adorno: sin él, el nombre de la iglesia —que va en
   * una sola línea— impone su ancho completo como mínimo, la barra no puede
   * encogerse y se sale de la pantalla. En un teléfono de 360 px la barra
   * medía 365 y «Cerrar sesión» quedaba cortado por el borde. Con esto el
   * nombre se recorta con puntos suspensivos, que es para lo que ya tenía el
   * `text-overflow`.
   */
  .iglesia-local .nm { max-width: none; font-size: 12.5px; min-width: 0; }
  /**
   * Y el sitio reservado para el nombre de la iglesia se afloja.
   *
   * En pantalla grande el selector tiene 160 px asegurados para que no quede
   * reducido a la flechita. En un teléfono de 360 px esos 160 px son lo que
   * hace que la barra pida 377 y se salga: «Cerrar sesión» quedaba cortado por
   * el borde derecho. Acá se le deja la mitad, que sigue alcanzando para leer
   * el nombre, y el resto lo resuelven los puntos suspensivos.
   */
  .iglesia-local.elegible { min-width: 80px; max-width: 46vw; }
  .page-head h2 { font-size: 18px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .num { font-size: 20px; }
  .stat .ic { font-size: 15px; }
  .fin-cards, .treasury-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fin { padding: 10px 12px; }
  .fin .num { font-size: 18px; }
  .toolbar { padding: 10px 12px; gap: 8px; }
  .toolbar input[type="search"] { min-width: 0; flex: 1 1 100%; }
  /* Un filtro cuya opción más larga es el nombre completo de la iglesia
     estiraba la barra fuera de la pantalla: se le pone freno. */
  .toolbar select, .toolbar label.range { flex: 1 1 45%; min-width: 0; max-width: 100%; }
  .toolbar label.range input { flex: 1; min-width: 0; }
  /* La tabla que sigue siendo tabla, con celdas más cómodas al tacto. La que
     se dibuja como tarjetas manda sobre su propio espacio, más arriba. */
  table.grid:not(.grid-lista) td, table.grid:not(.grid-lista) th { padding: 9px 10px; }
  .btn { padding: 10px 16px; }                                /* botones cómodos al tacto */
  .pager { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .form-foot { padding: 12px 14px; }
  .form-foot .btn { flex: 1; justify-content: center; }
  .form-foot .left { flex-basis: 100%; margin-right: 0; }
  .fld input, .fld select, .fld textarea { font-size: 16px; } /* evita el zoom automático de iOS */
  .cred-card { width: 100%; max-width: 420px; }
  .cert-inner { padding: 22px 14px; }
  .cert-inner h1 { font-size: 24px; }
  .cert-inner .titular { font-size: 22px; padding: 0 10px 6px; }
  .acta-sheet, .print-generic { padding: 22px 16px; }
  .login-card { padding: 30px 22px; }
}

/* ---------- Ventana de importación ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--card); border-radius: 14px; width: 100%; max-width: 820px;
  max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.modal-head h3 { font-size: 17px; }
.modal-head .cerrar { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--border); background: #f8fafc;
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; border-radius: 0 0 14px 14px;
}
.modal-foot .left { margin-right: auto; }
.paso { margin-bottom: 18px; }
.paso h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 8px; }
.mapeo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.mapeo .par { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mapeo .par .col { flex: 0 0 45%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapeo .par select { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; min-width: 0; }
.previa { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.previa table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.previa th { background: #f8fafc; padding: 7px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.previa td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.resultado { border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.resultado.ok { background: #dcfce7; color: #166534; }
.resultado.warn { background: #fef3c7; color: #92400e; }
.resultado.err { background: #fee2e2; color: #991b1b; }
.lista-errores { max-height: 240px; overflow-y: auto; margin-top: 10px; font-size: 12.5px; }
.lista-errores div { padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.lista-errores b { color: inherit; }
@media (max-width: 700px) { .mapeo { grid-template-columns: 1fr; } }

/* ---------- Historial de versiones ---------- */
.versiones-lista li { align-items: flex-start; gap: 14px; }
.versiones-lista li > span:first-child { flex: 0 0 auto; }
.versiones-lista li > span:last-child { text-align: right; }
.versiones-lista li.es-la-de-ahora { background: #f0fdf4; border-radius: 8px; }
/* En el teléfono no hay ancho para dos columnas: el título se pone debajo del
   número y alineado a la izquierda, que es como se lee una lista. */
@media (max-width: 620px) {
  .versiones-lista li { flex-direction: column; gap: 2px; }
  .versiones-lista li > span:last-child { text-align: left; }
}

/* ---------- Aviso de credenciales por renovar (punto 10.4) ---------- */
/* Amarillo como los demás avisos del sistema, para que se lea «esto pide algo»
   sin gritar: una credencial por vencer no es una emergencia, es una tarea. */
.aviso-credenciales { border-left: 4px solid #f59e0b; margin-bottom: 18px; }
.aviso-credenciales h3 { color: #92400e; }
.aviso-credenciales > p { margin: 0 0 4px; font-size: 13px; line-height: 1.55; }
.aviso-credenciales .mini-list li { cursor: pointer; }

/* ---------- Aviso de mantenimiento ---------- */
.aviso-mantenimiento {
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: 10px;
  padding: 12px 14px; font-size: 13.5px; text-align: left; line-height: 1.5;
}
.aviso-mantenimiento span { display: block; margin-top: 4px; font-size: 12.5px; opacity: 0.85; }

/* ---------- Editor de permisos ---------- */
/* La tabla de permisos es ancha: se desliza dentro de su propia caja, para
   que no arrastre de lado a toda la página en el teléfono. */
.permisos-editor { border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.perm-cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 12px; line-height: 1.45;
}
.perm-cabecera span { flex: 1; min-width: 240px; }

/* Los perfiles que se usan a menudo, para partir de uno y ajustar */
.perm-perfiles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 12px; background: #f8fafc; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 12px;
}
.perm-perfiles .tit { font-size: 12.5px; font-weight: 600; color: #475569; margin-right: 4px; }

.perm-buscar { margin-bottom: 10px; }
.perm-buscar input {
  width: 100%; max-width: 320px; padding: 7px 11px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13.5px; background: #fff;
}

/* Cada grupo de módulos, plegable, con sus atajos para todo el grupo */
.perm-grupo { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.pg-cab {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: #f8fafc; cursor: pointer; font-size: 13px;
}
.pg-cab:hover { background: #f1f5f9; }
.pg-cab .flecha { color: var(--muted); width: 12px; }
.pg-cab .mut { color: var(--muted); font-size: 12px; }
.pg-cab .spacer { flex: 1; }

/* Los escalones: nada, solo ver, ver y corregir, agregar, todo */
.perm-tabla .chip, .pg-cab .chip {
  border: 1px solid var(--border); background: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 11.5px; font-family: inherit; color: #475569; cursor: pointer;
  white-space: nowrap;
}
.perm-tabla .chip:hover, .pg-cab .chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.perm-tabla .chip.on {
  background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; font-weight: 600;
}
.pg-cab .chip.sm { padding: 2px 8px; font-size: 11px; }

.perm-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-tabla th {
  text-align: left; padding: 7px 12px; background: #fff; color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.perm-tabla th.c, .perm-tabla td.c { text-align: center; width: 1%; }
.perm-tabla td { padding: 7px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.perm-tabla tr:last-child td { border-bottom: none; }
.perm-tabla td.nom { white-space: nowrap; }
.perm-tabla td.atajos, .perm-tabla th.atajos { white-space: nowrap; }
.perm-tabla td.atajos { display: flex; flex-wrap: wrap; gap: 4px; }
.perm-tabla tr.personalizado td.nom { font-weight: 700; color: var(--marca-azul); }
.perm-tabla .marca { color: var(--accent); font-size: 18px; line-height: 0; vertical-align: middle; }
.perm-tabla input[type=checkbox] { width: auto; cursor: pointer; }

/* La lista para ponerle un perfil a varios usuarios de una vez */
ul.perfil-elegir { list-style: none; padding: 4px 0; margin: 0; }
ul.perfil-elegir li { border-bottom: 1px solid #f1f5f9; }
ul.perfil-elegir li:last-child { border-bottom: none; }
ul.perfil-elegir label {
  display: flex; align-items: center; gap: 11px; padding: 9px 16px; cursor: pointer; font-size: 14px;
}
ul.perfil-elegir label:hover { background: #f8fafc; }
ul.perfil-elegir input[type=checkbox] { width: auto; flex: none; }
ul.perfil-elegir .mut { color: var(--muted); font-size: 12.5px; }

/* Lo que queda, dicho en castellano */
.perm-resumen {
  margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: #f8fafc; font-size: 13px;
}
.perm-resumen ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.perm-resumen li { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.perm-resumen li .mut { color: var(--muted); font-size: 12.5px; }
.perm-resumen p.mut { margin: 10px 0 0; font-size: 12px; }

/* ---------- Historial del miembro ---------- */
ul.historial { list-style: none; padding: 6px 0; margin: 0; }
ul.historial li {
  display: flex; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
ul.historial li:last-child { border-bottom: none; }
ul.historial li.auto { border-left-color: #cbd5e1; }
ul.historial li.manual { border-left-color: var(--marca-oro); }
ul.historial .hf {
  flex: 0 0 92px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px;
}
ul.historial .hc { flex: 1; min-width: 0; }
ul.historial .hd { margin-top: 5px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
ul.historial .hm { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 700px) {
  ul.historial li { flex-direction: column; gap: 4px; }
  ul.historial .hf { flex: none; }
}

/* ---------- Cumplimiento y directivas del cuerpo ---------- */
ul.cumplimiento { list-style: none; padding: 8px 0; margin: 0; }
ul.cumplimiento li { display: flex; gap: 12px; padding: 9px 18px; align-items: flex-start; }
ul.cumplimiento .mk {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
ul.cumplimiento li.ok .mk { background: #dcfce7; color: #166534; }
ul.cumplimiento li.falta .mk { background: #fee2e2; color: #991b1b; }
ul.cumplimiento b { display: block; font-size: 13.5px; }
ul.cumplimiento span { font-size: 12.5px; color: var(--muted); }

ul.directivas { list-style: none; padding: 6px 0; margin: 0; }
ul.directivas li {
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent; cursor: pointer;
}
ul.directivas li:last-child { border-bottom: none; }
ul.directivas li:hover { background: #f8fafc; }
ul.directivas li.vigente { border-left-color: var(--marca-oro); background: #fffdf5; }
ul.directivas .dp { display: flex; align-items: center; gap: 10px; }
ul.directivas .dp b { font-size: 14.5px; color: var(--marca-azul); }
ul.directivas .df { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
ul.directivas .dc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; }
ul.directivas .cargo { font-size: 13px; }
ul.directivas .cargo i { font-style: normal; color: var(--muted); }

/* Campo de persona: se busca en el registro o se escribe a mano */
.persona-estado { display: inline-block; margin-top: 4px; font-size: 12px; }
.persona-estado.enlazado { color: #166534; }
.persona-estado.libre { color: var(--muted); }
.persona-chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #eef2ff; color: var(--marca-azul); font-size: 12.5px; font-weight: 600;
}

/* Campos que se calculan solos */
.fld.calculado input, .fld.calculado textarea, .fld.calculado select {
  background: #f1f5f9; color: #334155; font-weight: 700; cursor: not-allowed;
}
.fld.calculado > label::after {
  content: ' (automático)'; font-weight: 500; font-size: 11.5px; color: var(--muted);
}

/* Edad calculada junto a la fecha de nacimiento */
.edad-chip {
  display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
  background: #eef2ff; color: var(--marca-azul); font-size: 12.5px; font-weight: 600;
}

/* Detalle del archivo subido (tamaño, reducción aplicada) */
.filefld .fmeta { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Documentos adjuntos de un miembro */
ul.documentos { list-style: none; padding: 6px 0; margin: 0; }
ul.documentos li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); cursor: pointer;
}
ul.documentos li:last-child { border-bottom: none; }
ul.documentos li:hover { background: #f8fafc; }
ul.documentos .dm { flex: 0 0 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
ul.documentos .dm img {
  width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border);
}
ul.documentos .dico { font-size: 26px; }
ul.documentos .dd { flex: 1; min-width: 0; }
ul.documentos .dd b { font-size: 14.5px; color: var(--marca-azul); margin-right: 8px; }
ul.documentos .dfe { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
ul.documentos .da { flex: 0 0 auto; }

/* Acciones sobre cada registro del historial */
ul.historial li .ha { flex: 0 0 auto; display: flex; gap: 4px; opacity: 0.35; transition: opacity 0.15s; }
ul.historial li:hover .ha, ul.historial li:focus-within .ha { opacity: 1; }
ul.historial li .ha .ico {
  border: none; background: none; cursor: pointer; font-size: 15px;
  padding: 5px 7px; border-radius: 7px; line-height: 1;
}
ul.historial li .ha .ico:hover { background: #e2e8f0; }
@media (max-width: 720px) { ul.historial li .ha { opacity: 1; } }
@media (max-width: 700px) { ul.historial li .ha { align-self: flex-end; margin-top: -6px; } }

.aviso-auto {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 12px; border-radius: 9px; font-size: 13px; margin-bottom: 14px;
}
/* ---------- Editor de fotos: recortar, girar, brillo y contraste ---------- */
/* El marco es lo que va a quedar guardado: cuadrado, como se muestran las
   fotos en las fichas, en los cumpleaños y en las credenciales. */
.ef-marco {
  width: 320px; max-width: 100%; margin: 0 auto 10px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #0f172a;
}
.ef-marco canvas { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; }
.ef-marco canvas:active { cursor: grabbing; }
.ef-ayuda { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0 0 14px; line-height: 1.45; }
.ef-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.ef-barra span { flex: 0 0 78px; color: #475569; font-weight: 600; }
.ef-barra input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.ef-botones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

.modal-nota { margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.modal-nota a { color: var(--marca-azul); }

/* Próximos cumpleaños en el panel de control */
.card.cumples { margin-bottom: 0; }
ul.cumple-list { list-style: none; padding: 2px 0; margin: 0; }
ul.cumple-list li {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 16px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
}
ul.cumple-list li:last-child { border-bottom: none; }
ul.cumple-list li:hover { background: #f8fafc; }
ul.cumple-list li.hoy { background: #fffdf5; border-left: 3px solid var(--marca-oro); }
ul.cumple-list .av {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--marca-azul); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px;
}
ul.cumple-list .av img { width: 100%; height: 100%; object-fit: cover; }
ul.cumple-list .dt { flex: 1; min-width: 0; }
ul.cumple-list .dt b { display: block; font-size: 13.5px; color: var(--marca-azul); line-height: 1.3; }
ul.cumple-list .dt .mut { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  ul.cumple-list li { gap: 9px; padding: 7px 12px; flex-wrap: wrap; }
  ul.cumple-list .av { flex-basis: 30px; width: 30px; height: 30px; font-size: 12.5px; }
  ul.cumple-list .dt b { font-size: 13px; }
  ul.cumple-list .badge { font-size: 10.5px; }
}

/* ---------- La gente de un cuerpo, en su ficha ---------- */
ul.integrantes { list-style: none; padding: 2px 0; margin: 0; }
ul.integrantes li {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid #f1f5f9;
}
ul.integrantes li:last-child { border-bottom: none; }
ul.integrantes li:hover { background: #f8fafc; }
/* A quien se le venció la prueba se le nota sin tener que buscarlo */
ul.integrantes li.vencida { background: #fffbeb; border-left: 3px solid var(--marca-oro); }
ul.integrantes .av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--marca-azul); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13.5px;
}
ul.integrantes .av img { width: 100%; height: 100%; object-fit: cover; }
ul.integrantes .dt { flex: 1 1 200px; min-width: 0; }
ul.integrantes .dt b { display: block; font-size: 14px; color: var(--marca-azul); line-height: 1.3; }
ul.integrantes .dt .mut { font-size: 12px; color: var(--muted); }
ul.integrantes .marcas { display: flex; gap: 5px; flex-wrap: wrap; }
ul.integrantes .acciones { display: flex; gap: 5px; }

/* ---------- La planilla de cuotas: un mes por columna ---------- */
table.grid.cuotas th.mes, table.grid.cuotas td.mes {
  text-align: center; width: 1%; white-space: nowrap; padding-left: 6px; padding-right: 6px;
}
table.grid.cuotas td.quien { white-space: nowrap; }
table.grid.cuotas td.quien .badge { margin-left: 7px; }
table.grid.cuotas tr { cursor: default; }
table.grid.cuotas td.pagado { color: var(--success); font-weight: 700; background: #f0fdf4; }
table.grid.cuotas td.debe { background: #fff; }
table.grid.cuotas td.exento { color: #cbd5e1; }
/* La casilla que se puede marcar se ofrece: cambia al pasar por encima */
table.grid.cuotas td.debe.se-puede { cursor: pointer; }
table.grid.cuotas td.debe.se-puede:hover { background: #dbeafe; }
table.grid.cuotas td.debe.se-puede:hover::after { content: "✓"; color: var(--accent); font-weight: 700; }

/* Saldos por cuenta en el listado de Tesorería */
.saldos-cuentas { grid-column: 1 / -1; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.saldos-cuentas .sc-tit { font-size: 13px; font-weight: 700; color: var(--marca-azul); margin-bottom: 6px; }
.saldos-cuentas .sc-tit .mut { font-weight: 500; color: var(--muted); font-size: 12px; }
.saldos-cuentas ul { list-style: none; margin: 0; padding: 0; }
.saldos-cuentas li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px;
}
.saldos-cuentas li:last-child { border-bottom: none; }
.saldos-cuentas li:hover .sc-n { color: var(--marca-azul); }
.saldos-cuentas .sc-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.saldos-cuentas b { font-variant-numeric: tabular-nums; }
.saldo-negativo { color: var(--danger); }
/* Los últimos movimientos de un cuerpo, al pie de su tesorería.
   Nunca tuvo estilo propio y salía como una lista con viñetas, con el texto
   pegado al borde de la tarjeta: se vio al llevar el panel a una pestaña y
   mirarlo en un teléfono. Va como las demás listas de la ficha —el monto a la
   derecha, y si no cabe en una línea baja a la siguiente en vez de estirar la
   tarjeta—. */
ul.mov-list { list-style: none; padding: 6px 6px 10px; margin: 0; }
ul.mov-list li {
  display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap;
  padding: 9px 12px; font-size: 13px; border-radius: 8px; cursor: pointer;
}
ul.mov-list li:hover { background: #f8fafc; }
ul.mov-list li > span:first-child { min-width: 0; }
ul.mov-list .monto-ingreso { color: #166534; font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.mov-list .monto-egreso { color: var(--danger); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Saldo de la cuenta de origen al traspasar */
.saldo-origen { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.saldo-origen b { color: var(--marca-azul); }
.saldo-origen b.saldo-negativo { color: var(--danger); }

/* Cómo se le trata a la persona, junto al título de su ficha */
.trato-chip {
  display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px;
  background: #eef2ff; color: var(--marca-azul); font-size: 13.5px; font-weight: 600;
  vertical-align: middle;
}

/* Selector con buscador (para listas largas: miembros, cuentas…) */
.refbuscar { position: relative; }
.refbuscar .rb-txt { width: 100%; padding-right: 34px; }
.refbuscar .rb-x {
  position: absolute; top: 7px; right: 8px; border: none; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--muted); padding: 2px 6px; border-radius: 6px;
}
.refbuscar .rb-x:hover { background: #e2e8f0; color: var(--danger); }
.refbuscar .rb-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px);
  list-style: none; margin: 0; padding: 4px; max-height: 268px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.refbuscar .rb-lista li {
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.refbuscar .rb-lista li:hover, .refbuscar .rb-lista li.marcado { background: #eef2ff; }
.refbuscar .rb-lista li.rb-vacio { color: var(--muted); cursor: default; }
.refbuscar .rb-lista li.rb-vacio:hover { background: none; }
.refbuscar .rb-det { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Pasar lista */
/* ---------------- Asistencia ----------------
   Todo lo de asistencia en una sola pantalla, y pensada para el teléfono:
   objetivos grandes, barra de acciones siempre a la vista y todo legible a
   un brazo de distancia. */

/* Pestañas Registrar / Informes */
.tabs { display: inline-flex; gap: 4px; margin-bottom: 14px; background: #e8edf7; border-radius: 10px; padding: 3px; }
.tabs button {
  border: none; background: transparent; color: #475569;
  padding: 7px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; min-height: 34px;
}
.tabs button:hover { color: var(--marca-azul); }
.tabs button.on { background: #fff; color: var(--marca-azul); box-shadow: 0 1px 2px rgba(15,23,42,.12); }

/* Cuando la actividad convoca a varios cuerpos y a esta persona le toca uno */
.pl-solo-suyos {
  display: inline-block; margin-top: 4px; font-size: 12px; color: var(--marca-oro-oscuro);
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 10px;
}

.asis-filtros select { flex: 1 1 160px; min-width: 0; }
.vista-toggle { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.vista-toggle button {
  border: none; background: #fff; cursor: pointer; padding: 8px 13px; font-size: 15px;
  min-height: 40px; font-family: inherit;
}
.vista-toggle button.on { background: var(--marca-azul); color: #fff; }

/* Calendario del mes */
.cal { padding: 6px 14px 14px; max-width: 560px; }
/* En pantalla ancha, el mes a la izquierda y el día elegido a su lado: se ve
   el calendario y la lista de una vez, sin desplazarse. */
@media (min-width: 1100px) {
  .asis-tablero {
    display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 0; align-items: stretch;
  }
  .asis-tablero .cal { max-width: none; border-right: 1px solid var(--border); }
  .asis-tablero #asisDelDia .card {
    margin-top: 0 !important; border: 0; box-shadow: none; border-radius: 0; height: 100%;
  }
}
.cal-cab { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0 10px; }
.cal-cab b { font-size: 15px; color: var(--marca-azul); min-width: 150px; text-align: center; }
.cal-cab button {
  border: 1px solid var(--border); background: #fff; cursor: pointer; width: 34px; height: 34px;
  border-radius: 9px; font-size: 18px; line-height: 1; color: var(--marca-azul); font-family: inherit;
}
.cal-cab button:hover { background: #f1f5f9; }
.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0 6px; letter-spacing: 0.3px; }
.cal-vacio { height: 38px; }
.cal-dia {
  position: relative; height: 38px; border: 1px solid transparent; background: transparent;
  border-radius: 9px; cursor: pointer; font-size: 13.5px; color: #334155; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.cal-dia:hover { background: #f1f5f9; }
.cal-dia.hoy { border-color: var(--marca-azul); font-weight: 700; }
.cal-dia.sel { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; font-weight: 700; }
.cal-dia .pt { position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--marca-azul); }
.cal-dia .pt.ok { background: #16a34a; }
.cal-dia .pt.medio { background: #d97706; }
.cal-dia .pt.falta { background: var(--danger); }
.cal-dia.sel .pt { background: #fff; }

/* Actividades del día elegido */
ul.asis-actividades { list-style: none; margin: 0; padding: 0; }
ul.asis-actividades li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--border); cursor: pointer;
  border-left: 3px solid transparent;
}
ul.asis-actividades li:last-child { border-bottom: none; }
ul.asis-actividades li:hover { background: #f8fafc; }
ul.asis-actividades li.on { border-left-color: var(--marca-azul); background: #eff6ff; }
.aa-datos { flex: 1 1 220px; min-width: 0; }
.aa-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aa-tit .mut { font-size: 12.5px; color: var(--muted); }
.aa-cuerpos { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.aa-avance { display: flex; align-items: center; gap: 10px; }
.aa-avance b { font-size: 14px; color: var(--marca-azul); font-variant-numeric: tabular-nums; }
.aa-acc { display: flex; gap: 4px; }
.aa-acc .ico { border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 8px; border-radius: 8px; }
.aa-acc .ico:hover { background: #e2e8f0; }

/* Elegir cuerpos al crear una actividad */
.chips-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-elegir .chip {
  border: 1px solid var(--border); background: #fff; color: #475569; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit;
}
.chips-elegir .chip.on { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; }
.modal-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Elegir la actividad en la vista de lista */
ul.pl-actividades { list-style: none; margin: 0; padding: 0; }
ul.pl-actividades li {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer;
}
ul.pl-actividades li:last-child { border-bottom: none; }
ul.pl-actividades li:hover { background: #f8fafc; }
.pa-dia { min-width: 190px; }
.pa-dia b { display: block; font-size: 14px; color: var(--marca-azul); }
.pa-dia span { font-size: 12px; color: var(--muted); }
.pa-que { flex: 1 1 220px; min-width: 0; }
.pa-que b { display: block; font-size: 14.5px; }
.pa-que span { font-size: 12.5px; color: var(--muted); }
.pa-barra { margin-top: 7px; height: 8px; border-radius: 5px; background: #e2e8f0; overflow: hidden; }
.pa-barra span { display: block; height: 100%; background: var(--marca-azul); transition: width 0.2s; }
.pa-estado { text-align: right; }
.pa-estado .mut { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Buscador, filtros y avance de la lista */
.pl-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.pl-cab .pl-que { flex: 1 1 240px; }
.pl-cab .pl-que b { font-size: 15px; color: var(--marca-azul); display: block; }
.pl-cab .pl-que b .mut { font-weight: 500; font-size: 13px; color: var(--muted); }
.pl-cab .pl-que span { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.pl-recuperado {
  margin: 0; padding: 10px 18px; background: #fffbeb; border-bottom: 1px solid #fde68a;
  color: #92400e; font-size: 13px;
}
.pl-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 18px 10px; }
.pl-filtros input[type="search"] {
  flex: 1 1 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 14px; font-family: inherit;
}
/* Elegir un cuerpo: en el teléfono ocupa la línea entera, para poder tocarlo */
#plCuerpo {
  flex: 1 1 220px; min-width: 0; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 14px; font-family: inherit; background: #fff; color: inherit;
}
.pl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-chips .chip {
  border: 1px solid var(--border); background: #fff; color: #475569; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: inherit;
}
.pl-chips .chip.verde { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.pl-chips .chip.roja { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.pl-chips .chip.ambar { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.pl-chips .chip.on { background: #0f172a; border-color: #0f172a; color: #fff; }
.pl-chips .chip:disabled { opacity: 0.5; cursor: default; }
.pl-avance { padding: 4px 18px 12px; }
.pl-avance-tit { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.pl-avance-tit b { color: var(--marca-azul); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pl-sinresultados { padding: 24px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* La lista */
ul.pasar-lista { list-style: none; margin: 0; padding: 0; }
ul.pasar-lista li {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
ul.pasar-lista li[hidden] { display: none; }
ul.pasar-lista li:last-child { border-bottom: none; }
ul.pasar-lista li.marcado { border-left-color: var(--marca-oro); background: #fffdf8; }
ul.pasar-lista .pl-quien { flex: 1 1 240px; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
ul.pasar-lista .pl-quien b { font-size: 14.5px; color: var(--marca-azul); }
ul.pasar-lista .pl-quien .mut { font-size: 12px; color: var(--muted); }
.pl-cuerpo-chip {
  padding: 2px 9px; border-radius: 999px; background: #f1f5f9; color: var(--marca-azul);
  font-size: 11.5px; font-weight: 600;
}
ul.pasar-lista .pl-botones { display: flex; gap: 6px; }
ul.pasar-lista .pl-b {
  border: 1px solid var(--border); background: #fff; color: #475569; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit;
  min-height: 40px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
ul.pasar-lista .pl-b.presente { background: #f0fdf4; border-color: #dcfce7; color: #15803d; }
ul.pasar-lista .pl-b.ausente { background: #fef2f2; border-color: #fee2e2; color: #b91c1c; }
ul.pasar-lista .pl-b.justificado { background: #fffbeb; border-color: #fef3c7; color: #b45309; }
ul.pasar-lista .pl-b.presente.on { background: #16a34a; border-color: #16a34a; color: #fff; }
ul.pasar-lista .pl-b.ausente.on { background: var(--danger); border-color: var(--danger); color: #fff; }
ul.pasar-lista .pl-b.justificado.on { background: #d97706; border-color: #d97706; color: #fff; }
ul.pasar-lista .pl-b:disabled { opacity: 0.55; cursor: default; }
ul.pasar-lista .pl-just { display: flex; gap: 8px; flex: 1 1 320px; }
ul.pasar-lista .pl-just[hidden] { display: none; }
ul.pasar-lista .pl-just select, ul.pasar-lista .pl-just input { padding: 9px 10px; font-size: 13px; }
ul.pasar-lista .pl-just input { flex: 1; }

/* Barra de acciones: siempre a la vista, aunque la lista sea larga */
.pl-barra {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: #fff; border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.06);
}
.pl-resumen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pl-estado { flex: 1; font-size: 12.5px; color: var(--muted); text-align: right; }
.pl-estado .aviso-texto { color: #b45309; font-weight: 600; }
.pl-estado .ok-texto { color: #16a34a; font-weight: 600; }
.pl-barra .btn { min-height: 44px; }

@media (max-width: 700px) {
  .tabs button { padding: 12px 8px; font-size: 13.5px; }
  .cal { padding: 4px 8px 12px; }
  .cal-grilla { gap: 2px; }
  .cal-dia, .cal-vacio { height: 42px; }
  .cal-cab b { min-width: 130px; font-size: 15px; }
  ul.asis-actividades li { padding: 12px 14px; gap: 10px; }
  .aa-datos { flex: 1 1 100%; }
  .aa-avance { flex: 1 1 auto; }
  ul.pl-actividades li { gap: 10px; padding: 13px 14px; }
  .pa-dia { min-width: 0; flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; }
  .pa-estado { flex: 0 0 auto; text-align: right; }
  .pl-cab, .pl-filtros, .pl-avance { padding-left: 14px; padding-right: 14px; }
  .pl-cab .btn { width: 100%; min-height: 44px; }
  /* Los cinco filtros se ven de una vez, en dos líneas: nada de deslizar
     para descubrir que hay más */
  .pl-chips { width: 100%; flex-wrap: wrap; }
  .pl-chips .chip { flex: 1 1 auto; min-height: 40px; }
  .pl-chips::-webkit-scrollbar { display: none; }
  .pl-chips .chip { white-space: nowrap; }
  ul.pasar-lista li { gap: 8px; padding: 12px 14px; }
  ul.pasar-lista .pl-quien { flex: 1 1 100%; }
  ul.pasar-lista .pl-botones { width: 100%; gap: 8px; }
  ul.pasar-lista .pl-b { flex: 1; padding: 10px 2px; min-height: 46px; font-size: 12.5px; }
  ul.pasar-lista .pl-just { flex-basis: 100%; flex-wrap: wrap; }
  ul.pasar-lista .pl-just select, ul.pasar-lista .pl-just input { flex: 1 1 100%; min-height: 44px; }
  .pl-barra { padding: 10px 14px; gap: 8px; }
  .pl-resumen {
    flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .pl-resumen::-webkit-scrollbar { display: none; }
  .pl-resumen .badge { white-space: nowrap; }
  .pl-estado { flex: 1 1 100%; text-align: left; order: 3; }
  .pl-barra .btn { flex: 1 1 100%; }
  .modal-fila { grid-template-columns: 1fr; }
}

/* Informes de asistencia */
.informe-stats { margin-bottom: 18px; }
.informe-tit { margin: 0 0 14px; font-size: 17px; color: var(--marca-azul); }
.informe-tit .mut { font-weight: 500; font-size: 13px; color: var(--muted); margin-left: 8px; }
table.grid.informe th, table.grid.informe td { font-size: 13px; white-space: nowrap; }
table.grid.informe td:first-child { white-space: normal; }
.barra { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #e2e8f0; }
.barra span { display: block; height: 100%; }
.barra .p { background: #16a34a; }
.barra .j { background: var(--marca-azul); }
.barra .a { background: var(--danger); }
.informe-pie { padding: 4px 2px 18px; font-size: 12px; }
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .page-head .actions, #infFiltros, .no-print { display: none !important; }
  .print-only { display: flex; }
  .informe-hoja { padding: 0; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #d7dbe3; }
}

/* Cuerpos asignados, junto a la iglesia, en la barra superior */
.iglesia-local .cuerpos-chip {
  margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: #eef2ff;
  color: var(--marca-azul); font-size: 12px; font-weight: 600;
}
@media (max-width: 700px) { .iglesia-local .cuerpos-chip { display: none; } }

/* Cotejo del RUT entre la ficha de pastor y la de miembro */
table.rut-cotejo { margin-top: 10px; border-collapse: collapse; font-size: 13px; }
table.rut-cotejo td { padding: 4px 16px 4px 0; color: var(--muted); }
table.rut-cotejo td b { color: var(--marca-azul); font-variant-numeric: tabular-nums; }

/* Mi perfil: lo que decide la iglesia, para verlo sin poder cambiarlo */
.perfil-fijos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 18px; padding: 16px 18px;
}
.perfil-fijos .mut { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.perfil-fijos b { font-size: 14px; color: var(--marca-azul); }

/* Enlaces discretos: "¿Olvidó su contraseña?", "Salir" */
.enlace-suave {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; font-family: inherit; padding: 6px; text-decoration: underline;
}
.enlace-suave:hover { color: var(--marca-azul); }
a.who { text-decoration: none; color: inherit; }
a.who:hover { opacity: 0.85; }

/* Contraseña provisoria de un usuario recién designado */
.clave-provisoria {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px; padding: 12px 16px;
  background: #f8fafc; border: 1px dashed var(--border); border-radius: 10px;
}
.clave-provisoria .mut { display: block; font-size: 12px; color: var(--muted); }
.clave-provisoria b { font-size: 16px; letter-spacing: 0.5px; color: var(--marca-azul); font-variant-numeric: tabular-nums; }

/* Toast */
#toast {
  position: fixed; bottom: 24px; right: 24px; background: #0f172a; color: #fff;
  padding: 12px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(10px); transition: all 0.25s; pointer-events: none; z-index: 100;
}
#toast.show { opacity: 1; transform: translateY(0); }
#toast.err { background: var(--danger); }

/* Respaldo del sistema, al pie de la configuración */
.respaldo { padding: 16px 20px 20px; }
.respaldo p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
.respaldo-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px;
  margin-bottom: 14px;
}
.respaldo-datos > div {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.respaldo-datos .mut { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.respaldo-datos b { font-size: 14px; word-break: break-word; }
.respaldo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }

/* La lista de copias automáticas guardadas */
.respaldo-copias { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.respaldo-copias li {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.respaldo-copias li > span:first-child { font-variant-numeric: tabular-nums; min-width: 92px; }
.respaldo-copias li .mut { flex: 1; font-size: 12.5px; }
.respaldo-copias li a { font-size: 12.5px; white-space: nowrap; }

/* Un botón-enlace que por ahora no lleva a nada (listado vacío) */
.btn.deshabilitado { opacity: .45; pointer-events: none; }

/* Un número que no cabe donde va */
input.fuera-de-rango { border-color: var(--danger); background: #fff5f5; }
.aviso-numero { display: block; margin-top: 4px; font-size: 12px; color: var(--danger); line-height: 1.4; }

/* Aviso de que el listado viene recortado desde «Datos por completar» */
.aviso-filtro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 9px 16px; font-size: 13px;
  background: #fffbeb; border-bottom: 1px solid var(--border); color: #92400e;
}

/* Datos por completar, en el panel */
.pendientes { margin-top: 18px; }
.pendientes h3 { margin: 0; padding: 14px 18px 0; font-size: 15px; }
.pendientes > p { margin: 6px 18px 12px; font-size: 13px; line-height: 1.5; }
.pendientes .mini-list li { align-items: flex-start; cursor: pointer; }
.pendientes .mini-list li .mut { font-size: 12px; line-height: 1.45; }
.pendientes .aviso-fuerte {
  margin: 0 18px 12px; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.5;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}
.pendientes .aviso-fuerte a { margin-left: 6px; white-space: nowrap; }

/* La cinta que aparece cuando se cae la señal. Va sobre todo lo demás porque
   explica por qué el resto de la pantalla se está portando raro. */
.sin-senal {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 9px 14px;
  background: #7a2e12;
  color: #fff;
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.sin-senal b { font-weight: 700; }
@media print { .sin-senal { display: none; } }