/* =========================================================
   Diseño A — colores y medidas en un solo lugar
   ========================================================= */
:root {
    --azul-oscuro: #152A5C;   /* menú lateral y panel de acceso */
    --azul-oscuro-2: #1D3672;
    --azul: #2457C5;          /* botón principal */
    --azul-hover: #1C47A6;
    --fondo: #EEF1F6;
    --tarjeta: #FFFFFF;
    --borde: #E1E5EC;
    --texto: #1B2333;
    --texto-suave: #5B6475;
    --error-fondo: #FDECEC;
    --error-texto: #A61B1B;
    --info-fondo: #EAF1FD;
    --info-texto: #1C3F8C;
    --radio: 16px;
    --radio-chico: 10px;
    --fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--fuente);
    font-size: 16px;
    color: var(--texto);
    background: var(--fondo);
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1:focus, h2:focus { outline: none; }  /* Blazor enfoca el título al navegar */
button { font-family: inherit; }

/* ---------- Piezas comunes ---------- */
.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 1px 2px rgba(21, 42, 92, 0.04), 0 8px 24px rgba(21, 42, 92, 0.06);
}

.texto-suave { color: var(--texto-suave); }

.etiqueta {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 18px 0 6px;
}

.campo {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font: inherit;
    color: var(--texto);
    background: #fff;
    border: 1px solid #CDD3DE;
    border-radius: var(--radio-chico);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.campo:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.18);
}

.campo-con-boton { position: relative; }
.campo-con-boton .campo { padding-right: 88px; }
.campo-con-boton .boton-texto {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.boton-primario, .boton-secundario {
    height: 46px;
    padding: 0 22px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radio-chico);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.boton-primario {
    color: #fff;
    background: var(--azul);
    border: 1px solid var(--azul);
}
.boton-primario:hover:not(:disabled) { background: var(--azul-hover); }
.boton-primario:disabled { opacity: .7; cursor: default; }
.boton-secundario {
    color: var(--texto);
    background: #fff;
    border: 1px solid #CDD3DE;
}
.boton-secundario:hover { border-color: var(--azul); }
.boton-ancho { width: 100%; margin-top: 22px; }

.boton-texto, .enlace {
    background: none;
    border: none;
    padding: 6px 8px;
    color: var(--azul);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}
.enlace { padding: 0; font-weight: 500; }
.boton-texto:hover, .enlace:hover { text-decoration: underline; }

.aviso {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radio-chico);
    font-size: 0.92rem;
    line-height: 1.4;
}
.aviso-error { background: var(--error-fondo); color: var(--error-texto); }
.aviso-info { background: var(--info-fondo); color: var(--info-texto); }

.casilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    cursor: pointer;
}
.casilla input { width: 17px; height: 17px; accent-color: var(--azul); }

/* Botones Español / English */
.selector-idioma {
    display: inline-flex;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 999px;
}
.selector-idioma button {
    border: none;
    background: none;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-suave);
    border-radius: 999px;
    cursor: pointer;
}
.selector-idioma button.activo { background: var(--azul-oscuro); color: #fff; }

/* =========================================================
   Pantalla de acceso
   ========================================================= */
.acceso {
    display: grid;
    grid-template-columns: minmax(320px, 44%) 1fr;
    min-height: 100vh;
}

.acceso-marca {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 56px 28px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(255,255,255,0.08), transparent 45%),
        linear-gradient(160deg, var(--azul-oscuro-2), var(--azul-oscuro));
}
.acceso-marca-contenido { margin: auto 0; max-width: 440px; }

.logo-circulo {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 26px;
}

.marca-nombre { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.01em; }
.marca-lema { margin: 10px 0 30px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.82); }

.marca-puntos { list-style: none; margin: 0; padding: 0; }
.marca-puntos li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.45;
}
.marca-puntos li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8FB0F5;
}

.acceso-pie { margin: 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

.acceso-lado-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 40px 24px;
}
.acceso-lado-form .selector-idioma { align-self: flex-end; margin-right: max(0px, calc((100% - 440px) / 2)); }

.acceso-tarjeta { width: 100%; max-width: 440px; padding: 36px 34px 32px; position: relative; overflow: hidden; }
.acceso-tarjeta h2 { font-size: 1.6rem; font-weight: 700; }
.acceso-tarjeta .texto-suave { margin: 8px 0 6px; }

.fila-opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

