/*  ===============================================
 *  TEMA WINDOWS 95 TITA STYLE - ARCHIVO PRINCIPAL
 *        Estilo retro para Spiky Core
 *  =============================================== */

/* --------------------------------------------
 *  1. VARIABLES GLOBALES Y FUENTES
 *  -------------------------------------------- */
:root {
    --color-principal: #835B5B;
    --color-claro: #bd8f8f;
    --color-borde: #A05F5F;
    --color-fondo: #D5B7B7;
    --color-oscuro: #543E3E;
    --color-back-panel: #bc8e8e;
    --fuente-xp: 'VCR_OSD_MONO_1.001', monospace;
}

@font-face {
    font-family: 'VCR_OSD_MONO_1.001';
    src: url('VCR_OSD_MONO_1.001.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}

/*  -----------------------------
 *  2. ESTILOS BASE DEL DOCUMENTO
 *  ----------------------------- */
body {
    background-image: url('https://www.transparenttextures.com/patterns/starring.png');
    background-color: var(--color-claro);
    color: #444;
    font-family: var(--fuente-xp);
    margin: 0;
    padding: 20px;
}

/*  ---------------------------------------------------
 *  3. COMPONENTES DE INTERFAZ (VENTANAS, BOTONES, ETC)
 *  --------------------------------------------------- */

/* --- VENTANAS (WINDOWS) --- */
.window, .win-header, .win-left {
    background-color: var(--color-fondo);
    border: 3px solid;
    border-color: #ffffff var(--color-borde) var(--color-borde) #ffffff;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
}

.window { max-width: 700px; }
.win-header { max-width: 600px; }
.win-left { max-width: 1000px; }

.win-title {
    background: var(--color-principal);
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.win-title-ad {
    animation: flash-title 1s infinite;
}

.win-body {
    padding: 15px;
}

.win-ad-body {
    padding: 35px 25px;
    text-align: center;
    background: var(--color-claro);
    border: 2px inset;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    margin: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- BOTONES --- */
.button, .win-btn {
    display: inline-block;
    background: var(--color-claro);
    color: white;
    border: 3px solid;
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    font-family: var(--fuente-xp);
    cursor: pointer;
    outline: none;
}

.button2 {
    display: inline-block;
    background: var(--color-fondo);
    color: white;
    border: 3px solid;
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    font-family: var(--fuente-xp);
    cursor: pointer;
    outline: none;
    margin: 5px;
    padding: 8px 15px;
    text-decoration: none;
}

.button {
    margin: 5px;
    padding: 8px 15px;
    text-decoration: none;
}

.button2 {
    margin: 5px;
    padding: 8px 15px;
    text-decoration: none;
}

.win-btn {
    list-style: none;
    padding: 0 6px;
    font-weight: bold;
    font-size: 0.9rem;
}

.button:active, .win-btn:active, .help-popup summary:active {
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    transform: translate(1px, 1px);
}

.button:disabled {
    background: #888;
    border-color: #aaa #555 #555 #aaa;
    color: #ccc;
    cursor: not-allowed;
    filter: grayscale(0.2);
}
.button:enabled {
    background: var(--color-claro);
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    color: white;
    cursor: pointer;
}

.btn-activated-blink {
    animation: active-flicker 0.4s ease-in-out infinite;
    /* Aseguramos que sobresale */
    position: relative;
    z-index: 10;
}

/*  ----------------------------------
 *  4. LAYOUTS Y ESTRUCTURAS DE PÁGINA
 *  ---------------------------------- */

/* --- SISTEMA DE 3 COLUMNAS --- */
.desktop-layout {
    display: flex;
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.left, .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.middle {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* --- SECCIÓN DE PERFIL --- */
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px;
}

.profile-pic-container {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    box-sizing: border-box;
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.title {
    font-weight: bold;
    font-size: 1.30rem;
    color: var(--color-oscuro);
    margin: 0;
}

.small-text {
    font-style: italic;
    font-size: 0.90rem;
    color: var(--color-principal);
    margin: 0;
}

.win-text {
    margin: 0;
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.4;
    color: var(--color-oscuro);
}

.back-canvas {
    background-color: var(--color-claro);
    padding: 10px;
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
}

/* --- ACCESOS DIRECTOS (ICONOS ESCRITORIO) --- */
.desktop-icons-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    gap: 7px;
    padding: 5px 20px;
    width: 100%;
}

.shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    text-decoration: none;
    color: white;
    font-size: 11px;
}

.shortcut img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    image-rendering: pixelated;
}

.shortcut span {
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    padding: 4px;
}

.shortcut:hover {
    background-color: rgba(160, 95, 95, 0.5);
    border: 1px dotted #fff;
}

.shortcut:hover span {
    background-color: var(--color-borde);
}

/* --- MARQUEE (TEXTO DESPLAZABLE) --- */
.marquee-retro {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: flex; /* Esto pone ambos bloques uno al lado del otro */
    background: var(--color-oscuro);
    color: var(--color-claro);
    border-bottom: 2px solid #000;
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 10px; /* Espacio entre los spans */
    animation: scroll-marquee 20s linear infinite;
}

/*  ===========================
 *  5. COMPONENTES ESPECÍFICOS
 *  ===========================*/

/* --- REPRODUCTOR DE AUDIO EN HOME (TITA PLAYER) --- */
.tita-player {
    width: 240px;
    background: var(--color-fondo);
    border: 2px solid;
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    padding: 6px;
    font-family: var(--fuente-xp);
    box-shadow: 1px 1px 0px #000;
}

.icon-play::before { content: "▶"; font-weight: bold; }
.icon-pause::before { content: "▮▮"; font-weight: bold; }
.icon-next::before { content: "▶▮"; }
.icon-prev::before { content: "▮◀"; }

/* Efecto de botón presionado */
.tita-player .player-controls .button:active {
    padding-top: 2px;
    padding-left: 2px;
}

.tita-player button,
.tita-player .win-btn {
    padding: 2px 2px;       /* Achica el espacio interno (Vertical Horizontal) */
    font-size: 10px;        /* Reduce el tamaño del texto/icono */
    min-width: 30px;        /* Controla el ancho mínimo */
    height: 25px;           /* Controla la altura total */
}

.player-info {
    font-size: 11px;
    color: #000;
    background: var(--color-claro);
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    margin-bottom: 8px;
    padding: 3px 5px;
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

.progress-container {
    width: 100%;
    height: 14px;
    background: var(--color-claro);
    border: 1px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    cursor: pointer;
    margin-bottom: 10px;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--color-principal);
    transition: width 0.1s linear;
}

.player-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buttons button {
    background: var(--color-fondo);
    border: 2px solid;
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    color: #000;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 12px;
    font-family: var(--fuente-xp);
}

.buttons button:active {
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    padding: 3px 9px 1px 11px;
}

/* Contenedor del volumen */
.volume-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #000;
    font-family: var(--fuente-xp);
}

#volume {
-webkit-appearance: none;
appearance: none;
width: 65px;
height: 4px;
background: var(--color-oscuro);
cursor: pointer;
outline: none;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}

/* (Chrome, Safari, Edge, Opera) */
#volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 18px;
background: var(--color-claro);
cursor: pointer;
/* Efecto de relieve Windows 95 */
border: 1px solid #000;
box-shadow:
inset 1px 1px #dfdfdf,
inset -1px -1px #808080,
1px 1px 0px #000;
}

