/* ======================================================================
   main.css — CSS propio de la aplicación (no del tema vendor).
   Creado 13-sep-2026 para no mezclar código propio con style.css; mismo
   criterio que main.js para JS. Cargado después de style.css en
   layouts/app.blade.php — puramente aditivo, no redefine reglas
   existentes salvo que la sección lo diga explícitamente.
   Organizado por secciones fechadas — ver el comentario de cada una
   para saber qué vistas la usan.
   ====================================================================== */

/* ----------------------------------------------------------------------
   Admisión: Procesos y Cepre (/procesos, /cepreunaj)
   Usado por admission-processes-component.blade.php, admission-
   processes/index.blade.php y admission-processes/detail.blade.php.
   ---------------------------------------------------------------------- */
        /* General Styles */
        .date-container {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: var(--tp-grey-1);
            padding: 0 5px;
            border: 1px solid var(--tp-theme-1);
            display: flex;
            align-items: center;
            z-index: 2;
        }

        .date-container .group-date {
            background-color: var(--tp-theme-1);
            color: white;
            flex-direction: column;
            padding: 0 5px;
        }

        .date-container .day {
            font-size: 40px;
        }

        .date-container .month {
            font-size: 20px;
            margin-top: -10px;
        }

        .date-container .year {
            font-size: 28px;
            transform: rotate(-90deg);
            font-weight: 700;
            color: var(--tp-theme-1);
            margin: 53px 5px 0 8px;
            width: .5em;
            text-align: center;
            line-height: 1em;
        }

        /* Event Details Styles */
        .tp-event-details__social-box a {
            border: 1px solid var(--tp-theme-4);
        }

        .tp-event-details__social-box a:hover {
            border: 1px solid var(--tp-common-orange);
        }

        .rc__post-content {
            display: flex;
            align-items: flex-start;
        }

        .rc__post-content:hover i, .rc__post-content:hover a {
            cursor: pointer;
            color: var(--tp-common-orange);
        }

        .icon-container {
            margin-right: 10px;
            font-size: 28px;
            color: var(--tp-theme-2);
        }

        .icon-container i {
            display: block;
        }

        .text-container {
            display: flex;
            flex-direction: column;
        }

        .text-container .rc__meta {
            font-size: 14px;
        }

        /* Requirements Styles */
        .requirements table {
            width: 100%;
            border-collapse: collapse;
            overflow: hidden;
            font-size: 16px;
            background: var(--tp-grey-1);
            color: var(--tp-text-body);
            border: 4px solid var(--tp-grey-1);
            line-height: 25px;
        }

        .requirements th, .requirements td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 5px solid #ffffff;
        }

        .requirements tr:last-child td {
            border-bottom: none;
        }

        .requirements td:first-child {
            background-color: white;
        }

        .requirements th {
            background: var(--tp-theme-1);
            color: white;
        }

        .requirements td i {
            color: var(--tp-theme-1);
            font-size: 12px;
        }

        .requirements td a {
            color: var(--tp-grey-3);
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
            padding: 2px 8px;
            background-color: var(--tp-theme-2);
            border-radius: 20px;
            text-transform: uppercase;
            font-size: 12px;
        }

        .requirements td a:hover {
            background-color: var(--tp-theme-1);
        }

        .requirements table svg {
            width: 64px;
            height: 64px;
        }

        .requirements table svg path {
            fill: var(--tp-theme-2);
        }

        /* Price Table Styles */
        .price-table {
            width: 100%;
            border-collapse: collapse;
        }

        .price-table tr:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        }

        .price-table tr td {
            border-left: 1px solid rgba(0, 0, 0, 0.05);
            padding: 12px 15px;
            border-bottom: 1px solid #e0e0e0;
            font-size: 16px;
        }

        .price-table tr td:first-child {
            border-left: 0 none;
        }

        .price-table tr td:not(:first-child) {
            text-align: center;
        }

        .price-table tr:nth-child(even) {
            background-color: #FFFFFF;
        }

        .price-table tr:hover {
            background-color: #f5f5f5;
        }

        .price-table tr td:hover {
            background-color: #f0f0f0;
        }

        .price-table tr.price-table-head td:hover {
            background-color: var(--tp-theme-4);
        }

        .price-table i {
            color: var(--tp-theme-2);
        }

        .price-table tr:nth-child(2n) td:nth-child(3),
        .price-table tr td:nth-child(2) {
            background-color: rgba(216, 214, 227, 0.15);
            padding: 8px 48px;
        }

        .price-table tr:nth-child(2n) td:nth-child(3) {
            background-color: rgba(216, 214, 227, 0.25);
        }

        .price-table tr.price-table-head td {
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .price-table tr.price-table-head {
            background-color: var(--tp-theme-2);
            color: #FFFFFF;
        }

        .price-table td.price {
            color: var(--tp-common-orange);
            padding: 16px 24px;
            font-size: 20px;
            font-weight: 600;
        }

        .price-table td.price a, .btn-primary-rounded {
            background-color: var(--tp-theme-2);
            color: #FFFFFF;
            padding: 12px 32px;
            margin-top: 16px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            display: inline-block;
            border-radius: 64px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        .price-table td.price a::before, .btn-primary-rounded::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 50%;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        .price-table td.price a:hover::before, .btn-primary-rounded:hover::before {
            transform: translate(-50%, -50%) scale(4);
            opacity: 1;
        }

        .price-table td.price a:hover, .btn-primary-rounded:hover {
            transform: translateY(-10px);
        }

        .price-table td.price-table-popular {
            border-top: 3px solid var(--tp-theme-2);
            color: var(--tp-theme-2);
            text-transform: uppercase;
            font-size: 12px;
            padding: 12px 48px;
            font-weight: 700;
        }

        .price-table .price-blank {
            background-color: #fafafa;
            border: 0 none;
        }

        /* Shifts Styles */
        .shifts table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            overflow: hidden;
            font-size: 16px;
            background: white;
            color: var(--tp-text-body);
            font-weight: 600;
        }

        .shifts th, .shifts td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .shifts th {
            background: var(--tp-theme-2);
            color: white;
        }

        .shifts tr:hover {
            background-color: #f5f5f5;
        }

        .shifts tr td:hover {
            background-color: #f0f0f0;
        }

        /* Event Title Styles */
        .tp-event-details__title {
            align-items: center;
            position: relative;
            padding-left: 25px;
            margin: 35px 0 20px 0;
        }

        .tp-event-details__title::before {
            content: "";
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            left: 0;
            width: 20px;
            height: 100%;
            background-color: var(--tp-theme-2);
        }

        /* Subtitle Styles for Table Titles */
        .tp-table-subtitle {
            font-size: 1.3rem;
            color: var(--tp-theme-2);
            padding-left: 10px;
            margin: 5px 0 0 0;
            position: absolute;
            font-weight: 500;
            display: inline-block;
            z-index: 999;
            text-transform: uppercase;
        }

        .tp-table-subtitle::before {
            content: "";
            position: absolute;
            top: 42%;
            transform: translateY(-50%);
            left: 0;
            width: 3px;
            height: 120%;
            background-color: var(--tp-theme-2);
        }


        /* Event Status Styles */
        .process-status {
            color: var(--tp-theme-2);
        }

        .finished-status {
            color: var(--tp-common-green);
        }

        .pending-status {
            color: var(--tp-common-orange);
        }

        /* Funfact Icon Styles */
        .tp-funfact-2__item svg {
            width: 68px;
            height: 68px;
            animation: icon-bounce 0.8s 1;
            margin-top: -24px;
        }

        /* Funfact Background Styles */
        .process-status-bg {
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.36);
            background: linear-gradient(to right, #5268b7 0%, #5268b7 50%, #052493 50%, #052493 100%);
        }

        .process-status-bg .tp-funfact-2__icon span {
            background-color: #052493;
        }

        .process-status-bg:hover .tp-funfact-2__icon span::after {
            background-color: rgba(27, 53, 93, 0.64);
        }

        .finished-status-bg {
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.36);
            background: linear-gradient(to right, #21a23d 0%, #21a23d 50%, #1b8131 50%, #1b8131 100%);
        }

        .finished-status-bg .tp-funfact-2__icon span {
            background-color: #1b8131;
        }

        .finished-status-bg:hover .tp-funfact-2__icon span::after {
            background-color: rgba(17, 91, 33, 0.64);
        }

        .pending-status-bg {
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.36);
            background: linear-gradient(to right, #e99c7c 0%, #e99c7c 50%, #fe7f4c 50%, #fe7f4c 100%);
        }

        .pending-status-bg .tp-funfact-2__icon span {
            background-color: #fe7f4c;
        }

        .pending-status-bg:hover .tp-funfact-2__icon span::after {
            background-color: rgba(150, 71, 39, 0.64);
        }

        /* Contenedor principal */
        .dates-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.5rem;
            margin: 1.5rem 0;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Breakpoints responsive */
        @media (min-width: 576px) {
            .dates-container {
                gap: 0.25rem;
            }
        }

        @media (min-width: 768px) {
            .dates-container {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.5rem;
            }
        }

        @media (min-width: 992px) {
            .dates-container {
                grid-template-columns: 1fr;
            }

            .date-card {
                padding: 0.75rem;
            }

            .date-icon {
                width: 36px;
                height: 36px;
            }

            .date-icon i {
                font-size: 1.1rem;
            }

            .date-title {
                font-size: 0.7125rem;
            }

            .date-time {
                font-size: 0.8rem;
            }
        }

        @media (min-width: 1200px) {
            .dates-container {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.3rem;
            }
        }

        /* Tarjetas de fecha */
        .date-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 1.2rem;
            border: 1px solid rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 0.6rem;
            width: 100%;
            box-sizing: border-box;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .date-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
            border-color: #12419f;
        }

        .date-icon {
            background: var(--tp-theme-2);
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
        }

        .date-icon i {
            color: white;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1;
        }

        /* Contenido */
        .date-content {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .date-title {
            color: #666;
            font-size: 0.775rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0 0 0.375rem 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .date-time {
            color: #12419f;
            font-weight: 600;
            font-size: 0.8375rem;
            display: block;
            word-wrap: break-word;
            line-height: 1.3;
        }

        /* Ajustes responsive específicos para móviles pequeños */
        @media (max-width: 375px) {
            .date-card {
                padding: 0.975rem;
                gap: 0.85rem;
            }

            .date-icon {
                min-width: 36px;
                width: 36px;
                height: 36px;
            }

            .date-icon i {
                font-size: 1.1rem;
            }

            .date-title {
                font-size: 0.8125rem;
            }

            .date-time {
                font-size: 0.775rem;
            }
        }

        /* Ajustes para pantallas extra grandes */
        @media (min-width: 1400px) {
            .dates-container {
                gap: 0.5rem;
            }

            .date-card {
                padding: 1rem;
            }

            .date-icon {
                width: 40px;
                height: 40px;
            }

            .date-icon i {
                font-size: 1.2rem;
            }

            .date-title {
                font-size: 0.8rem;
            }

            .date-time {
                font-size: 0.875rem;
            }
        }

        /* Barra de progreso */
        .progress {
            border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--tp-grey-2);
        }

        .progress-bar {
            border-radius: 0;
            transition: width 1s ease;
        }

        .progress-count {
            color: #12419f;
            text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
            font-size: 0.89rem;
        }

        /* Botón CTA */
        .cta-button {
            display: inline-block;
            background: linear-gradient(45deg, var(--tp-theme-1), var(--tp-theme-2));
            color: white;
            padding: 0.7rem 2.2rem;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(18, 65, 159, 0.4);
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
            position: relative;
            overflow: hidden;
        }

        .cta-button:hover {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(18, 65, 159, 0.6);
        }

        .cta-button:hover::before {
            transform: translateX(100%);
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: transform 0.6s ease;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        /* School List Styles */
        .list-school .rc__post {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .list-school .rc__post-thumb {
            margin-right: 15px;
        }

        .list-school .content-school {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .list-school .rc__meta {
            align-self: flex-start;
            text-transform: uppercase;
        }

        .list-school .rc__meta span {
            font-size: 12px;
        }

        .list-school .rc__post-title {
            margin-top: auto;
        }

        .list-school .rc__post-thumb svg {
            width: 54px;
            height: 54px;
        }

        .list-school .rc__post-thumb {
            padding: 10px;
            background-color: var(--tp-theme-2);
            border-radius: 10px;
        }

        .list-school .rc__post-thumb svg path, .list-school .rc__post-thumb svg polygon {
            fill: white;
        }

        .list-school a:hover .rc__meta, .list-school a:hover .rc__post-title {
            color: var(--tp-common-orange) !important;
        }

        .document-container {
            width: 100%;
            height: 65vh;
            background-image: linear-gradient(to bottom, var(--tp-grey-1), var(--tp-grey-1));
            overflow-y: auto;
            padding: 20px;
            box-sizing: border-box;
            border-top: 3px solid rgba(5, 36, 147, 0.5);
            border-bottom: 3px solid rgba(5, 36, 147, 0.5);
            position: relative;
            transition: height 0.3s ease, width 0.3s ease, left 0.3s ease, top 0.3s ease;
        }

        .document-container.expanded {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 9999;
        }

        .expand-button {
            position: sticky;
            bottom: 0;
            margin-right: 20px;
            z-index: 99;
            padding: 10px;
            font-size: 18px;
            background-color: var(--tp-theme-1, #007bff);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .expand-button:hover {
            background-color: var(--tp-theme-2, #0056b3);
            transform: scale(1.05);
        }

        .expand-button:active {
            transform: scale(0.95);
        }

        .document-container.expanded .expand-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 9999;
        }

        .page {
            width: 90%;
            max-width: 210mm; /* Ancho máximo de A4 */
            aspect-ratio: 1 / 1.4142; /* Proporción A4 (1:√2) */
            margin: 0 auto 20px;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .page-content {
            position: absolute;
            top: 5%;
            left: 5%;
            right: 5%;
            bottom: 5%;
            overflow-y: auto;
            padding: 20px;
            box-sizing: border-box;
        }

        .school-title {
            font-size: clamp(16px, 4vw, 22px);
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 10px;
            text-align: center;
        }

        .admission-header {
            font-size: clamp(14px, 3vw, 18px);
            color: #34495e;
            margin-bottom: 20px;
            text-align: center;
        }

        .results-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-top: 20px;
        }

        .results-table th, .results-table td {
            padding: 3px 10px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .results-table th {
            background-color: var(--tp-theme-2);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: clamp(10px, 2vw, 12px);
        }

        .results-table td {
            font-size: clamp(9px, 2vw, 11px);
        }

        .results-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .results-table tr:hover {
            background-color: #f0f0f0;
            transition: background-color 0.3s ease;
        }

        /* Anchos personalizados para cada columna */
        .results-table th:nth-child(1),
        .results-table td:nth-child(1) {
            width: 10%;
        }

        .results-table th:nth-child(2),
        .results-table td:nth-child(2) {
            width: 30%;
        }

        .results-table th:nth-child(3),
        .results-table td:nth-child(3) {
            width: 25%;
        }

        .results-table th:nth-child(4),
        .results-table td:nth-child(4) {
            width: 20%;
        }

        .results-table th:nth-child(5),
        .results-table td:nth-child(5) {
            width: 15%;
            text-align: right;
        }

        @media screen and (max-width: 600px) {
            .page-content {
                padding: 10px;
            }

            .results-table th, .results-table td {
                padding: 8px;
            }
        }

        /*
         * El stylesheet global (assets/page/css/style.css) quita el outline de
         * foco de todos los enlaces/botones del sitio sin reemplazo. Corregirlo
         * ahí afectaría todas las páginas; aquí se repone solo para los
         * controles interactivos de este módulo (listado y detalle de
         * procesos), sin tocar el resto del sitio.
         */
        /* Badge de estado sobre la imagen del listado (mismos colores que
           el aviso de estado del detalle: .process-status-bg / .finished-status-bg /
           .pending-status-bg) para que ambas vistas hablen el mismo idioma visual. */
        .process-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .3px;
            color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
        }

        .process-badge--process {
            background-color: #052493;
        }

        .process-badge--finished {
            background-color: #1b8131;
        }

        .process-badge--pending {
            background-color: #fe7f4c;
        }

        /* Placeholder cuando el proceso no tiene imagen o el archivo ya no
           existe en disco (ver AdmissionProcess::getHasImageAttribute) */
        .tp-donate__thumb img.process-thumb-placeholder,
        .tp-event-details__thumb img.process-thumb-placeholder {
            object-fit: contain;
            padding: 15% 30%;
            background-color: var(--tp-grey-1, #f2f7f7);
        }

        /* Aviso cuando no hay procesos abiertos en el listado */
        .process-empty-banner {
            display: flex;
            align-items: center;
            gap: 16px;
            background-color: var(--tp-grey-1, #f2f7f7);
            border-left: 4px solid var(--tp-theme-2, #052493);
            border-radius: 6px;
            padding: 18px 22px;
            margin-bottom: 30px;
        }

        .process-empty-banner i {
            font-size: 28px;
            color: var(--tp-theme-2, #052493);
        }

        .process-empty-banner strong {
            display: block;
            color: var(--tp-theme-1, #243369);
            font-size: 16px;
        }

        .process-empty-banner span {
            color: #666;
            font-size: 14px;
        }

        /* Mensaje corto de estado bajo el título del detalle (reemplaza el
           bloque grande que antes vivía solo en el sidebar, y que en móvil
           quedaba enterrado al final de la página por el orden del DOM).
           Mismos colores sólidos que .process-badge (la insignia sobre la
           imagen) para que ambas lecturas del estado hablen el mismo idioma
           visual, en vez de un tono suave desconectado del resto. */
        .process-status-message {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 20px;
            padding: 8px 18px;
            border-radius: 30px;
            color: #fff;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
        }

        .process-status-message--process {
            background-color: #052493;
        }

        .process-status-message--finished {
            background-color: #1b8131;
        }

        .process-status-message--pending {
            background-color: #fe7f4c;
        }

        /* Aviso en el lugar del botón cuando el proceso no está abierto, en
           vez de dejar el espacio vacío sin explicación. */
        .process-closed-notice {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 26px;
            border-radius: 50px;
            background-color: var(--tp-grey-1, #f2f7f7);
            color: #666;
            font-weight: 600;
            border: 1px dashed #ccc;
        }

        /* Sección "Pasos para inscribirse". Tarjeta + hover-lift igual que
           .date-card (mismo patrón que ya usan las fechas del detalle),
           para que se sienta parte del mismo diseño y no un bloque de texto
           plano aparte. */
        .process-steps {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 35px;
        }

        .process-step {
            position: relative;
            display: flex;
            gap: 18px;
            align-items: flex-start;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .07);
            border-radius: 14px;
            padding: 18px 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .process-step:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(5, 36, 147, .1);
            border-color: var(--tp-theme-2, #052493);
        }

        .process-step__number {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--tp-theme-1, #243369), var(--tp-theme-2, #052493));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
            box-shadow: 0 4px 10px rgba(5, 36, 147, .3);
        }

        .process-step__body {
            padding-top: 3px;
        }

        .process-step__title {
            margin: 0 0 5px;
            color: var(--tp-theme-1, #243369);
            font-size: 16.5px;
            font-weight: 700;
        }

        .process-step__desc {
            color: #5a6472;
            font-size: 14.5px;
            line-height: 1.65;
        }

        .process-step__desc p {
            margin-bottom: 10px;
        }

        .process-step__desc p:last-child {
            margin-bottom: 0;
        }

        /* Lista de documentos/requisitos dentro de un paso: check circular
           en vez de la viñeta por defecto del navegador, para que no se
           vea como texto plano suelto dentro de la tarjeta. */
        .process-step__desc ul {
            list-style: none;
            padding-left: 0;
            margin: 4px 0 10px;
        }

        .process-step__desc ul li {
            position: relative;
            padding-left: 26px;
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .process-step__desc ul li:last-child {
            margin-bottom: 0;
        }

        .process-step__desc ul li::before {
            content: '\2713';
            position: absolute;
            left: 0;
            top: 1px;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: var(--tp-theme-2, #052493);
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        /* Enlaces dentro de un paso (p.ej. el sitio de preinscripción):
           tratamiento de CTA en miniatura, no un enlace de texto genérico. */
        .process-step__desc a {
            color: var(--tp-theme-2, #052493);
            font-weight: 700;
            text-decoration: underline;
            text-decoration-color: rgba(5, 36, 147, .35);
            text-underline-offset: 3px;
            transition: color .2s ease;
        }

        .process-step__desc a:hover {
            color: var(--tp-theme-1, #243369);
        }

        /* Cifra o dato que debe resaltar dentro del texto (montos, número
           de cuenta) sin depender de negrita simple. */
        .process-highlight {
            display: inline-block;
            background: rgba(5, 36, 147, .08);
            color: var(--tp-theme-2, #052493);
            font-weight: 700;
            padding: 1px 9px;
            border-radius: 6px;
        }

        /* Aclaración secundaria dentro de un paso (una advertencia o nota,
           no la instrucción principal) — se distingue como un pequeño
           callout en vez de verse igual que el párrafo de arriba. */
        .process-step__desc p.process-note {
            margin-top: 2px;
            padding: 10px 14px;
            background: rgba(5, 36, 147, .045);
            border-left: 3px solid var(--tp-theme-2, #052493);
            border-radius: 0 8px 8px 0;
            color: #5a6472;
            font-size: 13.5px;
        }

        /* Barra fija de "Preinscribirme" en móvil/tablet (d-lg-none la oculta
           desde el breakpoint lg, donde el CTA normal ya es fácil de alcanzar).
           Se ajusta .scroll-top (botón "subir" del layout global) para que no
           quede tapado; el ajuste va aquí, escopado a este módulo, para no
           afectar el botón "subir" en el resto del sitio. */
        .process-sticky-cta {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1030;
            padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 40%);
        }

        .process-sticky-cta a {
            display: block;
            text-align: center;
            background: linear-gradient(45deg, var(--tp-theme-1, #243369), var(--tp-theme-2, #052493));
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            padding: 14px;
            border-radius: 50px;
            box-shadow: 0 4px 16px rgba(5, 36, 147, .35);
            text-decoration: none;
        }

        .process-sticky-cta a:hover,
        .process-sticky-cta a:focus-visible {
            color: #fff;
        }

        .process-sticky-cta a:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        @media (max-width: 991.98px) {
            .scroll-top.open {
                bottom: 96px;
            }
        }

        .cta-button:focus-visible,
        .tp-grey-btn:focus-visible,
        .back-button:focus-visible,
        .btn-primary-rounded:focus-visible,
        .basic-pagination a:focus-visible {
            outline: 2px solid var(--tp-theme-2, #052493);
            outline-offset: 2px;
        }
    

/* ---- Fase 3 (13-sep-2026): título de la tarjeta con recorte por líneas
   en vez de altura fija, y variante de una sola fecha para el Maestro ---- */
.tp-donate__title--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    min-height: 2.8em;
}

.dates-container--single {
    grid-template-columns: 1fr;
}

/* ----------------------------------------------------------------------
   Navegación: "dónde estoy" en cascada + botón del menú móvil
   Agregado 13-sep-2026. Usado por layouts/page/header.blade.php (menú de
   escritorio, class="tp-main-menu-content") y su clon en JS para el menú
   móvil (class="tp-main-menu-mobile", ver main.js sección 02). No
   redefine el :hover existente — el estado activo convive con él.
   ---------------------------------------------------------------------- */

/* Escritorio: ítem de primer nivel activo (o padre de un submenú activo).
   Acotado a .tp-header__main-menu (el contenedor real de escritorio) y no
   solo a .tp-main-menu-content, porque main.js clona ese <nav> entero —
   class incluida — dentro de .tp-main-menu-mobile; sin este contenedor
   extra, esta regla también pisaría el color del menú móvil. */
.tp-header__main-menu .tp-main-menu-content > ul > li.active > a.f-menu {
    position: relative;
    color: var(--tp-theme-1);
}

.tp-header__main-menu .tp-main-menu-content > ul > li.active > a.f-menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background-color: var(--tp-common-orange);
}

/* Escritorio: ítem de submenú activo — reutiliza el mismo subrayado que
   ya crece con :hover, en vez de un tratamiento nuevo sin relación. */
.tp-header__main-menu .tp-submenu > li.active > a {
    color: var(--tp-common-orange);
}

.tp-header__main-menu .tp-submenu > li.active > a::before {
    width: 100%;
    right: auto;
    left: 0;
}

/* Móvil (offcanvas oscuro): mismo naranja que ya usa el :hover ahí, con
   una barra izquierda para que se note incluso sin poder hacer hover. */
.tp-main-menu-mobile ul li.active > a {
    color: var(--tp-common-orange);
    padding-left: 12px;
    border-left: 3px solid var(--tp-common-orange);
}

/* Botón hamburguesa: antes sin ningún estilo propio (a diferencia del
   botón de cerrar, que sí lo tiene) y visualmente idéntico estando el
   menú abierto o cerrado. Ahora tiene su propio círculo con borde, y un
   estado "opened" distinto — el ícono además cambia a una X real vía JS
   (ver main.js), esto solo cubre el color/fondo del botón en sí. */
.tp-menu-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--tp-theme-2);
    background-color: transparent;
    padding: 0;
    transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.tp-menu-bar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tp-menu-bar i {
    font-size: 18px;
    color: var(--tp-theme-2);
    transition: color .3s ease;
}

.tp-menu-bar:hover {
    background-color: var(--tp-theme-2);
}

.tp-menu-bar:hover i {
    color: #fff;
}

.tp-menu-bar.opened {
    background-color: var(--tp-theme-1);
    border-color: var(--tp-theme-1);
}

.tp-menu-bar.opened i {
    color: #fff;
}

/* Red de seguridad para scroll horizontal en móvil: gran parte del
   contenido público (description, requirements, shifts, resultados) se
   renderiza crudo desde campos CKEditor — {!! !!} — así que si algún editor
   pega ahí una tabla ancha (CKEditor 5 la envuelve en <figure class="table">
   <table>...), hoy no hay nada que la contenga.
   Primer intento: forzar display:block + overflow-x:auto en la <table>
   misma. Se retiró — le rompe a CUALQUIER tabla (no solo .price-table) la
   coordinación interna fila/celda: verificado también en la tabla de
   "Turnos" (.shifts) — quedaba en table:734px pero cada <tr> en solo 373px
   (la mitad), viéndose angosta/rota en vez de ocupar el contenedor.
   Solución correcta: dejar la <table> con su display:table nativo (así
   <tr>/<td> se coordinan bien y la tabla ocupa el 100% del ancho
   disponible en escritorio) y mover overflow-x:auto al DIV contenedor —
   el mismo patrón que ya usan .payments/.weightings con su propio
   style="overflow-x:auto" inline. En móvil, si el contenido de alguna
   celda igual no cabe, este wrapper la vuelve scrolleable en vez de
   deformar la página (igual que .price-table, ya verificado en ambos
   tamaños). */
.tp-event-details__text,
.school-detail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tp-event-details__text table,
.school-detail table {
    width: 100%;
}

.tp-event-details__text figure.table,
.school-detail figure.table {
    margin: 0;
}