/* Celular: el panel azul se hace una franja arriba */
@media (max-width: 800px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso-marca { padding: 28px 20px; }
    .acceso-marca-contenido { margin: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .logo-circulo { width: 56px; height: 56px; margin: 0; }
    .marca-nombre { font-size: 1.6rem; }
    .marca-lema { margin: 4px 0 0; font-size: 0.95rem; flex-basis: 100%; }
    .marca-puntos, .acceso-pie { display: none; }
    .acceso-lado-form { justify-content: flex-start; padding: 20px 16px 40px; }
    .acceso-lado-form .selector-idioma { margin-right: 0; }
    .acceso-tarjeta { padding: 26px 20px; }
}

/* =========================================================
   Marco principal: menú lateral + barra superior
   ========================================================= */
:root { --ancho-lateral: 100px; }

a.boton-primario, a.boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.boton-secundario { display: inline-flex; align-items: center; gap: 8px; }
.icono { flex-shrink: 0; }
/* El grosor de línea es el mismo sin importar el tamaño del ícono */
.icono path, .icono circle, .icono ellipse, .icono rect { vector-effect: non-scaling-stroke; }

.app {
    display: grid;
    grid-template-columns: var(--ancho-lateral) 1fr;
    min-height: 100vh;
}

/* ---------- Lateral (íconos grandes, texto abajo) ---------- */
.lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--azul-oscuro);
    color: #fff;
    padding: 16px 8px;
    z-index: 60;
}
.lateral-marca {
    display: flex;
    justify-content: center;
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lateral-logo {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
}
.lateral-logo-img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
    padding: 4px;
}
.lateral-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-separador { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 6px 12px; }

.nav-celda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 2px;
    border: none;
    border-radius: 12px;
    background: none;
    color: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.nav-celda:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-celda.active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; }
.nav-celda.abierto { background: #fff; color: var(--azul-oscuro); }
.nav-celda.deshabilitado { color: rgba(255, 255, 255, 0.38); cursor: default; }
.nav-celda.deshabilitado:hover { background: none; }

/* Panel del engranaje */
.nav-con-panel { position: relative; }
.panel-config {
    position: absolute;
    left: calc(100% + 14px);
    bottom: 0;                       /* abre HACIA ARRIBA desde el engranaje */
    width: 310px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(21, 42, 92, 0.2);
    z-index: 70;
}
.panel-config-titulo {
    padding: 8px 10px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.panel-opcion {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 10px;
    color: var(--azul-oscuro);
    text-decoration: none;
}
.panel-opcion:hover { background: var(--info-fondo); }
button.panel-opcion { width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
button.panel-opcion:hover { background: var(--info-fondo); }
.panel-opcion.deshabilitado { opacity: 0.45; cursor: default; }
.panel-opcion.deshabilitado:hover { background: none; }
.panel-opcion b { display: block; font-size: 0.92rem; color: var(--texto); }
.panel-opcion small { font-size: 0.8rem; color: var(--texto-suave); }
.capa-cerrar { position: fixed; inset: 0; z-index: 50; }

/* ---------- Barra superior ---------- */
.principal { display: flex; flex-direction: column; min-width: 0; }
.barra {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1px solid var(--borde);
}
.barra-buscar {
    flex: 1;
    max-width: 560px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: var(--fondo);
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    color: var(--texto-suave);
}
.barra-buscar:focus-within { background: #fff; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.18); }
.barra-buscar input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--texto);
}
.barra-registrar { white-space: nowrap; }
/* Nombre de la parroquia, centrado entre el buscador y el usuario */
.barra-parroquia {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--azul-oscuro);
    font-size: 1.5rem;
    font-weight: 700;
}
.barra-parroquia span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra-derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pildora-usuario {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--info-fondo);
    color: var(--info-texto);
    font-size: 0.88rem;
    white-space: nowrap;
}
/* Usuario que inició sesión: círculo con iniciales + nombre */
.usuario-actual { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul-oscuro);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
}
.usuario-textos { display: flex; flex-direction: column; line-height: 1.2; }
.usuario-textos small { font-size: 0.8rem; color: var(--texto-suave); }
.usuario-textos strong { font-size: 1.08rem; font-weight: 700; color: var(--texto); white-space: nowrap; }

.boton-salir { height: 40px; padding: 0 14px; font-size: 0.92rem; }

