* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-azul: #1f3b73;
    --color-azul-claro: #b9dbed;
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F4F6F8;
    --color-gris-medio: #e0e0e0;
    --color-gris-oscuro: #333333;
    --color-azul-tecnologico: #007BFF;
    --color-rojo-acento: #1f3b73;
    --color-naranja-acento: #FF6B00;
    --font-principal: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-titulos: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --color-font-formularios: #0d3450;
}

body {
    margin: 0;
    font-family: var(--font-principal);
    color: var(--color-gris-oscuro);
    background-color: var(--color-blanco);
    line-height: 1.6;
    overflow-x: hidden;
}

.contenedor-pagina-cup.contenido-principal {
    padding: 20px;
}

.container-banner,
.container-bloque {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
}

.container-banner {
    max-width: 1200px;
}

.container-bloque {
    max-width: 1000px;
}

img {
    height: auto not;
}

.container-fluid {
    padding: 0 !important;
    padding: 2rem 0;
}

.seccion-header>.section-header-container>.container-fluid {
    padding: 0;
    margin: 0;
}

.seccion-footer>.section-footer-container>.container-fluid {
    margin: 0;
    padding: 0;
}

.info-interes-ck .section-title-ck {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

/* --- Estilos Generales y del Contenedor --- */
.flip-card-container-ck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* --- Contenedor de la Tarjeta Individual --- */
.flip-card-ck {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
    /* Esencial para el efecto 3D */
}

/* --- Contenedor Interno que Realiza el Giro --- */
.flip-card-inner-ck {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

/* --- Efecto de Giro al Pasar el Cursor --- */
.flip-card-ck:hover .flip-card-inner-ck {
    transform: rotateY(180deg);
}

/* --- Estilos para Ambas Caras (Frente y Dorso) --- */
.flip-card-front-ck,
.flip-card-back-ck {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Para Safari */
    backface-visibility: hidden;
    /* Oculta la cara trasera mientras está girando */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* --- Estilos de la Cara Frontal --- */
.flip-card-front-ck {
    background-color: #0A2351;
    /* Azul oscuro */
    color: white;
}

.flip-card-front-ck svg {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.flip-card-front-ck h3 {
    font-size: 20px;
}


/* --- Estilos de la Cara Trasera --- */
.flip-card-back-ck {
    background-color: #eaf2ff;
    /* Azul claro */
    color: #0A2351;
    transform: rotateY(180deg);
    /* La posiciona "detrás" inicialmente */
}

.flip-card-back-ck h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.flip-card-back-ck p {
    font-size: 14px;
    line-height: 1.5;
}

.flip-card-back-ck a {
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #0A2351;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.flip-card-back-ck a:hover {
    background-color: #3366CC;
}

/* ==========================================================================
   ESTILOS GENERALES PARA EL COMPONENTE DASHBOARD
   ========================================================================== */

/* Contenedor principal del componente */
.componente-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0, 30, 80, 0.08);
    border: 1px solid #e9ecef;
}

/* ==========================================================================
   PESTAÑAS DE NAVEGACIÓN (TABS)
   ========================================================================== */

/* Estilo de las pestañas */
.componente-dashboard .nav-tabs {
    border-bottom: 2px solid #dee2e6;
}

.componente-dashboard .nav-tabs .nav-item .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    /* Color de texto gris para pestañas inactivas */
    font-weight: 500;
    padding: 12px 20px;
    transition: all 0.2s ease-in-out;
}

/* Efecto hover para pestañas */
.componente-dashboard .nav-tabs .nav-item .nav-link:hover {
    border-bottom-color: #0062B5;
    color: #0062B5;
}

/* Estilo para la pestaña activa */
.componente-dashboard .nav-tabs .nav-item .nav-link.active {
    color: #070748;
    /* Color azul oscuro principal */
    font-weight: 700;
    border-bottom: 2px solid #0062B5;
    /* Línea azul para indicar actividad */
    background-color: transparent;
}


/* ==========================================================================
   TABLA DINÁMICA (PIVOT TABLE)
   ========================================================================== */

/* Contenedor de la UI de la tabla dinámica */
.pvtUi {
    color: #343a40;
}

/* Estilo para los selectores/dropdowns */
.pvtUi select {
    border: 1px solid #ced4da;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #f8f9fa;
    transition: border-color 0.2s ease;
}

.pvtUi select:focus {
    outline: none;
    border-color: #0062B5;
    box-shadow: 0 0 0 2px rgba(0, 98, 181, 0.2);
}

/* Estilo para los atributos arrastrables */
.pvtAttr {
    background-color: #e7f0f8;
    /* Un azul muy claro */
    border: 1px solid #b8d4ec;
    color: #0062B5;
    padding: 6px 12px;
    border-radius: 15px;
    cursor: move;
    font-size: 0.9em;
    margin: 2px !important;
}


/* ==========================================================================
   TABLA DE DATOS (DATATABLES)
   ========================================================================== */

/* Estilo general para la tabla */
.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
}

