/* =====================================================================
   custom.css  —  Estilos propios
   ------------------------------------------------------------------
   Solo lo que Tailwind no resuelve con clases de utilidad:

     1. Tipografía del contenido largo (.prose-afiliados)
     2. Ajustes de accesibilidad y de impresión
     3. Detalles de comportamiento del navegador

   Usamos una clase propia en vez del plugin @tailwindcss/typography
   porque el plugin no está disponible cuando Tailwind se carga por CDN.
   ================================================================== */


/* =====================================================================
   1. CONTENIDO LARGO (artículos, análisis, páginas legales)
   ================================================================== */

.prose-afiliados {
    color: #334155;              /* slate-700 */
    font-size: 1.0625rem;        /* 17px: más cómodo que 16 para leer largo */
    line-height: 1.75;
}

.prose-afiliados > * + * {
    margin-top: 1.25em;
}

/* --- Titulares ------------------------------------------------------- */
.prose-afiliados h2,
.prose-afiliados h3,
.prose-afiliados h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    color: #0b1220;
    letter-spacing: -0.01em;
    scroll-margin-top: 5rem;     /* El header fijo no tapa el ancla */
}

.prose-afiliados h2 { font-size: 1.625rem; line-height: 1.25; margin-top: 2.5em; }
.prose-afiliados h3 { font-size: 1.3rem;   line-height: 1.3;  margin-top: 2em; }
.prose-afiliados h4 { font-size: 1.1rem;   line-height: 1.4;  margin-top: 1.75em; }

.prose-afiliados h2:first-child,
.prose-afiliados h3:first-child { margin-top: 0; }

/* --- Enlaces ---------------------------------------------------------- */
.prose-afiliados a {
    color: #2a4ecf;                          /* marca-600 */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.prose-afiliados a:hover { color: #2340a8; }

/* --- Listas ----------------------------------------------------------- */
.prose-afiliados ul,
.prose-afiliados ol { padding-left: 1.5em; }
.prose-afiliados ul { list-style: disc; }
.prose-afiliados ol { list-style: decimal; }
.prose-afiliados li { margin-top: .5em; padding-left: .25em; }
.prose-afiliados li::marker { color: #94a3b8; }

/* --- Cita ------------------------------------------------------------- */
.prose-afiliados blockquote {
    border-left: 3px solid #2a4ecf;
    padding: .25em 0 .25em 1.25em;
    font-style: italic;
    color: #475569;
}

/* --- Imágenes --------------------------------------------------------- */
.prose-afiliados img {
    border-radius: .875rem;
    border: 1px solid #e2e8f0;
    max-width: 100%;
    height: auto;
}
.prose-afiliados figcaption {
    margin-top: .625em;
    font-size: .8125rem;
    color: #64748b;
    text-align: center;
}

/* --- Tablas ----------------------------------------------------------- */
.prose-afiliados table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    display: block;
    overflow-x: auto;            /* En móvil se desliza en vez de romper el diseño */
}
.prose-afiliados th,
.prose-afiliados td {
    border-bottom: 1px solid #e2e8f0;
    padding: .75em 1em;
    text-align: left;
    vertical-align: top;
}
.prose-afiliados th {
    font-weight: 600;
    color: #0b1220;
    background: #f8fafc;
    white-space: nowrap;
}

/* --- Código ----------------------------------------------------------- */
.prose-afiliados code {
    background: #f1f5f9;
    border-radius: .3rem;
    padding: .15em .4em;
    font-size: .875em;
    color: #0b1220;
}
.prose-afiliados pre {
    background: #0b1220;
    color: #e2e8f0;
    border-radius: .875rem;
    padding: 1.25em;
    overflow-x: auto;
    font-size: .875rem;
}
.prose-afiliados pre code { background: none; padding: 0; color: inherit; }

/* --- Separador -------------------------------------------------------- */
.prose-afiliados hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 3em 0;
}


/* =====================================================================
   2. ACCESIBILIDAD
   ================================================================== */

/* Foco visible y coherente para quien navega con teclado.
   Nunca uses outline:none sin poner una alternativa. */
:focus-visible {
    outline: 2px solid #2a4ecf;
    outline-offset: 2px;
    border-radius: .25rem;
}

/* Respeta a quien pidió menos animación en su sistema operativo
   (personas con vértigo o sensibilidad al movimiento). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   3. DETALLES
   ================================================================== */

/* Evita que una imagen que no cargó rompa la maquetación */
img { max-width: 100%; height: auto; }

/* Quita la X nativa del input de búsqueda en Chrome: rompe el diseño */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Impresión: nadie necesita imprimir el menú ni el pie */
@media print {
    header, footer, nav, form { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}