/* Fuentes propias para los documentos imprimibles (certificados, informe). Se sirven desde el
   propio servidor en vez de depender de que el ordenador de quien imprime las tenga instaladas:
   así el navegador usa siempre el mismo archivo de letra en todos los sitios, y el alto real del
   texto no varía de un ordenador a otro — que es justo lo que ha causado que un documento que
   "cabía" en las pruebas locales luego se pasara de página al imprimirlo de verdad. */
@font-face {
    font-family: "Gelasio";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/gelasio-400.woff2) format("woff2");
}
@font-face {
    font-family: "Gelasio";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/gelasio-400-italic.woff2) format("woff2");
}
@font-face {
    font-family: "UnifrakturMaguntia";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/unifraktur-maguntia-400.woff2) format("woff2");
}
/* Arimo: métricas idénticas a Arial (la letra del Word original de Bautismo). El mismo archivo
   sirve para 400 y 700 (fuente variable), por eso se declara dos veces con el mismo src. */
@font-face {
    font-family: "Arimo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/arimo-400.woff2) format("woff2");
}
@font-face {
    font-family: "Arimo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/arimo-400.woff2) format("woff2");
}
@font-face {
    font-family: "Arimo";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/arimo-400-italic.woff2) format("woff2");
}

:root {
    color-scheme: light;
    --color-marca: #7a1f2b;
    --color-marca-oscuro: #5c1620;
    --color-sidebar-1: #4a1420;
    --color-sidebar-2: #2b1810;
    --color-bg: #f7f5f2;
    --color-surface: #ffffff;
    --color-border: #e9ebef;
    --color-text: #212529;
    --color-muted: #6b7280;
    /* Guion de celebración (Sacristía): rojo/terracota tradicional de las rúbricas litúrgicas
       (distinto del granate de marca) y un azul grisáceo propio para las etiquetas estructurales
       (quién habla, nombre del momento), para que no compitan con los títulos de apartado. */
    --color-rubrica: #a63d2a;
    --color-etiqueta-momento: #3f5c72;
    /* El dorado de las iluminaciones litúrgicas: junto al rojo de las rúbricas, el azul de las
       etiquetas y el negro del texto, la misma paleta de cuatro colores de los misales iluminados.
       Resalta la voz de quien preside en un diálogo, para distinguirla de un vistazo de las
       respuestas de los demás (en negro). */
    --color-celebrante: #8a6a23;
}

body {
    background: var(--color-bg);
}

a {
    color: var(--color-marca);
}
a:hover {
    color: var(--color-marca-oscuro);
}

h1:focus {
    outline: none;
}

/* Bootstrap con nuestro color de marca en vez del azul por defecto */
.btn-primary {
    --bs-btn-bg: var(--color-marca);
    --bs-btn-border-color: var(--color-marca);
    --bs-btn-hover-bg: var(--color-marca-oscuro);
    --bs-btn-hover-border-color: var(--color-marca-oscuro);
    --bs-btn-active-bg: var(--color-marca-oscuro);
    --bs-btn-active-border-color: var(--color-marca-oscuro);
    --bs-btn-disabled-bg: var(--color-marca);
    --bs-btn-disabled-border-color: var(--color-marca);
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-marca);
    box-shadow: 0 0 0 0.25rem rgba(122, 31, 43, 0.15);
}
.form-check-input:checked {
    background-color: var(--color-marca);
    border-color: var(--color-marca);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(122, 31, 43, 0.15);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-marca);
}

main {
    max-width: 1100px;
}
main .content {
    padding: 1.5rem 1rem 2.5rem;
}

/* Compatibilidad con formularios ya escritos con este layout propio (simple flex-row) */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.form-row > .form-group {
    flex: 1 1 200px;
    margin-bottom: 0;
}
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.form-group-btn {
    margin-bottom: 1rem;
}
.form-check-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

/* Alias con los nombres usados en páginas ya escritas (Bootstrap trae alert-success/alert-danger) */
.alert-ok {
    background-color: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}
.alert-error {
    background-color: #fee2e2;
    border-color: #f3c9c9;
    color: #991b1b;
}
.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 1rem;
}

/* ===== Layout de página: sidebar + contenido ===== */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, var(--color-sidebar-1) 0%, var(--color-sidebar-2) 70%);
}