/* (Firefox) */
#volume::-moz-range-thumb {
width: 10px;
height: 18px;
background: var(--color-claro);
cursor: pointer;
border: 1px solid #000;
box-shadow:
inset 1px 1px #dfdfdf,
inset -1px -1px #808080,
1px 1px 0px #000;
border-radius: 0;
}

#volume:active::-webkit-slider-thumb {
background: var(--color-principal);
}

#play-btn {
font-size: 9px;
line-height: 1;
}


.iframe-content {
    padding: 0 !important;
}

/* --- POPUP DE AYUDA (DETAILS/SUMMARY) --- */
.help-popup {
    position: relative;
    display: inline-block;
}

.cursor-help {
    cursor: help;
}

.help-popup summary {
    list-style: none;
    outline: none;
}
.help-popup summary::-webkit-details-marker {
    display: none;
}

.win-popup {
    position: absolute;
    top: 22px;
    right: 0;
    background: var(--color-fondo);
    border: 3px solid;
    border-color: #ffffff var(--color-borde) var(--color-borde) #ffffff;
    padding: 10px;
    z-index: 100;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.4);
    width: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.media-content {
    width: 100%;
    border: 3px solid;
    border-color: var(--color-borde) #ffffff #ffffff var(--color-borde);
    margin-bottom: 10px;
}