/* Cabecera de la tabla */
.dataTable thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    color: #070748;
    font-weight: 600;
    padding: 14px 18px;
    text-align: left;
}

/* Celdas y filas de la tabla */
.dataTable tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

/* Rayado de cebra para las filas */
.dataTable tbody tr:nth-of-type(even) {
    background-color: #fdfdfd;
}

/* Efecto hover en las filas */
.dataTable tbody tr:hover {
    background-color: #f1f5f9;
}

/* Botones de exportación (CSV, Excel, etc.) */
.dt-buttons .dt-button {
    background-color: #0062B5 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    margin: 0 5px 10px 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
}

.dt-buttons .dt-button:hover {
    background-color: #070748 !important;
    /* Más oscuro al pasar el mouse */
}

/* Campo de búsqueda */
.dataTables_filter input {
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 12px;
    margin-left: 8px;
    transition: border-color 0.2s ease;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: #0062B5;
    box-shadow: 0 0 0 2px rgba(0, 98, 181, 0.2);
}

/* Información de paginación (Mostrando X de Y) */
.dataTables_info {
    font-size: 0.9em;
    color: #6c757d;
    padding-top: 10px !important;
}

/* Controles de paginación */
.dataTables_paginate .paginate_button {
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    color: #0062B5 !important;
    cursor: pointer;
    background: white;
}

.dataTables_paginate .paginate_button:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* Botón de página actual */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #0062B5;
    color: white !important;
    border-color: #0062B5;
}

/* Botones de paginación deshabilitados */
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    background: #f8f9fa;
    color: #adb5bd !important;
    border-color: #dee2e6;
    cursor: not-allowed;
}

img {
    border-radius: 8px;
}

.card-menu-container-ck {
    display: grid;
    /* MAGIA RESPONSIVA: Crea columnas automáticas y las ajusta al tamaño de pantalla */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 25px;
    font-family: Arial, sans-serif;
    background-color: #f4f7fc;
    /* Un fondo muy suave para todo el contenedor */
}