/* Franjas de aviso (suscripción, inactividad) */
.franja {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 28px;
    font-size: 0.92rem;
    font-weight: 500;
}
.franja-alerta { background: #FFF4DB; color: #7A4B00; border-bottom: 1px solid #F3DFA8; }
.franja .boton-texto { color: #7A4B00; text-decoration: underline; }

/* ---------- Contenido ---------- */
.contenido { padding: 16px 28px 28px; max-width: 1280px; width: 100%; }
.titulo-pagina { font-size: 1.7rem; font-weight: 700; }
.subtitulo-pagina { margin: 6px 0 22px; }

.rejilla-acciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.accion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.accion:hover { border-color: var(--azul); transform: translateY(-2px); }
.accion-icono {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--info-fondo);
    color: var(--azul);
    margin-bottom: 6px;
}
.accion-titulo { font-weight: 600; font-size: 1.05rem; }

.seccion { padding: 22px 24px; }
.seccion h2 { font-size: 1.15rem; margin-bottom: 6px; }
.construccion { margin-top: 18px; display: grid; gap: 10px; justify-items: start; }

/* ---------- Pantallas medianas: se esconden textos largos ---------- */

/* =========================================================
   Libro (Bautismos y los demás): encabezado, filtros, lista y ficha
   ========================================================= */
.libro-encabezado { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.libro-icono {
    width: 48px; height: 48px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 16px; background: var(--info-fondo); color: var(--azul);
}
.libro-registrar { margin-left: auto; }
/* El bloque del título ocupa el espacio que queda: un subtítulo largo pasa a
   2 líneas al lado del ícono, sin bajar el título. */
.libro-encabezado > div { flex: 1 1 0; min-width: 0; }

.filtros {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 16px 18px; margin-bottom: 16px;
}
.filtro { display: flex; flex-direction: column; flex: 1 1 170px; min-width: 150px; }
.filtro-grande { flex: 2 1 260px; }
.etiqueta-chica { font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 6px; }
.filtro-botones { display: flex; gap: 8px; }

.lista-y-ficha { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.lista { overflow: hidden; }
.lista-titulo { padding: 14px 18px; font-weight: 600; border-bottom: 1px solid var(--borde); }
.lista-vacia, .lista-pie { padding: 18px; margin: 0; color: var(--texto-suave); }
.lista-pie { font-size: 0.88rem; border-top: 1px solid var(--borde); }

.tabla { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabla th {
    text-align: left; padding: 11px 14px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--texto-suave); background: #F7F9FC; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 11px 14px; border-bottom: 1px solid #EEF1F6; vertical-align: top; }
.tabla td small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--texto-suave); }
.tabla .centro { text-align: center; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: #F5F8FE; }
.tabla tbody tr:focus { outline: 2px solid var(--azul); outline-offset: -2px; }
.tabla tbody tr.seleccionada td { background: var(--info-fondo); }
.tabla tbody tr.seleccionada td:first-child { box-shadow: inset 3px 0 0 var(--azul); }

.ficha { padding: 22px 24px; position: sticky; top: 96px; }
.ficha h2 { font-size: 1.35rem; }
.ficha-ubicacion { margin: 4px 0 16px; color: var(--azul); font-weight: 600; font-size: 0.92rem; }
.ficha-datos { display: grid; grid-template-columns: 110px 1fr; gap: 9px 12px; margin: 0 0 20px; font-size: 0.94rem; }
.ficha-datos dt { color: var(--texto-suave); }
.ficha-datos dd { margin: 0; font-weight: 500; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acciones button:disabled { opacity: 0.55; cursor: default; }
.boton-peligro { color: var(--error-texto); border-color: #F0C4C4; }
.ficha-vacia { display: grid; justify-items: center; gap: 10px; padding: 30px 10px; color: var(--texto-suave); text-align: center; }
.ficha-vacia p { margin: 0; }

@media (max-width: 1100px) {
    .lista-y-ficha { grid-template-columns: 1fr; }
    .ficha { position: static; }
}

/* =========================================================
   Asistente "Registrar" (Bautismo y los demás libros)
   ========================================================= */
.enlace-volver { display: inline-block; margin-bottom: 6px; color: var(--azul); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.enlace-volver:hover { text-decoration: underline; }
.aviso-exito { background: #E6F6EC; color: #1E6B3A; margin: 0 0 16px; }
.aviso-alerta { background: #FFF4DB; color: #7A4B00; border: 1px solid #F3DFA8; }

.registro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.registro.registro-solo { grid-template-columns: minmax(0, 960px); }
.asistente { overflow: hidden; }

.pasos { list-style: none; margin: 0; padding: 16px 20px; display: flex; gap: 6px; border-bottom: 1px solid var(--borde); }
.paso { flex: 1; }
.paso button {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border: none; border-radius: 10px; background: none;
    font: inherit; font-weight: 600; font-size: 0.9rem; color: #8A93A3; cursor: pointer; text-align: left;
}
.paso button:disabled { cursor: default; }
.paso button:not(:disabled):hover { background: var(--fondo); }
.paso-num {
    width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
    border: 2px solid #CDD3DE; border-radius: 50%; font-size: 0.85rem;
}
.paso.hecho button { color: var(--azul-oscuro); }
.paso.hecho .paso-num { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; }
.paso.actual button { color: var(--texto); }
.paso.actual .paso-num { border-color: var(--azul); color: var(--azul); }

.asistente-cuerpo { padding: 20px 26px 8px; }
.asistente-cuerpo h2 { font-size: 1.25rem; }
.ayuda-paso { margin: 4px 0 18px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 14px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 14px; }
.campo-bloque { display: flex; flex-direction: column; }
.campo-bloque .etiqueta { margin: 0 0 6px; }
.campo.invalido { border-color: #D64545; }
.campo.invalido:focus { box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18); }
.error-campo { margin-top: 5px; color: var(--error-texto); font-size: 0.83rem; }
select.campo { cursor: pointer; }
.campo-area { height: auto; padding: 10px 14px; resize: vertical; }
.enlace-campo { align-self: flex-start; margin-top: 6px; }
.revisar { margin: 0 0 14px; font-weight: 500; }
.nota-sugerida { margin: 0 0 12px; color: var(--texto-suave); font-size: 0.85rem; }

.mini-formulario {
    display: grid; grid-template-columns: 120px 1fr 1fr; gap: 12px; align-items: end;
    padding: 14px; margin-bottom: 14px; border: 1px dashed #C9D8F5; border-radius: 12px; background: #F7FAFF;
}
.mini-botones { grid-column: 1 / -1; display: flex; gap: 8px; }
.mini-error { grid-column: 1 / -1; margin: 0; }

.revision { border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px; }
.revision h3 { margin: 2px 0 12px; font-size: 1.25rem; }
.corregir { display: flex; flex-wrap: wrap; gap: 16px; }
.parecidas { display: grid; gap: 10px; margin-top: 16px; }
.parecida { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.parecidas .boton-primario { justify-self: start; }

.asistente-pie { display: flex; gap: 10px; padding: 16px 26px; border-top: 1px solid var(--borde); }
.asistente-pie-der { margin-left: auto; display: flex; gap: 10px; }

.digitados { padding: 18px; position: sticky; top: 96px; }
.digitados h3 { font-size: 1rem; margin-bottom: 4px; }
.digitados > p { margin: 0 0 10px; font-size: 0.85rem; }
.digitados-vacio { color: var(--texto-suave); font-size: 0.9rem; }
.digitado { display: block; padding: 10px 6px; border-top: 1px solid #EEF1F6; color: var(--texto); text-decoration: none; border-radius: 8px; }
.digitado:hover { background: var(--fondo); }
.digitado b { display: block; font-size: 0.92rem; }
.digitado small { color: var(--texto-suave); font-size: 0.8rem; }

@media (max-width: 1100px) {
    .registro { grid-template-columns: 1fr; }
    .digitados { position: static; }
}
@media (max-width: 700px) {
    .rejilla-2, .rejilla-3, .mini-formulario { grid-template-columns: 1fr; }
    .paso-texto { display: none; }
    .asistente-cuerpo, .asistente-pie { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Paso 2: padres y padrinos ---------- */
.persona-fila {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; margin-bottom: 10px;
    border: 1px solid var(--borde); border-radius: 12px;
}
.persona-fila.elegida { background: #F5F8FE; border-color: #C9D8F5; }
.persona-fila-datos { flex: 1; min-width: 0; }
.persona-fila-datos small {
    display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--texto-suave);
}
.persona-fila-datos b { font-size: 1rem; }
.persona-nueva { margin-left: 8px; font-style: normal; font-size: 0.8rem; color: #1E6B3A; }
.enlace-rojo { color: var(--error-texto); }

/* ---------- Ventanita (modal) ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(21, 42, 92, 0.35); z-index: 80; }
.modal {
    position: fixed; z-index: 90; left: 50%; top: 8vh; transform: translateX(-50%);
    width: min(600px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto;
    padding: 20px 22px;
}
.modal-encabezado { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-encabezado h2 { flex: 1; font-size: 1.2rem; }
.modal-subtitulo { font-size: 1.05rem; margin: 0 0 12px; }
.modal-buscar { max-width: none; margin-bottom: 10px; }
.modal-resultados { min-height: 120px; max-height: 46vh; overflow-y: auto; }
.modal-resultados > p { padding: 10px 4px; margin: 0; }
.persona-resultado {
    width: 100%; display: block; text-align: left;
    padding: 10px 12px; border: none; border-bottom: 1px solid #EEF1F6; border-radius: 8px;
    background: none; font: inherit; color: var(--texto); cursor: pointer;
}
.persona-resultado:hover { background: var(--info-fondo); }
.persona-resultado small { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--texto-suave); font-size: 0.82rem; margin-top: 2px; }
.persona-resultado .rel-rol { color: var(--azul); font-weight: 600; }
.persona-resultado.marcada { background: var(--info-fondo); box-shadow: inset 3px 0 0 var(--azul); }
.confirmar-persona {
    margin-top: 12px; padding: 14px 16px; display: grid; gap: 6px;
    border: 1px solid #A9C5F2; border-radius: 12px; background: #F3F7FE; font-size: 0.92rem;
}
.confirmar-titulo { font-size: 1rem; color: var(--azul-oscuro); }
.relaciones { margin: 2px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.confirmar-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.modal-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.modal .aviso { margin: 0 0 12px; }

/* ---------- Panel del Proveedor ---------- */
.formulario-parroquia, .entrega { padding: 22px 24px; margin-bottom: 16px; }
.formulario-parroquia h2, .entrega h2 { font-size: 1.25rem; margin-bottom: 4px; }
.seccion-titulo {
    margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--borde);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave);
}
.ayuda-campo { margin-top: 5px; font-size: 0.82rem; }
.botones-formulario { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dato-grande { font-size: 1.2rem; font-weight: 700; font-family: Consolas, "Courier New", monospace; letter-spacing: 0.03em; }
.entrega { border-color: #9FD3B0; background: #F4FBF6; }
.entrega h2 { color: #1E6B3A; }
.tabla tbody tr.sin-clic { cursor: default; }
.estado {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; background: #EEF1F6; color: var(--texto-suave);
}
.estado-Activa { background: #E6F6EC; color: #1E6B3A; }
.estado-Gracia { background: #FFF4DB; color: #7A4B00; }
.estado-SoloConsulta, .estado-Finalizada { background: var(--error-fondo); color: var(--error-texto); }

/* ---------- Asistente de primer ingreso (/bienvenida) ---------- */
.bienvenida { min-height: 100vh; background: var(--fondo); }
.bienvenida-barra {
    display: flex; align-items: center; gap: 16px; padding: 12px 28px;
    background: var(--azul-oscuro); color: #fff;
}
.bienvenida-marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.bienvenida-parroquia { flex: 1; text-align: center; font-weight: 600; font-size: 1.15rem; }
.bienvenida-cuerpo { max-width: 900px; margin: 0 auto; padding: 26px 20px 40px; }
.campo-fijo { display: flex; align-items: center; background: var(--fondo); color: var(--texto); font-weight: 600; }
.margen-arriba { margin-top: 16px; }
.regla-clave { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; color: var(--texto-suave); }
.regla-clave li::before { content: "○ "; }
.regla-clave li.ok { color: #1E6B3A; }
.regla-clave li.ok::before { content: "✓ "; }
.logo-zona { display: flex; gap: 20px; align-items: flex-start; }
.logo-vista {
    width: 120px; height: 120px; flex-shrink: 0; display: grid; place-items: center;
    border: 1px dashed #C9D2E0; border-radius: 16px; background: #fff; color: var(--azul-oscuro); overflow: hidden;
}
.logo-vista img { width: 100%; height: 100%; object-fit: contain; }
.logo-acciones { display: flex; flex-direction: column; gap: 6px; }
.campo-archivo { font: inherit; }
.opciones-papel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.opcion-papel {
    display: grid; gap: 4px; padding: 14px 16px; cursor: pointer;
    border: 1px solid var(--borde); border-radius: 12px; background: #fff;
}
.opcion-papel input { accent-color: var(--azul); }
.opcion-papel small { color: var(--texto-suave); font-size: 0.85rem; }
.opcion-papel.elegida { border-color: var(--azul); background: #F3F7FE; box-shadow: inset 0 0 0 1px var(--azul); }
@media (max-width: 700px) {
    .opciones-papel { grid-template-columns: 1fr; }
    .bienvenida-parroquia { display: none; }
    .logo-zona { flex-direction: column; }
}

/* ---------- Celular / tableta: el menú pasa a una fila arriba ---------- */
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .lateral { position: static; height: auto; padding: 8px; display: flex; align-items: center; gap: 8px; }
    .lateral-marca { padding: 0 6px 0 0; margin: 0; border: none; border-right: 1px solid rgba(255, 255, 255, 0.1); }
    .lateral-logo { width: 40px; height: 40px; }
    .lateral-nav { flex-direction: row; overflow-x: auto; gap: 2px; }
    .nav-separador { width: 1px; height: auto; margin: 8px 4px; }
    .nav-celda { width: 76px; flex-shrink: 0; padding: 8px 2px; }
    .panel-config { position: fixed; left: 16px; right: 16px; top: 96px; bottom: auto; width: auto; }
    .barra { flex-wrap: wrap; padding: 12px 16px; position: static; }
    .barra-buscar { order: 3; flex-basis: 100%; max-width: none; }
    .barra-parroquia { justify-content: flex-start; font-size: 1rem; }
    /* Nombre de la parroquia, centrado entre el buscador y el usuario */
.barra-parroquia {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--azul-oscuro);
    font-size: 1.5rem;
    font-weight: 700;
}
.barra-parroquia span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra-derecha { margin-left: auto; gap: 8px; }
    .boton-salir span, .usuario-textos { display: none; }
    .avatar { width: 38px; height: 38px; font-size: 0.9rem; }
    .franja { padding: 10px 16px; }
    .contenido { padding: 18px 16px; }
    .libro-registrar { margin-left: 0; }
    .tabla th:nth-child(3), .tabla td:nth-child(3) { display: none; }
}

/* =========================================================
   Inicio: tarjetas de los libros y últimas impresiones
   ========================================================= */
.inicio-libros {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 250px));
    gap: 12px; margin-bottom: 28px;
}
.inicio-libro { padding: 12px 14px; border-radius: 14px; }
.inicio-libro-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--azul); }
.inicio-libro-titulo h2 {
    margin: 0; font-size: 0.88rem; color: var(--texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inicio-libro-total { font-size: 1.5rem; font-weight: 700; color: var(--azul-oscuro); line-height: 1.1; }
.inicio-libro-total small { margin-left: 6px; font-size: 0.95rem; font-weight: 500; color: var(--texto-suave); }
.inicio-libro.vacio .inicio-libro-total { color: #9AA3B2; }
.inicio-libro-sup {
    display: flex; justify-content: space-between;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #EEF1F6;
    font-size: 0.82rem; color: var(--texto-suave);
}
.inicio-libro-sup b { color: var(--texto); }
.inicio-seccion {
    margin: 0 0 10px; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave);
}
.tabla-sin-clic tbody tr { cursor: default; }
.tabla-sin-clic tbody tr:hover td { background: none; }

/* ---------- Opciones de la constancia (en la ficha) ---------- */
.constancia-opciones {
    margin-top: 16px; padding: 14px 16px; display: grid; gap: 8px;
    border: 1px solid #A9C5F2; border-radius: 12px; background: #F3F7FE;
}
.constancia-opciones h3 { margin: 0; font-size: 1rem; color: var(--azul-oscuro); }
.constancia-idioma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; }
.otro-idioma-activo { color: var(--error-texto); background: var(--error-fondo); font-weight: 600; font-size: 0.9rem; border-radius: 8px; padding: 6px 10px; }
.constancia-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* =========================================================
   Configuración → Datos de la parroquia
   ========================================================= */
.datos-pantalla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.datos-seccion { padding: 18px 20px; margin-bottom: 16px; }
.datos-seccion h2 { margin: 0 0 12px; font-size: 1.05rem; }
.campo.solo-lectura { background: #F3F5F9; color: var(--texto-suave); }
.datos-botones { display: flex; justify-content: flex-end; gap: 10px; }
.vista-encabezado { padding: 16px; position: sticky; top: 96px; }
.vista-encabezado h2 { margin: 0 0 10px; font-size: 1rem; }
.vista-hoja { border: 1px solid var(--borde); border-radius: 6px; padding: 16px 14px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.vista-enc { display: flex; gap: 10px; align-items: center; color: #1A3F94; font-family: "Times New Roman", Times, serif; font-weight: bold; font-style: italic; }
.vista-enc img { width: 56px; height: 64px; object-fit: contain; }
.vista-enc-texto { flex: 1; text-align: center; font-size: 0.74rem; line-height: 1.35; }
.vista-enc-texto .nombre { font-size: 0.92rem; }
.vista-adorno { display: flex; align-items: center; justify-content: center; gap: 6px; font-style: normal; }
.vista-adorno i { display: block; height: 2px; width: 60px; }
.vista-adorno i.izq { background: linear-gradient(to left, #1A3F94, transparent); }
.vista-adorno i.der { background: linear-gradient(to right, #1A3F94, transparent); }
.vista-membrete { height: 70px; border: 1px dashed var(--borde); border-radius: 4px; display: grid; place-items: center; color: var(--texto-suave); font-size: 0.8rem; text-align: center; padding: 6px; }
.vista-linea { height: 6px; margin-top: 8px; background: #E8ECF3; border-radius: 3px; }
.vista-linea.corta { width: 75%; }
@media (max-width: 1000px) { .datos-pantalla { grid-template-columns: 1fr; } .vista-encabezado { position: static; } }

/* ---------- Configuración → Firmantes ---------- */
.firmantes-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.firmantes-cabecera b { font-size: 1rem; }
.estrella { color: #B7791F; font-weight: 700; }
.texto-error { color: var(--error-texto); font-weight: 600; }
.boton-chico { height: 36px; padding: 0 12px; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.modal.modal-ancho { width: min(780px, calc(100vw - 32px)); }
.formulario-campos { border: none; margin: 0; padding: 0; min-width: 0; }
.formulario-campos:disabled { opacity: 0.5; }
.etiqueta-actual { display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: #FFF4DB; color: #7A4B00; font-weight: 600; font-size: 0.88rem; }
.firmante-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.confirmar-eliminar { margin-top: 14px; padding: 12px 14px; border: 1px solid #F0C4C4; border-radius: 12px; background: var(--error-fondo); color: var(--error-texto); display: grid; gap: 10px; }

/* =========================================================
   Lo de Blazor (carga y error)
   ========================================================= */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #dfe4ee;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--azul);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--texto-suave);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Cargando"); }

/* =========================================================
   Buscador universal (/buscar)
   ========================================================= */
.bu-pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin: 14px 0 16px; }
.bu-pestana { border: 2px solid transparent; border-bottom: none; background: none; padding: 9px 16px; border-radius: var(--radio-chico) var(--radio-chico) 0 0; font-weight: 600; color: var(--texto-suave); cursor: pointer; position: relative; top: 2px; font-size: 0.95rem; }
.bu-pestana.activa { color: var(--azul); background: var(--tarjeta); border-color: var(--borde); border-bottom: 2px solid var(--tarjeta); }
.bu-prox { font-size: 0.72rem; font-weight: 700; background: #FFF3D6; color: #8A6100; border-radius: 8px; padding: 1px 7px; margin-left: 6px; }
.bu-filtros { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: end; padding: 14px 16px; margin-bottom: 14px; }
.bu-filtros .opcional { font-weight: 500; color: var(--texto-suave); margin-left: 4px; }
.bu-filtros-botones { display: flex; gap: 8px; }
.bu-resumen { color: var(--texto-suave); margin: 0 0 12px; }
.bu-buscado { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--error-fondo); border: 1px solid #F0C4C4; color: #C62828; border-radius: var(--radio-chico); padding: 7px 12px; font-weight: 600; }
.bu-buscado b { font-size: 1.1rem; }
.bu-quitar { background: #fff; border: 1px solid #F0C4C4; color: #C62828; border-radius: 8px; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.bu-quitar:hover { background: #FFF5F5; }
.bu-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bu-persona { text-align: left; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.bu-persona:hover, .bu-persona:focus-visible { border-color: var(--azul); background: var(--info-fondo); outline: none; }
.bu-persona b { display: block; font-size: 1rem; }
.bu-persona span { display: block; color: var(--texto-suave); font-size: 0.88rem; margin-top: 2px; }
.bu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bu-chip { font-size: 0.75rem; font-weight: 600; border-radius: 10px; padding: 2px 9px; background: #E6F4EC; color: #2E7D4F; }
.bu-volver { background: none; border: none; color: var(--azul); font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 12px; font-size: 0.95rem; }
.bu-detalle { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.bu-tarjeta { padding: 18px 20px; }
.bu-tarjeta h2 { font-size: 1.3rem; margin-bottom: 6px; }
.bu-tarjeta .dato { color: var(--texto-suave); margin: 2px 0; font-size: 0.93rem; }
.bu-tarjeta h3 { font-size: 0.9rem; margin: 18px 0 8px; }
.bu-sacr { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 0.92rem; }
.bu-sacr .si { color: #2E7D4F; font-weight: 600; }
.bu-sacr .no { color: #9AA5B1; }
.bu-apariciones { margin: 0; padding-left: 18px; font-size: 0.92rem; }
.bu-apariciones li { margin: 3px 0; }
.bu-constancia { padding: 16px 18px; }
.bu-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.bu-acciones .campo { min-width: 200px; }
.bu-vista { width: 100%; height: 640px; border: 1px solid var(--borde); border-radius: 8px; background: #F7F8FA; }
.bu-otras-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.bu-otras-aviso { border: 1px dashed #E0B44C; background: #FFFAEB; color: #7A5800; border-radius: var(--radio-chico); padding: 12px 14px; }
@media (max-width: 900px) {
    .bu-lista, .bu-detalle, .bu-filtros, .bu-otras-filtros { grid-template-columns: 1fr; }
    .bu-vista { height: 480px; }
}

/* =========================================================
   Suscripción: solo consulta (candado) y finalizada (pantalla única)
   ========================================================= */
.bloqueado { position: relative; }
.nav-celda.bloqueado::after { content: "🔒"; position: absolute; top: 6px; right: 8px; font-size: 0.7rem; opacity: 0.8; }
.panel-opcion.bloqueado b::after { content: " 🔒"; font-size: 0.75rem; }
.ayuda-solo-consulta { margin-top: 10px; color: #B45309; font-size: 0.85rem; }
.fin-pantalla { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--fondo); position: relative; }
.fin-idioma { position: absolute; top: 16px; right: 20px; }
.fin-tarjeta { max-width: 540px; text-align: center; padding: 32px 30px; }
.fin-icono { color: var(--azul-oscuro); }
.fin-tarjeta h1 { font-size: 1.6rem; margin: 8px 0 12px; color: #C62828; }
.fin-tarjeta p { color: var(--texto-suave); line-height: 1.55; margin: 0 0 8px; }
.fin-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* =========================================================
   Parroquias demo
   ========================================================= */
.demo-casilla { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 6px 0 14px; border: 2px solid #6B3FA0; background: #F1EAFB; border-radius: var(--radio-chico); cursor: pointer; }
.demo-casilla input { width: 18px; height: 18px; margin-top: 2px; accent-color: #6B3FA0; flex: none; }
.demo-casilla b { color: #6B3FA0; display: block; }
.demo-casilla small { display: block; color: var(--texto-suave); margin-top: 3px; }
.etiqueta-demo { display: inline-block; margin-left: 6px; font-size: 0.7rem; font-weight: 700; background: #F1EAFB; color: #6B3FA0; border-radius: 8px; padding: 1px 7px; vertical-align: middle; }
.estado-Disponible { background: #E8F0FD; color: var(--azul); }
.franja-demo { background: #F1EAFB; color: #6B3FA0; border-bottom: 1px solid #DCCBF3; }

/* =========================================================
   Configuración → Encabezado (diseñador) y vista previa común
   ========================================================= */
.en-tarjeta { padding: 18px 20px; }
.en-rejilla { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.en-tit { font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); margin: 0 0 10px; }
.en-tit-vista { margin-top: 20px; }
.en-paleta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-height: 120px; padding: 8px; border: 2px dashed transparent; border-radius: var(--radio-chico); }
.en-paleta.sobre { border-color: var(--azul); background: var(--info-fondo); }
.en-ficha { display: inline-flex; align-items: center; gap: 6px; background: var(--info-fondo); color: var(--info-texto); border: 1px solid #C9D9F7; border-radius: 9px; padding: 6px 10px; font-weight: 600; font-size: 0.85rem; cursor: grab; user-select: none; }
.en-ficha::before { content: "⠿"; color: #8FA3C9; font-size: 0.75rem; }
.en-ficha.adorno { background: #FFF4E5; color: #B45309; border-color: #F5D9B0; }
.en-ayuda { color: var(--texto-suave); font-size: 0.8rem; margin-top: 10px; line-height: 1.45; }
.en-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.en-logo .etiqueta-chica { margin: 0; }
.en-logo .campo { width: auto; }
.en-cabecera, .en-renglon { display: grid; grid-template-columns: 76px minmax(0, 1fr) 84px 76px 40px 40px; gap: 8px; align-items: center; }
.en-cabecera { font-size: 0.78rem; font-weight: 700; color: var(--texto-suave); padding: 0 2px 6px; }
.en-renglon { margin-bottom: 8px; }
.en-renglon .campo { padding: 6px 8px; }
.en-n { font-weight: 700; color: var(--texto-suave); font-size: 0.85rem; }
.en-zona { min-height: 44px; border: 2px dashed var(--borde); border-radius: var(--radio-chico); padding: 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #FAFBFC; }
.en-zona.sobre { border-color: var(--azul); background: var(--info-fondo); }
.en-vacio { color: #B4BBC7; font-size: 0.8rem; padding-left: 6px; }
.en-tog { height: 36px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-weight: 700; cursor: pointer; color: var(--texto-suave); font-family: inherit; }
.en-tog.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.en-tog:disabled { opacity: 0.4; cursor: default; }
.en-hoja { border: 1px solid var(--borde); border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .07); padding: 22px 30px 24px; }
.en-botones { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.en-botones-der { display: flex; gap: 10px; }
.en-original { border-color: #F0C98E; color: #B45309; }
/* Vista previa común (igual al PDF) */
.ve-enc { display: flex; gap: 14px; align-items: center; font-family: "Times New Roman", Times, serif; border-bottom: 1.5px solid transparent; }
.ve-logo { width: 96px; height: 96px; object-fit: contain; flex: none; }
.ve-texto { flex: 1; text-align: center; line-height: 1.3; }
.ve-adorno { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0; }
.ve-adorno i { display: block; height: 2px; width: 140px; }
.ve-adorno i.izq { background: linear-gradient(to left, currentColor, transparent); }
.ve-adorno i.der { background: linear-gradient(to right, currentColor, transparent); }
.ve-enc.chica { gap: 10px; }
.ve-enc.chica .ve-logo { width: 56px; height: 64px; }
.ve-enc.chica .ve-adorno i { width: 60px; }
@media (max-width: 900px) { .en-rejilla { grid-template-columns: 1fr; } .en-paleta { flex-direction: row; flex-wrap: wrap; } .en-cabecera { display: none; } .en-renglon { grid-template-columns: 1fr 1fr; } .en-renglon .en-zona { grid-column: 1 / -1; } }

/* =========================================================
   Configuración → Plantillas (editor de la constancia)
   ========================================================= */
.pl-tarjeta { padding: 18px 20px; }
.pl-arriba { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-pestanas { display: flex; gap: 4px; }
.pl-pestanas button { border: 1px solid var(--borde); background: #F3F5F9; color: var(--texto-suave); border-radius: var(--radio-chico); padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.pl-pestanas button.activa { background: var(--azul); color: #fff; border-color: var(--azul); }
.pl-botones { display: flex; gap: 8px; }
.pl-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.pl-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--borde); border-bottom: none; border-radius: 12px 12px 0 0; background: #F7F8FA; }
.pl-t { width: 36px; height: 34px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; color: var(--texto); }
.pl-t:hover { border-color: var(--azul); }
.pl-sep { width: 1px; height: 24px; background: var(--borde); margin: 0 4px; }
.pl-lbl { font-size: 0.75rem; color: var(--texto-suave); font-weight: 600; }
.pl-sel { width: auto; padding: 5px 8px; }
.pl-sel-chico { min-width: 64px; }
.pl-editor { border: 1px solid var(--borde); border-radius: 0 0 12px 12px; min-height: 340px; padding: 28px 34px; font-family: 'Liberation Serif', 'Times New Roman', serif; font-size: 12pt; text-align: justify; outline: none; background: #fff; color: #111; }
.pl-editor:focus { box-shadow: 0 0 0 3px rgba(36, 87, 197, .15); }
.pl-editor p { margin: 0; }
/* Cada dato del acta es una sola pieza (etiqueta azul) que toma la letra y el formato del texto. */
.pl-dato-sel { outline: 2px solid var(--azul); outline-offset: 1px; }
.pl-dato { background: #EAF1FD; border: 1px solid #C9D9F7; border-radius: 5px; padding: 0 4px; white-space: nowrap; cursor: default; color: #1C3F8C; }
.pl-fichas { display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-height: 440px; overflow: auto; padding: 8px; border: 1px solid var(--borde); border-radius: 12px; }
.pl-ficha { background: var(--info-fondo); color: var(--info-texto); border: 1px solid #C9D9F7; border-radius: 9px; padding: 6px 10px; font-weight: 600; font-size: 0.85rem; cursor: grab; user-select: none; }
.pl-ficha::before { content: "⠿ "; color: #8FA3C9; }
.pl-abajo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 900px) { .pl-rejilla { grid-template-columns: 1fr; } .pl-editor { padding: 18px; } }

/* =========================================================
   Acceso: el servidor estaba en reposo (plan gratis)
   ========================================================= */
.acceso-reposo {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
    color: var(--texto, #1B2333);
    border-radius: inherit;
}
.acceso-reposo p { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 320px; }
.acceso-reposo .rueda {
    width: 28px; height: 28px;
    border: 3px solid #2457C5; border-right-color: transparent; border-radius: 50%;
    animation: reposo-giro 0.8s linear infinite;
}
@keyframes reposo-giro { to { transform: rotate(360deg); } }
.reposo-barra { width: 70%; height: 6px; background: #DCE6FA; border-radius: 4px; overflow: hidden; }
.reposo-barra i { display: block; height: 100%; background: #2457C5; transition: width 0.9s linear; }