.top-row {
    background-color: rgba(0, 0, 0, 0.2);
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row .navbar-brand {
    font-size: 1.1rem;
    color: white;
    font-weight: 600;
}

/* .navbar-toggler (el botón ☰) va en position:absolute, anclado a top-right de .top-row, por
   encima de lo que haya en .container-fluid — sin este hueco, la campanita (último elemento del
   flex, pegado también a la derecha) queda justo debajo y el botón ☰ la tapa por completo. El
   ancho reservado es el mismo que ocupa el botón (3.5rem) más su separación del borde (1rem). */
.top-row .container-fluid {
    padding-right: 4.5rem;
}

.avisos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.aviso-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid #93c5fd;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.aviso-card-urgente {
    border-left-color: #dc2626;
    background: #fef7f7;
}
.aviso-card-cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.aviso-card-titulo {
    font-weight: 700;
}
.aviso-card-detalle, .aviso-card-partida {
    color: var(--color-muted);
    font-size: 0.88rem;
}
.aviso-card-partida i {
    color: var(--color-muted);
}
.aviso-card-pie {
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.aviso-card-tiempo {
    color: var(--color-muted);
    font-size: 0.8rem;
}
.aviso-card-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.aviso-card-cierre {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nav-campana {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.75rem;
    border-radius: 50%;
    color: white;
    font-size: 1.15rem;
    text-decoration: none;
}
.nav-campana:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}
.banner-avisos {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
    text-decoration: none;
}
.banner-avisos:hover {
    background: #fee2e2;
    color: #991b1b;
}
.banner-avisos i.bi-bell-fill {
    font-size: 1.2rem;
}
.banner-avisos-flecha {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.nav-campana-contador {
    position: absolute;
    top: -0.15rem;
    right: -0.15rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #dc2626;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

/* Globo de la entrada fija "Avisos" del menú lateral — a diferencia de .nav-campana-contador (que
   flota sobre la esquina del icono de la franja superior), este va en línea junto al texto. */
.nav-avisos-contador {
    display: inline-block;
    margin-left: 0.4rem;
    min-width: 1.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #dc2626;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
}

/* El checkbox de verdad se queda accesible (con foco de teclado) pero visualmente oculto — la
   caja que se ve y se pulsa es el <label for="navbar-toggler-input"> de al lado, con el icono
   bi-list dentro (antes no había ningún icono dibujado: la caja se perdía en el fondo oscuro). */
.navbar-toggler-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    font-size: 1.4rem;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-input:checked ~ .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-input:focus-visible ~ .navbar-toggler {
    outline: 2px solid white;
    outline-offset: 2px;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler-input:checked ~ .nav-scrollable {
    display: block;
}

.nav-item {
    font-size: 0.95rem;
    padding-bottom: 0.25rem;
}

.nav-item:first-of-type {
    padding-top: 1rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item .nav-link {
    color: #d7d2ce;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    padding: 0.5rem 0;
    text-decoration: none;
}

.nav-item .nav-link.active {
    color: white;
    font-weight: 600;
}

.nav-item .nav-link:hover {
    color: white;
}

.nav-section-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    margin-top: 1.25rem;
    padding: 0.35rem 0.25rem 0.4rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}
.nav-section-title:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Secciones plegables del menú (Catequesis, Economía, Despacho, Administración). Se usa
   <details>/<summary> para que funcionen sin JavaScript, también en las páginas de SSR estático. */
.nav-seccion {
    margin: 0 0.75rem;
}
.nav-seccion > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin-top: 1.25rem;
    padding: 0.35rem 0.25rem 0.4rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}
.nav-seccion > summary::-webkit-details-marker {
    display: none;
}
.nav-seccion > summary::after {
    content: "\f282"; /* bi-chevron-down */
    font-family: bootstrap-icons;
    font-weight: normal;
    font-size: 0.9rem;
    margin-left: auto;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.nav-seccion[open] > summary::after {
    transform: rotate(180deg);
}
.nav-seccion > summary:hover {
    border-bottom-color: rgba(255, 255, 255, 0.6);
}
/* Los .nav-item de dentro ya llevan su propio px-3 de Bootstrap: se compensa el margen de la
   sección para que los enlaces queden alineados con los de fuera (Inicio). */
.nav-seccion .nav-item {
    margin: 0 -0.75rem;
}

.nav-user {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* La plantilla original de Blazor pone aquí 641px, que es poquísimo: cualquier tablet (incluso en
   vertical, ~768px) ya caía en este bloque y se quedaba con la barra lateral fija de escritorio,
   sin ningún botón para plegarla — justo la queja de Jordi con la tablet. Subido a 1200px para que
   tablets en cualquier orientación (hasta ~1194px de una iPad Pro apaisada) sigan teniendo el menú
   plegable de móvil, y solo ordenador/portátil de verdad reciba la barra fija. */
@media (min-width: 1200px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 260px;
        min-height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
    }

    .top-row {
        display: none;
    }

    .navbar-toggler-input, .navbar-toggler {
        display: none;
    }

    .nav-scrollable {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        padding-top: 1rem;
    }

    .nav-scrollable nav {
        flex: 1;
    }

    main .content {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 1.5rem;
        padding-bottom: 3rem;
    }
}

/* ===== Lenguaje visual común (card-panel, badges, tarjetas...) ===== */

.card-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    padding: 24px;
    margin-bottom: 28px;
    overflow-x: auto;
}

.badge-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-admin-global { background-color: #ede9fe; color: #5b21b6; }
.badge-gestor       { background-color: #cffafe; color: #155e75; }
.badge-operativo    { background-color: #e5e7eb; color: #4b5563; }

.badge-ok      { background-color: #dcfce7; color: #166534; }
.badge-parcial { background-color: #fef3c7; color: #92400e; }
.badge-vacio   { background-color: #fee2e2; color: #991b1b; }

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--color-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.panel-cabecera {
    background: linear-gradient(90deg, var(--color-marca) 0%, var(--color-marca-oscuro) 100%);
    color: #fff;
    padding: 14px 24px;
    margin: -24px -24px 20px -24px;
    border-radius: 10px 10px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.grupo-opciones {
    background: #f5e9eb;
    border: 1px solid #e0c9cd;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.grupo-opciones .grupo-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-marca-oscuro);
    margin-bottom: 8px;
}

/* ===== Guion de celebración (Sacristía): texto fijo, rúbrica, diálogo, elección ===== */

.sacristia-momento {
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.sacristia-momento:last-child {
    margin-bottom: 0;
}
.sacristia-etiqueta {
    font-weight: 700;
    font-size: 1em;
    color: var(--color-etiqueta-momento);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sacristia-hablante {
    font-weight: 700;
    color: var(--color-text);
}
.sacristia-hablante-presidente {
    color: var(--color-celebrante);
}
.sacristia-cuerpo {
    white-space: pre-line;
}
/* El control de tamaño de letra (ControlTamanoLetra.razor) escribe --sacristia-escala aquí; todo lo
   de dentro que use "em" en vez de "rem" para su tipografía escala con ello — pensado para leer la
   hoja de la celebración desde la tablet sin depender de imprimir en un tamaño fijo. */
.sacristia-hoja-lectura {
    font-size: calc(1rem * var(--sacristia-escala, 1));
}
.sacristia-control-tamano {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
/* Las rúbricas son indicaciones, no contenido a proclamar: se dejan discretas, sin caja, y en el
   rojo/terracota tradicional de las rúbricas litúrgicas, para que no se confundan nunca con los
   textos y diálogos reales que sí hay que leer en voz alta. */
.sacristia-rubrica {
    padding: 4px 0 4px 14px;
    margin-bottom: 10px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--color-rubrica);
    border-radius: 0;
}
.sacristia-rubrica .sacristia-etiqueta {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--color-rubrica);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 2px;
}
.sacristia-rubrica .sacristia-cuerpo {
    font-style: italic;
    color: var(--color-rubrica);
}
.sacristia-turno {
    margin-bottom: 4px;
}
.sacristia-turno-hablante {
    font-weight: 700;
    margin-right: 4px;
    color: var(--color-text);
}
.sacristia-turno-hablante-presidente {
    color: var(--color-celebrante);
}
.grupo-opciones .sacristia-momento {
    border-color: #e0c9cd;
}

/* Cancionero: el estribillo se marca en cursiva y con una franja de color a la izquierda, igual
   que en el propio cuadernillo en papel — para distinguirlo de un vistazo de las estrofas, que se
   dejan en texto normal. */
.sacristia-canto-estribillo {
    font-style: italic;
    font-weight: 600;
    padding: 10px 16px;
    background: #f5e9eb;
    border-left: 4px solid var(--color-marca);
    border-radius: 0 8px 8px 0;
}
.sacristia-canto-estribillo p,
.sacristia-canto-estrofas p {
    margin-bottom: 1em;
}
.sacristia-canto-estribillo p:last-child,
.sacristia-canto-estrofas p:last-child {
    margin-bottom: 0;
}
/* Cuando un momento del guion (p. ej. cada estación del Vía Crucis) enlaza un canto del
   Cancionero en vez de repetir su letra — ver MomentoView.razor, TipoMomento.Canto. */
.sacristia-canto-titulo {
    font-weight: 700;
    color: var(--color-marca);
    margin-bottom: 8px;
}
.sacristia-canto-estrofas {
    margin-top: 10px;
}
.sacristia-sin-elegir {
    background: #fee2e2;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
}
.sacristia-opcion-radio {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
}
.sacristia-opcion-radio:has(input:checked) {
    border-color: var(--color-marca);
    background: #f5e9eb;
}
.sacristia-opcion-radio.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.sacristia-lectura-preview {
    background: #f8f7f5;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
}
.sacristia-repeticion-nino {
    border-left: 3px solid var(--color-marca);
    padding-left: 12px;
    margin-bottom: 10px;
}
.sacristia-repeticion-etiqueta {
    font-weight: 700;
    color: var(--color-marca-oscuro);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.seccion-titulo {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f2f4;
}

.zona-accion {
    background-color: #fff5f5;
    border: 1px solid #f3c9c9;
    border-radius: 8px;
    padding: 18px;
    margin-top: 16px;
}
.zona-accion .seccion-titulo {
    color: #991b1b;
    border-bottom-color: #f3c9c9;
}

.app-tarjeta {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    display: block;
    background: var(--color-surface);
}
.app-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    color: inherit;
}
.app-tarjeta-banda {
    height: 6px;
    background: linear-gradient(90deg, var(--color-sidebar-1) 0%, var(--color-sidebar-2) 100%);
}
.app-tarjeta-icono {
    font-size: 2rem;
    margin-bottom: 8px;
}
.app-tarjeta .card-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.app-tarjeta.disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* ===== Específico de esta app ===== */

.inbox-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.inbox-item-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.embed-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

.legal-box {
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.search-results {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}
.search-results li {
    border-bottom: 1px solid var(--color-border);
}
.search-results li:last-child {
    border-bottom: none;
}
.search-results .link-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.search-results .link-button:hover {
    background: var(--color-bg);
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Informe anual de Economía: imita el aspecto del formulario oficial en papel del Arzobispado
   (tablas con borde fino, títulos en cursiva/negrita, sin el estilo "tarjeta" del resto del portal). */
.informe-oficial {
    background: #fff;
    color: #000;
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    font-size: 0.95rem;
    font-family: Arimo, "Liberation Sans", Arial, sans-serif;
}
.informe-oficial .of-caja {
    border: 1px solid #000;
    padding: 0.5rem;
}
.informe-oficial .of-titulo-mayor {
    font-weight: 700;
    font-style: italic;
    font-size: 1.1rem;
}
.informe-oficial .of-subtitulo {
    font-style: italic;
}
.informe-oficial .of-titulo-italico {
    font-weight: 700;
    font-style: italic;
    margin: 0.75rem 0 0.25rem;
}
.informe-oficial table.of-tabla {
    width: 100%;
    border-collapse: collapse;
}
.informe-oficial table.of-tabla th,
.informe-oficial table.of-tabla td {
    border: 1px solid #999;
    padding: 0.25rem 0.5rem;
    vertical-align: top;
}
.informe-oficial .of-etiqueta {
    width: 260px;
    color: #444;
}
.informe-oficial .of-total-linea {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-style: italic;
    border-top: 1px solid #000;
    padding-top: 0.25rem;
}
.informe-oficial .of-total-grande {
    font-size: 1.1rem;
}
.informe-oficial .of-fila-destacada {
    font-weight: 700;
    font-style: italic;
}

/* Vista de impresión (informe anual de Economía y similares): oculta el chrome del portal
   (sidebar, botones, filtros) y deja solo el contenido marcado, para imprimir/guardar en PDF.
   El documento oficial real mete cada bloque apretado en una sola página (letra pequeña, sin
   huecos) y ninguna fila de tabla se corta a medias entre dos páginas — de eso trata todo lo de
   aquí abajo, no solo de dónde empieza cada página nueva. */
@media print {
    .no-print, .sidebar, .top-row, .navbar-toggler {
        display: none !important;
    }

    /* El fondo crema del body se imprimía como un marco alrededor de todos los PDF cuando
       "Gráficos de fondo" está activo (obligatorio en Bautismo por la marca de agua), y el
       padding/ancho del layout se sumaba a los márgenes de página — en Bautismo el margen real
       era ~13,5mm y no los 5mm calibrados. Todo eso es chrome de pantalla, no del documento. */
    body {
        background: #fff !important;
    }
    main {
        max-width: none;
    }
    main .content {
        padding: 0 !important;
    }

    @page {
        /* Ojo: esto es el margen que pide la página, no lo que imprime de verdad una impresora
           física — casi todas tienen un margen mínimo de hardware (~4-5mm) que no pueden saltarse
           aunque se les pida 0. Se deja algo de holgura aquí para que tampoco falte al imprimir en
           papel de verdad, no solo al guardar como PDF (que sí respeta el margen exacto). */
        margin: 10mm;
    }

    .informe-oficial {
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        font-size: 0.78rem;
    }
    .of-logo-informe {
        max-width: 130px;
    }
    /* Las reglas de impresión de .of-cert-* (certificado IRPF) van al final del archivo, después
       de sus reglas base: aquí antes quedaban por delante de la base con la misma especificidad
       y nunca se aplicaban — la compactación que "veíamos" en pruebas no existía de verdad. */
    .informe-oficial .of-titulo-mayor {
        font-size: 0.95rem;
    }
    .informe-oficial table.of-tabla th,
    .informe-oficial table.of-tabla td {
        padding: 0.1rem 0.35rem;
    }
    .informe-oficial .of-caja {
        padding: 0.3rem;
    }

    /* Nunca partir una fila de tabla, ni una caja/línea de total, entre dos páginas. */
    .informe-oficial table.of-tabla tr,
    .informe-oficial .of-caja,
    .informe-oficial .of-total-linea {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Un título de sección nunca se queda solo al final de una página, separado de su tabla. */
    .informe-oficial .of-titulo-mayor,
    .informe-oficial .of-titulo-italico {
        break-after: avoid;
        page-break-after: avoid;
    }

    .of-salto-pagina {
        break-before: page;
        page-break-before: always;
    }
}

/* Dashboard de Economía: gráficas de barras sencillas en CSS puro, sin librerías externas. */
.of-grafico-barras {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 180px;
    padding-top: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.of-grafico-columna {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.of-grafico-barras-par {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    flex: 1;
    width: 100%;
    justify-content: center;
}
.of-barra {
    width: 40%;
    min-width: 6px;
    border-radius: 3px 3px 0 0;
    transition: height 0.2s;
}
.of-barra-ingreso { background: #1a7a3c; }
.of-barra-gasto { background: #a32121; }
.of-barra-saldo { background: var(--color-marca); width: 55%; }
.of-grafico-etiqueta {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.35rem;
    text-transform: capitalize;
}
.of-ranking-fondo {
    background: #0000000d;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.of-ranking-barra {
    background: var(--color-marca);
    height: 100%;
}
.of-ranking-barra-ingreso { background: #1a7a3c; }
.of-ranking-barra-gasto { background: #a32121; }

/* Certificado IRPF de donantes: imita el aspecto del documento real (tipografía serif, membrete,
   recuadro con el texto de deducción, hueco para sello/firma físicos tras imprimir). */
.of-certificado {
    background: #fff;
    color: #000;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    font-family: Gelasio, Georgia, "Times New Roman", serif;
    line-height: 1.5;
}
.of-cert-membrete {
    text-align: center;
    margin-bottom: 2rem;
}
.of-cert-logo {
    max-width: 340px;
    width: 100%;
    height: auto;
}
.of-logo-informe {
    max-width: 220px;
}
.of-cert-parrafo {
    text-indent: 2em;
    margin-bottom: 1rem;
}
.of-cert-certifica {
    font-weight: 700;
    margin: 1.5rem 0;
}
.of-cert-firma {
    display: flex;
    justify-content: space-between;
    margin: 2rem 2rem 1.5rem;
    font-weight: 700;
}
.of-cert-firma-hueco {
    height: 110px;
    display: flex;
    align-items: center;
}
.of-cert-sello {
    max-height: 110px;
    width: auto;
    opacity: 0.85;
}
.of-cert-firma-img {
    max-height: 70px;
    width: auto;
}
.of-cert-caja {
    border: 1px solid #000;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.of-cert-legal {
    font-size: 0.78rem;
    color: #333;
    margin-bottom: 0.5rem;
}

/* Ficha del Libro de Bautismos: el folio escaneado acompaña al desplazarse por los campos, en vez
   de quedarse arriba y obligar a subir y bajar. Con desplazamiento propio por si la imagen es
   más alta que la pantalla. */
.of-folio-fijo {
    position: sticky;
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}
@media (max-width: 991px) {
    .of-folio-fijo {
        position: static;
        max-height: none;
    }
}

/* Notificación/certificado de Bautismo (Despacho): imita el modelo real en papel (membrete con
   foto de la iglesia, título gótico "Archidiócesis de Toledo", marco decorativo). */
.of-bautismo {
    background: #fff;
    color: #000;
    padding: 1.5rem;
    max-width: 750px;
    margin: 0 auto;
    font-family: Arimo, "Liberation Sans", Arial, sans-serif;
}
.of-bautismo-marco {
    /* Medido del documento Word original: la marca de agua llega casi hasta el borde físico del
       folio (~2mm), y el texto respeta los márgenes normales de página (arriba 10mm, resto 15mm).
       El margen de página reducido a 5mm se declara en BautismoCertificado.razor (solo esa ruta,
       no afecta al informe ni a los certificados de donante); este padding añade lo que falta
       hasta esas medidas: 5+5=10mm arriba/abajo, 5+10=15mm a los lados. */
    padding: 5mm 10mm;
    box-sizing: border-box;
    /* Columna flex para que .of-bautismo-pie (cierre + sello/firma) baje a la base del folio con
       margin-top:auto, en vez de quedarse pegado al texto dejando medio folio vacío debajo. */
    display: flex;
    flex-direction: column;
    background-image: url(/img/marca-agua-bautismo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Sin esto, la mayoría de navegadores no imprimen imágenes de fondo aunque "Gráficos de
       fondo" esté marcado en el diálogo de impresión — hay que pedirlo explícitamente. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.of-bautismo-membrete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.of-bautismo-foto-img {
    width: 68px;
    height: 88px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
}
.of-bautismo-membrete-texto {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
}
.of-bautismo-titulo {
    font-weight: 700;
    font-size: 1.15rem;
    text-align: center;
    margin-bottom: 1rem;
}
.of-bautismo-gotico {
    font-family: "UnifrakturMaguntia", "Old English Text MT", "Blackletter686 BT", cursive, serif;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.of-bautismo-linea {
    width: 60%;
    margin: 0 auto 1.5rem;
    border-top: 3px double #000;
    /* Bootstrap pone hr{opacity:.25}: sin esto la doble línea sale gris clara, en el Word es negra. */
    opacity: 1;
}
.of-bautismo-firma {
    display: flex;
    justify-content: space-between;
    margin: 2.5rem 3rem 0;
}
.of-bautismo-sello {
    max-height: 110px;
    opacity: 0.9;
}
.of-bautismo-firma-img {
    max-height: 65px;
}
.of-bautismo-firma-hueco {
    height: 110px;
}
.of-bautismo-pie {
    margin-top: auto;
    padding-bottom: 1rem;
}

@media print {
    .of-bautismo {
        padding: 0;
    }
    .of-bautismo-marco {
        break-inside: avoid;
        page-break-inside: avoid;
        /* Que la marca de agua llegue hasta el final del folio aunque el texto sea corto. Con el
           margen de página a 5mm (ver BautismoCertificado.razor) el área imprimible mide ~287mm
           de alto. El salto a 2 páginas de la vez anterior fue por un margen de página que no se
           aplicaba bien (@page con nombre, poco soportado), no por falta de margen de seguridad
           aquí — ya solucionado usando un <style> propio de esa página. Con el mecanismo bueno,
           22mm de margen de seguridad es de sobra. */
        /* 2026-09-17: subido de 265 a 275mm una vez quitado el padding del layout en impresión
           (antes el margen real era ~13,5mm, ahora los 5mm calibrados) y con fuentes autoalojadas
           (el alto del texto ya no varía entre ordenadores). Quedan ~12mm de holgura. */
        min-height: 275mm;
    }
    .of-bautismo-sello {
        max-height: 95px;
    }
    .of-bautismo-firma-img {
        max-height: 55px;
    }
}

/* Aviso de celebración de matrimonio: formulario propio de la parroquia (no un documento oficial
   diocesano como el de bautismo), con una franja de recorte y un volante de respuesta para que la
   parroquia destino certifique la anotación marginal. */
.of-aviso-mat {
    background: #fff;
    color: #000;
    padding: 1.5rem;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.4;
    font-family: Arimo, "Liberation Sans", Arial, sans-serif;
}
.of-aviso-mat p {
    margin-bottom: 0.75rem;
}
.of-aviso-mat-membrete {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}
.of-aviso-mat-foto-img {
    width: 56px;
    height: 72px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
}
.of-aviso-mat-membrete-texto {
    font-size: 0.85rem;
    line-height: 1.3;
}
.of-aviso-mat-linea {
    border: none;
    border-top: 2px solid var(--color-marca);
    margin: 0 0 1.5rem;
    opacity: 1;
}
.of-aviso-mat-titulo {
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
    color: var(--color-marca);
    margin-bottom: 1.5rem;
}
.of-aviso-mat-firma {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 3rem 0.75rem;
}
.of-aviso-mat-sello {
    max-height: 62px;
    opacity: 0.9;
}
.of-aviso-mat-firma-img {
    max-height: 38px;
}
.of-aviso-mat-firma-hueco {
    height: 62px;
}
.of-aviso-mat-envio {
    border: 1px solid var(--color-marca);
    border-radius: 6px;
    padding: 0.6rem 1.25rem;
    margin: 0.75rem 3rem;
}
.of-aviso-mat-envio-titulo {
    font-weight: 700;
    color: var(--color-marca);
    margin-bottom: 0.4rem;
}
.of-aviso-mat-corte {
    text-align: center;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-muted);
    border-top: 1px dashed var(--color-muted);
    margin: 1rem 0;
    padding-top: 0.5rem;
}
.of-aviso-mat-footer {
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-muted);
    margin-top: 1rem;
}

@media print {
    .of-aviso-mat {
        padding: 0;
    }
    .of-aviso-mat p {
        margin-bottom: 0.45rem;
    }
    .of-aviso-mat-titulo,
    .of-aviso-mat-linea {
        margin-bottom: 0.75rem;
    }
    .of-aviso-mat-firma {
        margin: 0.5rem 1.5rem 0.75rem;
    }
    .of-aviso-mat-envio {
        margin: 0.75rem 1.5rem;
    }
}

/* Impresión del certificado IRPF de donantes. Tiene que ir DESPUÉS de las reglas base .of-cert-*
   (misma especificidad: gana la última) — antes estaba delante de ellas y no se aplicaba nunca.
   Valores moderados, verificados a 1 página con nombre, domicilio e importe en letras largos. */
@media print {
    .of-certificado {
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        line-height: 1.3;
    }
    .of-cert-logo {
        max-width: 260px;
    }
    .of-cert-membrete {
        margin-bottom: 0.75rem;
    }
    .of-cert-parrafo {
        margin-bottom: 0.5rem;
    }
    .of-cert-certifica {
        margin: 0.5rem 0;
    }
    /* Hueco generoso bajo SELLO / EL PÁRROCO: el recuadro de deducción no debe quedar pegado al
       sello ni dejar sin sitio para firmar a mano cuando la casilla de firma va desmarcada. */
    .of-cert-firma {
        margin: 0.75rem 2rem 1.25rem;
    }
    .of-cert-firma-hueco {
        height: 110px;
    }
    .of-cert-sello {
        max-height: 95px;
    }
    .of-cert-firma-img {
        max-height: 60px;
    }
    .of-cert-caja {
        break-inside: avoid;
        page-break-inside: avoid;
        padding: 0.4rem 0.75rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.72rem;
        line-height: 1.2;
    }
    .of-cert-legal {
        font-size: 0.66rem;
        line-height: 1.15;
        margin-bottom: 0.25rem;
        orphans: 1;
        widows: 1;
    }
}

/* ===== Página pública "Ser padrino o madrina" (/padrinos) ===== */

.padrinos-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0.5rem 0 3rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
}

.padrinos-portada {
    text-align: center;
    padding: 1.5rem 0 1rem;
}
.padrinos-ornamento {
    color: var(--color-marca);
    letter-spacing: 0.4em;
    margin: 0.25rem 0;
}
.padrinos-portada h1 {
    color: var(--color-marca);
    margin: 0.25rem 0;
    font-size: 1.85rem;
}
.padrinos-subtitulo {
    font-style: italic;
    color: var(--color-muted);
    margin: 0 0 0.5rem;
}
.padrinos-ficha {
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 1rem 0 0.5rem;
    line-height: 1.5;
}
.padrinos-cita-cabecera {
    font-style: italic;
    margin-top: 1rem;
}

.padrinos-seccion {
    margin-top: 2.25rem;
}
.padrinos-seccion h2 {
    color: var(--color-marca);
    border-bottom: 2px solid var(--color-marca);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
}
.padrinos-seccion h3 {
    color: var(--color-marca-oscuro);
    font-size: 1.08rem;
    margin: 1.5rem 0 0.5rem;
}
.padrinos-seccion p {
    margin: 0 0 1rem;
}

.padrinos-callout {
    background: #f5e9eb;
    border: 1px solid #e0c9cd;
    border-left: 4px solid var(--color-marca);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.padrinos-callout p:last-child {
    margin-bottom: 0;
}
.padrinos-callout-titulo {
    font-weight: 700;
    color: var(--color-marca-oscuro);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.padrinos-callout-fuente {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin-top: 0.25rem;
}
.padrinos-callout-nota {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-style: normal;
}

.padrinos-pullquote {
    text-align: center;
    font-style: italic;
    font-weight: 600;
    color: var(--color-marca-oscuro);
    font-size: 1.15rem;
    margin: 1.5rem 0.5rem;
    line-height: 1.5;
}

.padrinos-tabla-envoltorio {
    overflow-x: auto;
    margin: 1.25rem 0;
}
.padrinos-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.padrinos-tabla th {
    background: var(--color-marca);
    color: #fff;
    text-align: left;
    padding: 0.6rem 0.75rem;
}
.padrinos-tabla td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.padrinos-tabla tbody tr:nth-child(even) {
    background: var(--color-bg);
}

.padrinos-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}
.padrinos-tarjeta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.1rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.padrinos-tarjeta-icono {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}
.padrinos-tarjeta-titulo {
    color: var(--color-marca-oscuro);
    margin-bottom: 0.5rem;
}
.padrinos-tarjeta p {
    font-size: 0.9rem;
    margin: 0 0 0.4rem;
}
.padrinos-tarjeta p:last-child {
    margin-bottom: 0;
}

.padrinos-compromisos {
    padding-left: 1.4rem;
    margin: 1.25rem 0;
}
.padrinos-compromisos li {
    margin-bottom: 0.9rem;
}
.padrinos-compromisos li::marker {
    color: var(--color-marca);
    font-weight: 700;
}

.padrinos-oracion {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.25rem 0;
    text-align: center;
    font-style: italic;
}
.padrinos-oracion p {
    margin: 0 0 0.5rem;
}
.padrinos-oracion-amen {
    font-style: normal;
    font-weight: 700;
    color: var(--color-marca);
    margin-top: 0.75rem !important;
}

.padrinos-seccion-final {
    margin-bottom: 1rem;
}
.padrinos-cita-final {
    text-align: center;
    font-style: italic;
    color: var(--color-muted);
    margin-top: 1.5rem;
}
.padrinos-cita-final-ref {
    font-style: normal;
    font-size: 0.85rem;
}

@media (max-width: 560px) {
    .padrinos-page {
        font-size: 1rem;
    }
    .padrinos-portada h1 {
        font-size: 1.5rem;
    }
    .padrinos-tarjetas {
        grid-template-columns: 1fr;
    }
    .padrinos-tabla {
        font-size: 0.86rem;
    }
}

/* ===== Equipo de Catequesis: cada aviso en su propia tarjeta (RenderMensaje.razor) — antes iban
   todos seguidos en el mismo bloque blanco, sin separación clara entre uno y otro. ===== */
.aviso-equipo-tarjeta {
    background: #fbf4f5;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-marca);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-bottom: 18px;
}
.aviso-equipo-tarjeta:last-child {
    margin-bottom: 0;
}
.aviso-equipo-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 6px;
}
.aviso-equipo-autor {
    color: var(--color-marca-oscuro);
    font-size: 0.95rem;
}
.aviso-equipo-fecha {
    color: var(--color-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}
/* Agrupa fecha + el botón "⋯" para que no se separen al partir en dos líneas en móvil (el padre,
   .aviso-equipo-cabecera, pasa a column ahí: ver el @media de abajo). */
.aviso-equipo-cabecera-derecha {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Discreto a propósito (editar/borrar no son la acción principal de la tarjeta): solo tres
   puntos, sin fondo ni borde hasta que se usa. 44px de zona de toque aunque el icono sea
   pequeño, para no costar de acertar en móvil. */
.aviso-equipo-menu {
    padding: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-muted);
    text-decoration: none;
}
.aviso-equipo-menu:hover,
.aviso-equipo-menu:focus {
    color: var(--color-marca);
}
.aviso-equipo-texto {
    margin: 0;
}
.aviso-equipo-texto-truncado {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aviso-equipo-vermas {
    padding: 2px 0;
    font-size: 0.85rem;
    color: var(--color-marca);
}
.aviso-equipo-vermas:hover,
.aviso-equipo-vermas:focus {
    color: var(--color-marca-oscuro);
}

/* Cabecera de panel que además es un botón plegable (p. ej. "Ajustes del canal" en Equipo de
   Catequesis) — mismo aspecto que .panel-cabecera, pero reseteando los estilos por defecto de
   <button> (borde, ancho, tipografía) para que se vea igual que las cabeceras normales. */
button.panel-cabecera {
    display: block;
    width: calc(100% + 48px);
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
/* Cuando el panel plegable no tiene nada debajo (plegado): sin esto, el margen inferior normal
   de .panel-cabecera (20px) más el padding del propio .card-panel (24px) dejaban una franja
   blanca vacía bajo la barra. Se añade solo en ese caso — con el panel desplegado, el hueco lo
   pone en su lugar el primer elemento de dentro (ver mt-3 en Equipo.razor), para no desplazar
   mal ese contenido. */
.panel-cabecera-vacio {
    margin-bottom: -24px;
}

@media (max-width: 560px) {
    .aviso-equipo-tarjeta {
        padding: 10px 12px;
    }
    .aviso-equipo-cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ===== Programación del curso (Catequesis): lista de sesiones y revisión del material ===== */
.sesiones-lista { display: flex; flex-direction: column; gap: 10px; }
.sesion-fila {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--color-surface);
}
.sesion-fila.sesion-pasada { opacity: 0.55; }
.sesion-fila.sesion-pasada:hover, .sesion-fila.sesion-pasada:focus-within { opacity: 1; }
.sesion-fila.sesion-proxima { border-left-color: var(--color-marca); background: #fdf7f3; }
.sesion-fila.sesion-seleccionada { box-shadow: 0 0 0 2px var(--color-marca); }
.sesion-cabecera { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.sesion-numero {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-marca); color: #fff; font-weight: 700;
}
.sesion-pasada .sesion-numero { background: var(--color-muted); }
.sesion-texto { min-width: 0; }
.sesion-fecha { font-size: 0.85rem; color: var(--color-muted); text-transform: capitalize; }
.sesion-titulo { font-weight: 600; font-size: 1.05rem; }
.sesion-liturgia { font-size: 0.9rem; color: var(--color-muted); }
.sesion-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sesion-proxima-panel { border-left: 4px solid var(--color-marca); }
.sesion-proxima-panel .sesion-titulo { font-size: 1.2rem; }
@media (max-width: 575.98px) {
    .sesion-botones .btn { flex: 1 1 100%; }
}
.material-miniatura {
    width: 90px; height: auto; border: 1px solid var(--color-border); border-radius: 4px;
    background: #fff; display: block;
}
.material-tabla td { vertical-align: top; }