/* =======================
 *  6. SISTEMA DE GALERÍA
 * =======================*/
.gallery-grid {
    width: 100%;
    overflow: hidden;
    background: var(--color-claro);
    border: 3px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
    margin-bottom: 15px;
    position: relative;
}

.gallery-track {
    display: flex;
    width: max-content;
    animation: scroll-automatico 55s linear infinite;
}

.art-card {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    background: var(--color-fondo);
    border: 2px solid;
    border-color: #fff var(--color-borde) var(--color-borde) #fff;
    transition: all 0.2s;
}

.art-card:hover {
    filter: brightness(1.15);
    cursor: pointer;
}

.art-card label {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;

}

.art-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);

}
.art-card p {
    margin: 0;
    padding: 4px;
    background: var(--color-fondo);
    color: var(--color-oscuro);
    font-size: 0.85em;
    text-align: center;
    font-weight: bold;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
}

/* ===============================
 *  7. SISTEMA DE ZOOM (LIGHTBOX)
 * =============================== */
.zoom-check {
    display: none !important;
}

.zoom-content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}

.zoom-content label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Lógica para mostrar el zoom correspondiente */
#z1:checked ~ .zoom-1, #z1b:checked ~ .zoom-1b,
#z2:checked ~ .zoom-2, #z2b:checked ~ .zoom-2b,
#z3:checked ~ .zoom-3, #z3b:checked ~ .zoom-3b,
#z4:checked ~ .zoom-4, #z4b:checked ~ .zoom-4b {
display: flex !important;
}
.zoom-content img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid var(--color-principal);
    cursor: zoom-out;
    object-fit: contain;
    margin: auto;
}

/* ====================================
 *  8. UTILIDADES Y EFECTOS ESPECIALES
 * ==================================== */

/* --- CLASES DE TEXTO ANIMADO --- */
.text-shake {
    display: inline-block;
    animation: shake-text 0.3s linear infinite;
    color: #ff0000;
    text-shadow: 1px 1px 0px #000;
}

.text-shake2 {
    display: inline-block;
    animation: shake-alt 0.37s ease-in-out infinite alternate;
}

.rainbow-text {
    background: linear-gradient(to right,
                                #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000,
                                #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-move 3s linear infinite;
    font-weight: bold;
    display: inline-block;
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.5));
}

/* Texto de "distancia" (ejemplo interactivo) */
#distancia {
    transition: color 0.2s ease;
    display: inline-block;
}
.muy-cerca {
    font-weight: bold;
    animation: shake 0.1s infinite;
}

.blink {
    animation: blink-anim 0.2s step-end 5;
}

/* --- IMÁGENES FLOTANTES (OVERLAYS) --- */
.frame-overlay {
    position: absolute;
    width: 130px;
    top: -12px;
    left: -23px;
    transform: rotate(0deg);
    z-index: 100;
    pointer-events: none;
}

.featured {
    border-color: #fff var(--color-principal) var(--color-principal) #fff;
    transform: scale(1.05);
    z-index: 5;
}

/* --- EFECTO CONFETI --- */
.confetti-particle {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    top: 0;
    left: 0;
}

.confetti-particle.circle {
    border-radius: 50%;
}

.confetti-particle.triangle {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #FFD966; /* El color se sobreescribe en JS, pero esto sirve de base */
}

