/*
 * Reposteando: CSS propio, se carga después de app.css (ver resources/views/vendor/hyde/layouts/head.blade.php).
 * Patrón de vitor.pro: UNA sola variable de ancho para header, contenido y footer.
 *
 * --rp-max: ancho total de la columna (72rem = 1152px, para la grilla de noticias de la portada).
 * --rp-read: ancho de lectura del texto de notas y páginas, dentro de la columna y alineado
 *            a la izquierda (mismo borde izquierdo que el logo).
 * --rp-pad: margen interno lateral. 2rem = p-4 del <nav> + px-4 del logo de Hyde,
 *           así el borde izquierdo del logo coincide con el del texto.
 */
:root {
    --rp-max: 72rem;
    --rp-read: 46rem;
    --rp-pad: 2rem;
    --rp-line: #e5e7eb; /* gray-200 */
}
.dark { --rp-line: #374151; } /* gray-700 */

#app {
    max-width: var(--rp-max);
    margin-inline: auto;
}

#main-navigation {
    max-width: var(--rp-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    min-width: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--rp-line);
}

main#content,
.mx-auto.max-w-7xl {
    max-width: var(--rp-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--rp-pad);
}

/* Texto de notas y páginas: sin el 65ch centrado de prose; ancho de lectura propio pegado a la izquierda. */
main#content .prose {
    max-width: none;
}
main#content article.post-article,
main#content > article.prose {
    max-width: var(--rp-read);
    margin-left: 0;
    margin-right: auto;
}

footer {
    max-width: var(--rp-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--rp-pad);
}
footer .prose {
    margin-left: 0;
    text-align: left;
}

@media (min-width: 768px) {
    #main-navigation-links li {
        margin-inline: .55rem;
    }
}

/* ---- Tarjetas y portada ---- */
.rp-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f3f4f6;
}
/* Placeholder sobrio para notas sin foto: fondo gris con el icono propio, tenue. */
.rp-sinfoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    border: 1px solid var(--rp-line);
}
.rp-sinfoto img {
    width: 28%;
    max-width: 4.5rem;
    min-width: 1.75rem;
    opacity: .28;
    filter: grayscale(1);
}
.dark .rp-sinfoto, .dark .rp-foto { background: #1f2937; }
.rp-titular a:hover { color: #b91c1c; }
.rp-seccion-titulo {
    border-bottom: 3px solid #b91c1c;
}

/* ---- Índice de etiquetas (/etiquetas) ----
 * Tres señales (ver resources/views/etiquetas-indice.blade.php; se calculan en Etiquetas::indiceVisual()):
 *  1. Fondo rp-et-n1…n5 = cantidad de reposteos (gris muy claro → rojo del sitio #b91c1c).
 *  2. rp-et-tendencia = contorno de 2px en color acento, separado 2px del chip, para que se vea
 *     también sobre el fondo rojo del nivel 5.
 *  3. Letra rp-et-hoy (más oscura/clara según el modo + negrita) | rp-et-semana (normal) | rp-et-vieja (tenue).
 * Cada nivel define sus tres colores de letra (--et-fuerte/normal/tenue) elegidos para cumplir
 * WCAG AA (≥ 4.5:1) sobre su propio fondo. Mínimos: claro 5.22 (n5 tenue #e5e7eb sobre #b91c1c),
 * oscuro 5.22 (ídem). Hoy y semana se distinguen por el peso, no solo por el color.
 */
.rp-et {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: .375rem;
    border: 1px solid var(--et-borde);
    background: var(--et-bg);
    color: var(--et-normal);
    line-height: 1.3;
    text-decoration: none;
}
.rp-et-n1 { --et-bg: #f3f4f6; --et-borde: #e5e7eb; --et-fuerte: #111827; --et-normal: #1f2937; --et-tenue: #4b5563; }
.rp-et-n2 { --et-bg: #fee2e2; --et-borde: #fecaca; --et-fuerte: #111827; --et-normal: #1f2937; --et-tenue: #4b5563; }
.rp-et-n3 { --et-bg: #fecaca; --et-borde: #fca5a5; --et-fuerte: #111827; --et-normal: #1f2937; --et-tenue: #4b5563; }
.rp-et-n4 { --et-bg: #fca5a5; --et-borde: #f87171; --et-fuerte: #111827; --et-normal: #1f2937; --et-tenue: #374151; }
.rp-et-n5 { --et-bg: #b91c1c; --et-borde: #991b1b; --et-fuerte: #ffffff; --et-normal: #ffffff; --et-tenue: #e5e7eb; }
.dark .rp-et-n1 { --et-bg: #1f2937; --et-borde: #374151; --et-fuerte: #ffffff; --et-normal: #f3f4f6; --et-tenue: #9ca3af; }
.dark .rp-et-n2 { --et-bg: #450a0a; --et-borde: #7f1d1d; --et-fuerte: #ffffff; --et-normal: #f3f4f6; --et-tenue: #9ca3af; }
.dark .rp-et-n3 { --et-bg: #7f1d1d; --et-borde: #991b1b; --et-fuerte: #ffffff; --et-normal: #f3f4f6; --et-tenue: #d1d5db; }
.dark .rp-et-n4 { --et-bg: #991b1b; --et-borde: #b91c1c; --et-fuerte: #ffffff; --et-normal: #f3f4f6; --et-tenue: #d1d5db; }
.dark .rp-et-n5 { --et-bg: #b91c1c; --et-borde: #dc2626; --et-fuerte: #ffffff; --et-normal: #ffffff; --et-tenue: #e5e7eb; }
.rp-et-hoy { color: var(--et-fuerte); font-weight: 700; }
.rp-et-semana { color: var(--et-normal); font-weight: 400; }
.rp-et-vieja { color: var(--et-tenue); font-weight: 400; }
.rp-et-tendencia { outline: 2px solid #b91c1c; outline-offset: 2px; }
.dark .rp-et-tendencia { outline-color: #f87171; }
.rp-et-fuego { font-size: .8em; line-height: 1; margin-left: -.1rem; }
.rp-et-num {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    padding-left: .4rem;
    border-left: 1px solid currentColor;
}
/* Chips de la lista (no las muestras de la leyenda): 2px menos de padding por lado y 2px menos de letra. */
li > a.rp-et { padding: calc(.3rem - 2px) calc(.7rem - 2px); font-size: calc(1em - 2px); }
a.rp-et:hover { text-decoration: underline; text-underline-offset: 3px; }
a.rp-et:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.dark a.rp-et:focus-visible { outline-color: #60a5fa; }
.rp-et-muestra { font-size: .8125rem; }
.rp-leyenda { border-color: var(--rp-line); }

/* prueba de hash temporal */