.menu-card-ck {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de elevación en la tarjeta completa */
.menu-card-ck:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-title-ck {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.card-title-ck h3 {
    font-size: 20px;
    color: #0A2351;
    /* Azul oscuro */
    margin: 0;
}

.card-title-ck svg {
    width: 24px;
    height: 24px;
    color: #3366CC;
    /* Azul primario */
    flex-shrink: 0;
    /* Evita que el icono se encoja */
}

.card-links-ck {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-links-ck li a {
    display: block;
    padding: 10px;
    margin: 2px 0;
    border-radius: 6px;
    color: #3366CC;
    /* Azul primario */
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.card-links-ck li a:hover {
    background-color: #eaf2ff;
    color: #0A2351;
    /* Azul oscuro */
}

.componente-titulo {
    justify-items: center;
}

.card-menu-container-ck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 25px;
    font-family: Arial, sans-serif;
    background-color: #f4f7fc;
}

.menu-card-ck {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    /* ¡MUY IMPORTANTE! Para que el icono de fondo se posicione correctamente. */
    overflow: hidden;
    /* Oculta las partes del icono que se salgan de la tarjeta. */
    z-index: 1;
    /* Asegura que el contenido esté por encima del pseudo-elemento. */
}

.menu-card-ck:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* --- Estilo Base para el Icono de Fondo --- */
.menu-card-ck::after {
    content: '';
    /* El contenido se definirá con 'mask-image' */
    position: absolute;
    right: -20px;
    top: 80px;
    width: 200px;
    height: 200px;
    background-color: #e9ecef;
    opacity: 0.6;
    transform: rotate(-15deg);
    z-index: -1;
    /* Lo pone detrás del contenido */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 80%;
    mask-size: 80%;
}

/* --- Asignar un icono SVG a cada tarjeta específica --- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
*/
.menu-card-ck.quienes-somos::after {
    -webkit-mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /%3e%3c/svg%3e');
    mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /%3e%3c/svg%3e');
}

.menu-card-ck.boletines::after {
    -webkit-mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /%3e%3c/svg%3e');
    mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /%3e%3c/svg%3e');
}

.menu-card-ck.estadisticas::after {
    -webkit-mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /%3e%3c/svg%3e');
    mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /%3e%3c/svg%3e');
}

.menu-card-ck.anuarios::after {
    -webkit-mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /%3e%3c/svg%3e');
    mask-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"%3e%3cpath stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" /%3e%3c/svg%3e');
}


/* -- Estilos del contenido de la tarjeta (sin cambios) -- */
.card-title-ck {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.card-title-ck h3 {
    font-size: 20px;
    color: #0A2351;
    margin: 0;
}

.card-title-ck svg {
    width: 24px;
    height: 24px;
    color: #3366CC;
    flex-shrink: 0;
}

.card-links-ck {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-links-ck li a {
    display: block;
    padding: 10px;
    margin: 2px 0;
    border-radius: 6px;
    color: #3366CC;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.card-links-ck li a:hover {
    background-color: #eaf2ff;
    color: #0A2351;
}

.document-list-ck {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada tarjeta de documento */
}

.document-card-ck {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.document-card-ck:hover {
    border-color: #3366CC;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.doc-icon-ck {
    flex-shrink: 0; /* Evita que el icono se encoja */
}

.doc-icon-ck svg {
    width: 40px;
    height: 40px;
    color: #d93831; /* Color rojo típico de PDF */
}

.doc-info-ck {
    flex-grow: 1; /* Hace que esta sección ocupe el espacio disponible */
}

.doc-title-ck {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.doc-title-ck a {
    color: #0A2351; /* Azul oscuro */
    text-decoration: none;
    font-weight: bold;
}
.doc-title-ck a:hover {
    text-decoration: underline;
}

.doc-description-ck {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.doc-meta-ck {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #777;
}

.doc-meta-ck span {
    background-color: #f1f3f5;
    padding: 3px 8px;
    border-radius: 5px;
}

.download-button-ck {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #3366CC; /* Azul primario */
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap; /* Evita que el texto se parta */
    transition: background-color 0.3s ease;
}

.download-button-ck:hover {
    background-color: #0A2351; /* Azul oscuro */
}

.download-button-ck svg {
    width: 18px;
    height: 18px;
}

/* --- Diseño Responsivo para Móviles --- */
@media (max-width: 768px) {
    .document-card-ck {
        flex-direction: column;
        align-items: flex-start;
    }
    .doc-action-ck {
        width: 100%;
        margin-top: 15px;
    }
    .download-button-ck {
        justify-content: center;
        width: 100%;
    }
}


.componente-titulo  {
    font-size: 28px;
    color: #0A2351; /* Azul oscuro */
    margin-bottom: 30px;
}

/* --- Contenedor Principal del Módulo --- */
.pypc-module {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #333;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-width: 800px; /* Opcional, para limitar el ancho */
    margin: 20px auto; /* Opcional, para centrar */
}

/* --- Títulos y Encabezados --- */
.pypc-module .pypc-main-title {
    color: #1a237e; /* Azul oscuro */
    font-size: 2em;
    margin-bottom: 0;
    text-align: center;
}

.pypc-module .pypc-subtitle {
    text-align: center;
    color: #555;
    font-size: 1.1em;
    margin-top: 5px;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
}

.pypc-module .pypc-section-title {
    color: #283593; /* Azul medio */
    font-size: 1.5em;
    margin-top: 30px;
    border-left: 4px solid #3f51b5;
    padding-left: 10px;
}

/* --- Párrafos y Texto Resaltado --- */
.pypc-module .pypc-paragraph {
    color: #444;
}

.pypc-module .pypc-highlight-red {
    color: #c62828; /* Rojo oscuro para resaltar */
    font-weight: bold;
}

.pypc-module .pypc-highlight-bold {
    font-weight: bold;
    color: #111;
}

/* --- Tarjeta de Información Clave --- */
.pypc-module .pypc-info-card {
    background-color: #e8eaf6; /* Azul muy claro */
    border: 1px solid #c5cae9;
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;
}

.pypc-module .pypc-card-title {
    margin-top: 0;
    color: #1a237e;
    font-size: 1.2em;
}

.pypc-module .pypc-card-list {
    list-style: none;
    padding-left: 0;
}

.pypc-module .pypc-card-list-item {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.pypc-module .pypc-card-list-item::before {
    content: '✔';
    color: #3f51b5; /* Azul índigo */
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* --- Cita Destacada --- */
.pypc-module .pypc-quote {
    font-style: italic;
    color: #555;
    padding: 15px 20px;
    margin: 20px 0;
    border-left: 5px solid #7986cb; /* Azul claro */
    background-color: #f9f9f9;
}
.pypc-module .pypc-quote-author {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
    color: #333;
}

/* --- Listas Específicas --- */
.pypc-module .pypc-sanctions-list,
.pypc-module .pypc-exceptions-list {
    padding-left: 25px;
}

.pypc-module .pypc-sanctions-list-item,
.pypc-module .pypc-exceptions-list-item {
    margin-bottom: 8px;
}

/* --- Sección de Detalles del Documento --- */
.pypc-module .pypc-document-details {
    margin-top: 30px;
    padding: 15px;
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9em;
}

.pypc-module .pypc-document-item {
    margin: 5px 0;
}
.pypc-module .pypc-document-label {
    font-weight: bold;
    color: #333;
}
.pypc-module .pypc-code-snippet {
    background-color: #eee;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
}

code {
    color: #007BFF !important;
}

/* --- Estilo 2: Outline o Contorno --- */

  
  .boton-regresar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    background-color: transparent; /* Fondo transparente */
    color: #3f51b5; /* Color del texto y borde (azul) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    
    padding: 2px 10px;
    border-radius: 50px; /* Bordes completamente redondeados (píldora) */
    border: 2px solid #3f51b5; /* Borde sólido */
    cursor: pointer;
    
    transition: all 0.3s ease-in-out;
  }
  
  /* Efecto al pasar el mouse por encima */
  .boton-regresar:hover {
    background-color: #3f51b5; /* El color de fondo aparece */
    color: #FFFFFF; /* El texto se vuelve blanco */
    text-decoration: none !important;
  }
  
  .boton-regresar .fa {
    font-size: 1.1em;
    transition: transform 0.3s ease;
  }
  
  /* Pequeña animación en el ícono */
  .boton-regresar:hover .fa {
    transform: translateX(-4px);
  }