/* --------------------------------------------
 *  9. ANIMACIONES GLOBALES (KEYFRAMES)
 *  -------------------------------------------- */
@keyframes flash-title {
    0%, 100% { background-color: var(--color-principal); }
    50% { background-color: #ff6b6b; }
}

@keyframes shake-text {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    20% { transform: translate(-1px, -2px) rotate(-1deg); }
    40% { transform: translate(-3px, 0px) rotate(1deg); }
    60% { transform: translate(3px, 2px) rotate(0deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake-alt {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 1px) rotate(-1deg); }
    60% { transform: translate(-2px, -1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(0px, -2px) rotate(-1deg); }
}

@keyframes rainbow-move {
    from { background-position: 0% center; }
    to { background-position: 200% center; }
}

@keyframes scroll-automatico {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-infinito {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes blink-anim {
    50% { opacity: 0; }
}

@keyframes active-flicker {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    }
    50% {
        filter: brightness(1.3);
        box-shadow: 6px 6px 0px rgba(0,0,0,0.3);
    }
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

/* =====================
 * 10. PÁGINA DE PRECIOS
 * ===================== */

.page-precios .price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 60px;
    align-items: end;
}

.page-precios .price-card {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
}

.page-precios .price-card-inner {
    display: flex;
    flex-direction: column;
    background: var(--color-fondo);
    border: 3px solid;
    border-color: #ffffff var(--color-borde) var(--color-borde) #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform;
}

.page-precios .price-card:hover .price-card-inner {
    transform: translateY(-8px);
    box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
}

.page-precios .featured .price-card-inner {
    transform: scale(1.05);
    z-index: 5;
}

.page-precios .featured:hover .price-card-inner {
    transform: scale(1.05) translateY(-8px);
}

.page-precios .price-img-container {
    padding: 10px;
    background: var(--color-claro);
    border-bottom: 2px solid var(--color-borde);
}

.page-precios .price-img-container img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border: 2px solid;
    border-color: var(--color-borde) #fff #fff var(--color-borde);
}

.page-precios .price-tag {
    margin: 0;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--color-oscuro);
}

/* Tita (Overlay) */
.page-precios .fursona-overlay {
    position: absolute;
    width: 185px;
    top: 34px;
    right: 350px;
    transform: rotate(7deg);
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
}

@media (max-width: 600px) {
    .page-precios .price-grid {
        grid-template-columns: 1fr;
        margin-top: 100px;
    }

    .page-precios .fursona-overlay {
        width: 150px;
        top: -120px;
    }

    .page-precios .featured .price-card-inner {
        transform: scale(1);
    }
}

/* Contenedor con scroll para los términos */
.tos-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-oscuro);
}

.tos-scroll-container::-webkit-scrollbar {
    width: 12px;
}
.tos-scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-principal);
    border: 1px solid var(--color-borde);
}

/* --- ESTILO PARA TOS --- */

/* Bloques de advertencia */
.tos-warning { color: #856404; font-style: italic; }
.tos-critical { color: #721c24; text-decoration: underline; }
.tos-no-ai { color: #ff0000; border-left: 2px solid red; padding-left: 5px; }

/* Cajas de Guidelines */
.guideline-box {
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid;
    font-size: 0.9em;
}

.approved { background: #e6ffed; border-color: #2c6e2c; color: #155724; }
.interest { background: #fffde6; border-color: #d4ac0d; color: #856404; }
.blacklist { background: #fceaea; border-color: #b13e3e; color: #721c24; }

/* ZOOM PARA GALERÍAS DE TOS */

/* Sketch gallery */
#sketch1:checked ~ .zoom-sketch1,
#sketch2:checked ~ .zoom-sketch2,
#sketch3:checked ~ .zoom-sketch3,
#sketch4:checked ~ .zoom-sketch4 {
display: flex !important;
}

/* Color gallery */
#color1:checked ~ .zoom-color1,
#color2:checked ~ .zoom-color2,
#color3:checked ~ .zoom-color3,
#color4:checked ~ .zoom-color4,
#color5:checked ~ .zoom-color5,
#color6:checked ~ .zoom-color6,
#color7:checked ~ .zoom-color7,
#color8:checked ~ .zoom-color8 {
display: flex !important;
}

/* Zoom para tarjetas de precios */
#price1:checked ~ .zoom-price1,
#price2:checked ~ .zoom-price2,
#price3:checked ~ .zoom-price3 {
display: flex !important;
}

/*  --------------------------------------------
 *  11. PERSONALIZACIÓN DE SCROLLBAR
 *  -------------------------------------------- */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: none;
}

::-webkit-scrollbar-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-principal);
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: var(--color-borde) #000 #000 var(--color-borde);
}

