:root{--hym-bg:#090d12;--hym-panel:#111922;--hym-panel2:#172331;--hym-text:#f4efe2;--hym-muted:#b9b0a1;--hym-gold:#d8b15c;--hym-line:rgba(216,177,92,.28);--hym-red:#8c1f1f}
.hym-page{margin:0;background:radial-gradient(circle at 20% 0%,#172536 0,#090d12 42%,#05070a 100%);color:var(--hym-text);font-family:Georgia,'Times New Roman',serif}
.hym-page a{color:inherit}.hym-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 36px;background:rgba(5,8,12,.92);border-bottom:1px solid var(--hym-line);backdrop-filter:blur(12px)}
.hym-logo{text-transform:uppercase;letter-spacing:.22em;text-decoration:none;font-weight:900}.hym-nav{display:flex;align-items:center;gap:16px}.hym-nav a,.hym-nav button,.hym-pill{font:800 13px Arial,sans-serif;text-transform:uppercase;text-decoration:none;background:transparent;border:1px solid var(--hym-line);color:var(--hym-text);padding:10px 14px}.hym-pill,.hym-actions a:first-child{background:var(--hym-gold);color:#111}
.hym-hero{min-height:68vh;display:flex;align-items:center;padding:60px clamp(24px,6vw,100px);background:linear-gradient(90deg,rgba(6,8,12,.92),rgba(6,8,12,.38)),url('https://resources.thydom.com/wp-content/uploads/2026/07/FondoPrincipal.jpg') center/cover no-repeat}.hym-hero>div{max-width:820px}.hym-kicker{color:var(--hym-gold);font:900 12px Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}.hym-hero h1,.hym-page-title h1{font-size:clamp(42px,8vw,96px);line-height:.9;margin:12px 0;text-transform:uppercase}.hym-hero p{font-size:22px;line-height:1.5;color:#efe7d6}.hym-actions{display:flex;gap:12px;flex-wrap:wrap}.hym-actions a,.hym-filter-grid button,.hym-search-form button,.hym-button,.hym-comment-form button,.hym-vote button,.hym-google{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--hym-line);padding:14px 18px;font:900 13px Arial,sans-serif;text-transform:uppercase;background:#f5efe3;color:#10151b}
.hym-button-dark,.hym-search-form button,.hym-filter-grid button{background:#182331;color:#fff}.hym-section,.hym-page-title,.hym-login,.hym-search-panel,.hym-filter-panel{max-width:1180px;margin:24px auto;padding:24px;border:1px solid var(--hym-line);background:rgba(11,16,22,.82)}.hym-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.hym-section-head p{color:#d9d0c1;margin:0}.hym-section h2{font-size:34px;text-transform:uppercase;margin:0 0 18px}.hym-search-panel{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:end}.hym-count{background:#182331;border-left:7px solid var(--hym-red);padding:17px 20px;text-transform:uppercase;font:900 16px Arial}.hym-count strong{float:right;color:var(--hym-gold);font-size:22px}.hym-search-form{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end}.hym-search-form label,.hym-filter-grid label{display:grid;gap:8px;color:var(--hym-gold);font:900 12px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}.hym-search-form input,.hym-filter-grid select{min-height:44px;background:#f8f4ec;color:#111;border:1px solid #cdbf9e;padding:0 14px;font:700 14px Arial}.hym-filter-grid{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end}
.hym-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.hym-card{border:1px solid var(--hym-line);background:linear-gradient(180deg,#121b25,#080d13);padding:14px;min-height:100%;box-shadow:0 20px 45px rgba(0,0,0,.24)}.hym-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#111;border:1px solid var(--hym-line)}.hym-card p{color:var(--hym-gold);text-transform:uppercase;font:900 12px Arial,sans-serif;letter-spacing:.12em}.hym-card h3{font-size:24px;margin:8px 0}.hym-card h3 a{text-decoration:none}.hym-card div{color:#d9d0c1;line-height:1.45}.hym-card footer,.hym-metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.hym-card footer span,.hym-metrics span{border:1px solid var(--hym-line);padding:6px 9px;border-radius:999px;color:var(--hym-gold);font:800 12px Arial}
.hym-detail-hero{min-height:56vh;margin:28px auto 0;max-width:1320px;background-size:cover;background-position:center;display:flex;align-items:end;border:1px solid var(--hym-line)}.hym-detail-hero>div{max-width:840px;padding:clamp(28px,5vw,70px)}.hym-detail-hero h1{font-size:clamp(44px,7vw,98px);line-height:.9;margin:12px 0;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.7)}.hym-summary{font-size:22px;line-height:1.45;color:#fff;text-shadow:0 2px 15px rgba(0,0,0,.75)}.hym-detail-shell{max-width:1320px;margin:22px auto;display:grid;grid-template-columns:1fr 300px;gap:22px}.hym-detail-main,.hym-sidebook{border:1px solid var(--hym-line);background:rgba(11,16,22,.86);padding:26px}.hym-detail-main h2{font-size:36px;margin:18px 0}.hym-body{line-height:1.75;color:#ded6c7;font-size:18px}.hym-metrics span{border-radius:0;color:#fff}.hym-metrics strong{display:block;color:var(--hym-gold);font-size:24px}.hym-vote{display:flex;gap:10px}.hym-vote button.active{background:var(--hym-gold);color:#111}.hym-sidebook a{display:block;text-decoration:none}.hym-sidebook img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--hym-line)}.hym-sidebook span{display:block;margin-top:14px;color:var(--hym-gold);font:900 12px Arial;text-transform:uppercase;letter-spacing:.12em}.hym-sidebook strong{display:block;font-size:24px;line-height:1.05;margin-top:8px}.hym-sidebook small{display:block;color:#d9d0c1;margin-top:8px}.hym-comment{border-top:1px solid var(--hym-line);padding:14px 0}.hym-comment-form textarea{width:100%;min-height:110px;background:#0b1118;color:var(--hym-text);border:1px solid var(--hym-line)}
.hym-error{border:1px solid #8c1f1f;background:rgba(140,31,31,.18);padding:12px;margin:14px 0;color:#ffd8d8}.hym-link{display:inline-block;margin-top:14px;color:var(--hym-gold)}
.hym-footer{padding:30px;text-align:center;color:var(--hym-muted);border-top:1px solid var(--hym-line)}.pagination{display:flex;gap:8px;justify-content:center;list-style:none}.pagination *{color:var(--hym-text)}
@media(max-width:860px){.hym-header{padding:14px 18px;align-items:flex-start}.hym-nav{flex-wrap:wrap;justify-content:flex-end}.hym-search-panel,.hym-search-form,.hym-filter-grid,.hym-detail-shell{grid-template-columns:1fr}.hym-section,.hym-page-title,.hym-login,.hym-search-panel,.hym-filter-panel{margin:18px;padding:18px}.hym-detail-hero{margin:18px;min-height:48vh}.hym-detail-hero>div{padding:24px}}

/* LUNA_HYM_RANDOM_BOOK_CARD_V1 */
.hym-sidebook-summary {
    margin: 14px 0 0;
    color: #d9d0c1;
    font: 400 15px/1.5 Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

.hym-sidebook .hym-sidebook-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 12px 16px;
    border: 1px solid var(--hym-gold);
    background: var(--hym-gold);
    color: #000;
    font: 900 12px/1 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hym-sidebook a:hover .hym-sidebook-cta,
.hym-sidebook a:focus-visible .hym-sidebook-cta {
    background: var(--hym-gold);
    color: #000;
}

@media (max-width: 860px) {
    .hym-sidebook-summary {
        font-size: 16px;
    }
}
/* LUNA_HYM_RANDOM_BOOK_CARD_V1_END */

/* LUNA_HYM_INDEX_FORM_COLORS_V3 */

/* Botones amarillos con texto negro en todos sus estados. */
html body a.hym-clear-button,
html body button.hym-clear-button,
html body a.hym-surprise-button,
html body button.hym-surprise-button,
html body .hym-search-form .hym-surprise-button,
html body .hym-filter-grid .hym-clear-button,
html body .hym-actions .hym-surprise-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--hym-gold) !important;
    background: var(--hym-gold) !important;
    background-color: var(--hym-gold) !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body a.hym-clear-button:link,
html body a.hym-clear-button:visited,
html body a.hym-clear-button:hover,
html body a.hym-clear-button:focus,
html body a.hym-clear-button:focus-visible,
html body a.hym-clear-button:active,
html body button.hym-clear-button:hover,
html body button.hym-clear-button:focus,
html body button.hym-clear-button:focus-visible,
html body button.hym-clear-button:active,
html body a.hym-surprise-button:link,
html body a.hym-surprise-button:visited,
html body a.hym-surprise-button:hover,
html body a.hym-surprise-button:focus,
html body a.hym-surprise-button:focus-visible,
html body a.hym-surprise-button:active,
html body button.hym-surprise-button:hover,
html body button.hym-surprise-button:focus,
html body button.hym-surprise-button:focus-visible,
html body button.hym-surprise-button:active {
    border-color: var(--hym-gold) !important;
    background: var(--hym-gold) !important;
    background-color: var(--hym-gold) !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Campo Buscar por nombre: fondo negro y texto blanco. */
html body input.hym-search-input,
html body .hym-search-form input.hym-search-input,
html body .hym-search-form input[name="q"] {
    border: 1px solid var(--hym-line) !important;
    background: #05070a !important;
    background-color: #05070a !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    opacity: 1 !important;
}

html body input.hym-search-input::placeholder,
html body .hym-search-form input[name="q"]::placeholder {
    color: #a8a8a8 !important;
    -webkit-text-fill-color: #a8a8a8 !important;
    opacity: 1 !important;
}

/* Combo Tema: fondo negro y texto blanco. */
html body select.hym-topic-select,
html body .hym-filter-grid select.hym-topic-select,
html body .hym-filter-grid select[name="tema"] {
    border: 1px solid var(--hym-line) !important;
    background: #05070a !important;
    background-color: #05070a !important;
    background-image: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    color-scheme: dark !important;
    opacity: 1 !important;
}

html body select.hym-topic-select option,
html body .hym-filter-grid select[name="tema"] option {
    background: #05070a !important;
    background-color: #05070a !important;
    color: #fff !important;
}

/* Foco visible para búsqueda y tema. */
html body input.hym-search-input:focus,
html body .hym-search-form input[name="q"]:focus,
html body select.hym-topic-select:focus,
html body .hym-filter-grid select[name="tema"]:focus {
    border-color: var(--hym-gold) !important;
    outline: 2px solid rgba(214, 168, 67, .38) !important;
    outline-offset: 1px !important;
}

/* LUNA_HYM_INDEX_FORM_COLORS_V3_END */

/* HYMLUNA-PAGINATION-START */

/*
 * Paginador Laravel sin dependencia de Tailwind.
 * Oculta la versión móvil duplicada y normaliza botones y SVG.
 */
nav[role="navigation"][aria-label="Pagination Navigation"] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Laravel genera primero una variante móvil duplicada. */
nav[role="navigation"][aria-label="Pagination Navigation"] > div:first-child {
    display: none !important;
}

/* Contenedor principal del paginador. */
nav[role="navigation"][aria-label="Pagination Navigation"] > div:last-child {
    display: flex !important;
    width: 100%;
    justify-content: center;
    align-items: center;
}

/* Oculta el texto “Mostrando…” para mantener el diseño limpio. */
nav[role="navigation"][aria-label="Pagination Navigation"]
> div:last-child
> div:first-child {
    display: none !important;
}

nav[role="navigation"][aria-label="Pagination Navigation"]
> div:last-child
> div:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
}

nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-current="page"],
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-disabled="true"],
nav[role="navigation"][aria-label="Pagination Navigation"] a {
    text-decoration: none;
}

/* Grupo completo de controles. */
nav[role="navigation"][aria-label="Pagination Navigation"]
> div:last-child
> div:last-child
> span {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* Botones y páginas. */
nav[role="navigation"][aria-label="Pagination Navigation"] a,
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-current="page"] > span,
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-disabled="true"] > span,
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-hidden="true"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--hym-line);
    background: #0b1016;
    color: #f5efe3;
    font: 800 14px/1 Arial, sans-serif;
    text-decoration: none;
    border-radius: 0;
}

/* Página activa. */
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-current="page"] > span {
    background: var(--hym-gold);
    border-color: var(--hym-gold);
    color: #111;
}

/* Botón deshabilitado. */
nav[role="navigation"][aria-label="Pagination Navigation"]
span[aria-disabled="true"] > span {
    opacity: .38;
    cursor: default;
}

/* Hover. */
nav[role="navigation"][aria-label="Pagination Navigation"] a:hover,
nav[role="navigation"][aria-label="Pagination Navigation"] a:focus-visible {
    background: #f5efe3;
    border-color: #f5efe3;
    color: #111;
    outline: none;
}

/* Corrección crítica: SVG de flechas. */
nav[role="navigation"][aria-label="Pagination Navigation"] svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px;
    fill: currentColor;
}

/* Evita márgenes heredados dentro de los controles. */
nav[role="navigation"][aria-label="Pagination Navigation"] a *,
nav[role="navigation"][aria-label="Pagination Navigation"] span * {
    margin: 0;
}

/* Ajuste móvil. */
@media (max-width: 640px) {
    nav[role="navigation"][aria-label="Pagination Navigation"] {
        margin: 22px auto;
        padding: 0 10px;
    }

    nav[role="navigation"][aria-label="Pagination Navigation"]
    > div:last-child
    > div:last-child
    > span {
        gap: 5px;
    }

    nav[role="navigation"][aria-label="Pagination Navigation"] a,
    nav[role="navigation"][aria-label="Pagination Navigation"]
    span[aria-current="page"] > span,
    nav[role="navigation"][aria-label="Pagination Navigation"]
    span[aria-disabled="true"] > span,
    nav[role="navigation"][aria-label="Pagination Navigation"]
    span[aria-hidden="true"] {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 13px;
    }

    nav[role="navigation"][aria-label="Pagination Navigation"] svg {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        flex-basis: 16px;
    }
}

/* HYMLUNA-PAGINATION-END */

/* HYM-BACK-TO-TOP-START */

.hym-back-to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 60;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    padding: 0;

    border: 1px solid var(--hym-gold);
    border-radius: 50%;

    background: var(--hym-gold);
    color: #111;

    font: 900 30px/1 Arial, sans-serif;
    text-align: center;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(255, 255, 255, .08);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(14px) scale(.92);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease,
        background-color .2s ease,
        color .2s ease;
}

.hym-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.hym-back-to-top:hover,
.hym-back-to-top:focus-visible {
    background: #f5efe3;
    border-color: #f5efe3;
    color: #111;
    outline: none;
    transform: translateY(-2px) scale(1);
}

.hym-back-to-top:active {
    transform: translateY(0) scale(.96);
}

.hym-back-to-top span {
    display: block;
    margin-top: -2px;
    line-height: 1;
}

@media (max-width: 640px) {
    .hym-back-to-top {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));

        width: 46px;
        height: 46px;

        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hym-back-to-top {
        transition: none;
    }

    html:focus-within {
        scroll-behavior: auto;
    }
}

/* HYM-BACK-TO-TOP-END */