::-webkit-scrollbar-track {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 2px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    width: 16px;
    height: 16px;
    background: var(--color-principal);
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: var(--color-borde) #000 #000 var(--color-borde);
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
    display:block;
}

::-webkit-scrollbar-button:vertical:end:increment {
    width: 16px;
    height: 16px;
    background: var(--color-principal);
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: var(--color-borde) #000 #000 var(--color-borde);
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
    display:block;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    width: 16px;
    height: 16px;
    background: var(--color-principal);
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: var(--color-borde) #000 #000 var(--color-borde);
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
    display:block;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    width: 16px;
    height: 16px;
    background: var(--color-principal);
    box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
    border: 1px solid;
    border-color: var(--color-borde) #000 #000 var(--color-borde);
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
    display:block;
}

::-webkit-scrollbar-corner {
    background: #bc8e8e;
}

/* --------------------------------------------
 * 12. COMPONENTE MODULAR: INFO-MODULE
 * -------------------------------------------- */
.info-module {
    text-align: left;
    margin: 15px 0;
}

.status-tag.approved { background: #e6ffed; border-color: #2c6e2c; color: #155724; }
.status-tag.interest { background: #fffde6; border-color: #d4ac0d; color: #856404; }
.status-tag.blacklist { background: #fceaea; border-color: #b13e3e; color: #721c24; }

.module-section {
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 3px solid var(--color-borde);
}

.module-title {
    font-size: 1.2em;
    color: var(--color-oscuro);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.module-title span {
    background: var(--color-principal);
    color: white;
    padding: 1px 6px;
    font-size: 1.2em;
    border: 1px solid #000;
    box-shadow: 1px 1px 0px #fff;
}

.module-list {
    list-style: none;
    padding-left: 10px;
    font-size: 1.1em;
}

.module-list li {
    margin-bottom: 6px;
    position: relative;
}

.module-list li::before {
    content: ">";
    margin-right: 8px;
    color: var(--color-principal);
    font-weight: bold;
}

/* Etiquetas de estado o destacados */
.status-tag {
    background: var(--color-claro);
    border: 1px dashed var(--color-oscuro);
    padding: 4px 8px;
    font-size: 0.85em;
    display: inline-block;
    margin: 5px 0;
}

/* --- MÓDULO COMPACTO PARA CRÉDITOS --- */
.credits-module-section {
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 2px solid var(--color-borde);
}

.credits-module-title {
    font-size: 0.85em; /* Letra más pequeña */
    color: var(--color-oscuro);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: bold;
}

.credits-module-title span {
    background: var(--color-principal);
    color: white;
    padding: 1px 4px;
    font-size: 1em;
    border: 1px solid #000;
    box-shadow: 1px 1px 0px #fff;
}

.credits-module-text {
    font-size: 0.75em; /* Texto descriptivo más pequeño */
    margin: 0;
    padding-left: 10px;
    color: var(--color-oscuro);
}

.credits-module-name {
    font-weight: bold;
    font-size: 10px;
}

/* =============================
   AJUSTE PARA ATABOOK GUESTBOOK
   ============================= */
.guestbook-container {
    background: #fff;
    border: 2px solid #000;
    box-shadow: inset 2px 2px #808080; /* Efecto de profundidad retro */
    margin-top: 10px;
    overflow: hidden;
}

#atabook-frame {
    /* Esto suaviza la carga del iframe */
    background-color: #ffffff;
}