/* ==========================================================================
   TEMA CAFE (claro, nacido como tema Pikmin)
   Capa de tema sobre style.css inspirada en el lado natural de Pikmin: fondo
   crema con brotes de Pikmin (hoja, capullo y flor), paneles blancos cálidos
   con bordes suaves, verde hoja como color principal y los colores de los
   Pikmin (rojo, amarillo, azul) como acentos. Sin brillos ni neón.
   Comparte la estructura del tema Wii; las variables --pk-blue* son el verde
   hoja (conservan el nombre de la plantilla de la que salen).
   ========================================================================== */

:root {
    --pk-bg: #f3efdf;
    --pk-panel: #fffdf6;
    --pk-panel-2: #f7f3e4;
    --pk-line: #ddd5ba;
    --pk-line-soft: #ebe5cf;
    --pk-text: #4a4a3c;
    --pk-text-strong: #33352a;
    --pk-muted: #6e6c58;
    --pk-blue: #6dbf45;
    --pk-blue-dark: #3f8a26;
    --pk-blue-soft: rgba(90, 168, 60, 0.16);
    --pk-red: #e5484d;
    --pk-green: #3fb950;
    --pk-shadow: 0 10px 30px rgba(70, 60, 30, 0.12);
    --pk-shadow-lg: 0 24px 60px rgba(70, 60, 30, 0.18);
    --pk-font: "FOT-Rodin Pro", "FOT-RodinNTLG Pro", "Rodin NTLG", "M PLUS 1p", Arial, sans-serif;
    --pk-font-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Botón: píldora blanca cálida con borde verde hoja claro */
    --pk-btn-fondo: linear-gradient(180deg, #ffffff 0%, #fffef8 42%, #ece8d6 100%);
    --pk-btn-borde: #a9d68f;
    --pk-btn-sombra: inset 0 0 0 2px rgba(255, 255, 255, 0.95), inset 0 -8px 12px rgba(170, 160, 120, 0.16), 0 2px 6px rgba(70, 60, 30, 0.12);

    /* Fondo de las ventanas: liso. Fijo a la pantalla para que la capa de
       VikingFile coincida con el panel. */
    --pk-rayas-panel: linear-gradient(180deg, #fffefa 0%, #fbf8ec 100%);

    --bg: var(--pk-bg);
    --card: var(--pk-panel);
    --text: var(--pk-text);
    --accent: var(--pk-blue);
    --accent2: var(--pk-blue-dark);
    --border: var(--pk-line);
}

/* ----- Base ----- */
body {
    /* Texto corrido con la fuente del sistema (las fuentes web japonesas se
       ven borrosas en Windows a tamaño pequeño); títulos y botones usan
       la fuente estilo Rodin. */
    font-family: var(--pk-font-texto);
    color: var(--pk-text);
    /* Brotes de Pikmin (hoja verde, capullo amarillo, flor azul y hoja roja)
       sobre crema, con un toque de luz de bosque arriba y verde abajo */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke-linecap='round' opacity='0.3'%3E%3Cg transform='translate(40 70)'%3E%3Cpath d='M0 40 Q2 18 0 0' stroke='%235aa83c' stroke-width='2'/%3E%3Cpath d='M0 0 C-12 -6 -14 -22 0 -30 C14 -22 12 -6 0 0Z' fill='%235aa83c'/%3E%3C/g%3E%3Cg transform='translate(170 50)'%3E%3Cpath d='M0 40 Q-3 20 0 0' stroke='%235aa83c' stroke-width='2'/%3E%3Ccircle cx='0' cy='-6' r='7' fill='%23f2c12e'/%3E%3Cpath d='M-6 -8 Q0 -22 6 -8' fill='%23f7d969'/%3E%3C/g%3E%3Cg transform='translate(110 190)'%3E%3Cpath d='M0 40 Q3 20 0 0' stroke='%235aa83c' stroke-width='2'/%3E%3Cg fill='%234d9be6'%3E%3Ccircle cx='0' cy='-14' r='6'/%3E%3Ccircle cx='13' cy='-4' r='6'/%3E%3Ccircle cx='8' cy='11' r='6'/%3E%3Ccircle cx='-8' cy='11' r='6'/%3E%3Ccircle cx='-13' cy='-4' r='6'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='5' fill='%23f2c12e'/%3E%3C/g%3E%3Cg transform='translate(225 175)'%3E%3Cpath d='M0 34 Q2 16 0 0' stroke='%235aa83c' stroke-width='2'/%3E%3Cpath d='M0 0 C-10 -5 -12 -18 0 -25 C12 -18 10 -5 0 0Z' fill='%23e5484d'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(1200px 500px at 50% 0%, rgba(255, 255, 240, 0.9), transparent 70%),
        radial-gradient(1000px 500px at 50% 100%, rgba(150, 200, 110, 0.25), transparent 70%),
        linear-gradient(180deg, #f8f5e8 0%, var(--pk-bg) 60%, #ebe6cf 100%);
    background-size: 260px 260px, auto, auto, auto;
    background-attachment: fixed;
}

button,
h1, h2, h3, h4,
.preview-title,
.preview-meta .value,
.music-title {
    font-family: var(--pk-font);
}

input,
select,
textarea {
    font-family: inherit;
}

/* El fondo de estrellas no tiene sentido sobre un fondo claro */
#stars {
    display: none;
}

/* ----- Scrollbar ----- */
* {
    scrollbar-color: #cfc8ad transparent;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-left: none;
}

::-webkit-scrollbar-thumb {
    background: #cfc8ad;
    border: 3px solid var(--pk-bg);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--pk-blue);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ----- Mezclas reutilizables (botones) ----- */
/* Botón secundario: píldora blanca cálida con borde verde hoja claro
   (sin brillos, como los menús claros de Pikmin) */
.header-btn button:not(.admin-profile-btn),
.pagination button,
.login-content button,
.captcha-tab,
.success-close-btn,
.cart-close-btn,
.boton-fila .bf-acciones button,
.admin-game-item .btn-edit,
.admin-game-item .btn-delete {
    background: var(--pk-btn-fondo) !important;
    border: 3px solid var(--pk-btn-borde) !important;
    border-radius: 999px !important;
    color: var(--pk-text-strong) !important;
    font-weight: 500 !important;
    box-shadow: var(--pk-btn-sombra) !important;
    text-shadow: none !important;
}

/* En los botones pequeños (encabezado, paginación, iconos) el borde de 3px
   pesa demasiado */
.header-btn button:not(.admin-profile-btn),
.pagination button,
.boton-fila .bf-acciones button,
.admin-game-item .btn-edit,
.admin-game-item .btn-delete {
    border-width: 2px !important;
}

.header-btn button:not(.admin-profile-btn):hover,
.pagination button:hover,
.login-content button:hover,
.captcha-tab:hover,
.success-close-btn:hover,
.cart-close-btn:hover,
.boton-fila .bf-acciones button:hover,
.admin-game-item .btn-edit:hover {
    border-color: var(--pk-blue) !important;
    color: var(--pk-blue-dark) !important;
    box-shadow: 0 0 0 3px var(--pk-blue-soft), 0 3px 8px rgba(70, 60, 30, 0.1) !important;
}

/* Botón principal: verde hoja con un ligero brillo */
.btn:not([style]),
.accept-btn,
#btnGuardar,
.checkout-btn,
.download-link-btn,
.descarga-viking-boton,
.btn.blue.cart-add-btn {
    background: linear-gradient(180deg, #a6e07f 0%, #6dbf45 48%, #57ad31 52%, #62b83a 100%) !important;
    border: 2px solid #4a9a2c !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(30, 70, 10, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 3px 8px rgba(74, 154, 44, 0.25) !important;
}

.btn:not([style]):hover,
.accept-btn:hover,
#btnGuardar:hover,
.checkout-btn:hover,
.download-link-btn:hover,
.btn.blue.cart-add-btn:hover {
    filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 3px var(--pk-blue-soft), 0 5px 12px rgba(74, 154, 44, 0.3) !important;
}

/* Variante verde (tutorial, carrito añadido, pago) */
.btn.green,
.btn.green.cart-add-btn,
.checkout-btn {
    background: linear-gradient(180deg, #8ee59a 0%, #4cc760 48%, #36b44b 52%, #3fbd54 100%) !important;
    border-color: #2fa043 !important;
    text-shadow: 0 1px 1px rgba(0, 70, 20, 0.35) !important;
}

.download-all-btn {
    background: linear-gradient(180deg, #ffd46b 0%, #ffbb1c 48%, #f5a800 52%, #ffb30f 100%) !important;
    border: 2px solid #e09a00 !important;
    color: #5a3c00 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 8px rgba(224, 154, 0, 0.25) !important;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header-btn {
    background: linear-gradient(180deg, #ffffff 0%, #f6f3e6 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2px solid var(--pk-line);
    box-shadow: 0 4px 16px rgba(70, 60, 30, 0.08);
    padding: 6px 20px;
}

.logo h1 {
    color: var(--pk-text-strong);
    font-weight: 800;
    font-size: 17px;
}

#buscador {
    color: var(--pk-text);
    background: #fff;
    border: 2px solid var(--pk-line);
    border-radius: 999px;
    padding: 7px 14px;
    box-shadow: inset 0 2px 3px rgba(70, 60, 30, 0.07);
}

#buscador::placeholder {
    color: var(--pk-muted);
}

#buscador:focus {
    border-color: var(--pk-blue);
    background: #fff;
    box-shadow: inset 0 2px 3px rgba(70, 60, 30, 0.05), 0 0 0 3px var(--pk-blue-soft);
}

.header-btn button:not(.admin-profile-btn) {
    border-radius: 999px;
    height: 28px;
    padding: 5px 12px;
    font-weight: 700;
}

/* Switch Juegos / Homebrew */
.homebrew-switch {
    background: #fff;
    border: 2px solid var(--pk-line);
}

.homebrew-switch:hover,
.homebrew-switch.active {
    border-color: var(--pk-blue);
    background: #fff;
}

.homebrew-switch .hbs-track {
    background: #e4dfcb;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.homebrew-switch .hbs-knob {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.homebrew-switch .hbs-input:checked + .hbs-track {
    background: var(--pk-blue);
}

.homebrew-switch .hbs-label {
    color: var(--pk-text);
    font-weight: 700;
}

/* Carrito del header */
.cart-btn-header {
    background: linear-gradient(180deg, #ffffff 0%, #eaf8ee 100%) !important;
    border: 2px solid #a6dfb2 !important;
    color: #2b9a40 !important;
}

.cart-badge {
    background: var(--pk-green);
}

/* Perfil */
.admin-profile-btn img,
.music-icon {
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--pk-line), 0 3px 8px rgba(70, 60, 30, 0.15);
}

.admin-profile-btn:hover {
    background: transparent;
}

.admin-profile-btn:hover img {
    box-shadow: 0 0 0 2px var(--pk-blue), 0 0 0 5px var(--pk-blue-soft);
}

/* ----- Reproductor ----- */
.music-title {
    color: var(--pk-text-strong);
}

.music-control .music-btn,
.music-control .skip-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--pk-text);
    background: linear-gradient(180deg, #ffffff 0%, #eceff2 100%);
    border: 2px solid var(--pk-line);
}

.music-control .music-btn:hover,
.music-control .skip-btn:hover {
    color: var(--pk-blue-dark);
    border-color: var(--pk-blue);
    background: #fff;
}

.volume-icon {
    color: var(--pk-muted);
}

.volume-icon:hover {
    color: var(--pk-blue);
}

.volume-icon.muted {
    color: #c4bda2;
}

#volumeSlider::-webkit-slider-thumb {
    background: #fff;
    border: 2px solid var(--pk-blue);
}

#volumeSlider::-moz-range-thumb {
    background: #fff;
    border: 2px solid var(--pk-blue);
}

.music-playlist {
    background: #fff;
    border: 2px solid var(--pk-line);
    border-radius: 16px;
    box-shadow: var(--pk-shadow);
}

.music-playlist .playlist-item {
    color: var(--pk-text);
    border-radius: 10px;
}

.music-playlist .playlist-item img {
    border: 1px solid var(--pk-line);
}

.music-playlist .playlist-item:hover,
.music-playlist .playlist-item.active {
    background: var(--pk-blue-soft);
    border-color: var(--pk-blue);
    box-shadow: none;
}

/* ==========================================================================
   TIENDA: CANALES
   ========================================================================== */
.store {
    gap: 8px;
    padding: 14px 20px 4px;
}

/* Cada juego es un "canal": marco blanco redondeado con borde gris */
.card {
    background: var(--pk-panel);
    border: 2px solid var(--pk-line);
    border-radius: 18px;
    /* Solo relleno vertical: la portada es algo más estrecha que el canal para
       que la tarjeta mida lo mismo que antes y quepan las mismas filas */
    padding: 4px 0;
    box-shadow: inset 0 -3px 0 #f1eedf, 0 3px 10px rgba(70, 60, 30, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 4px var(--pk-blue-soft), 0 10px 22px rgba(74, 154, 44, 0.18);
}

.card img {
    width: 86%;
    border-radius: 13px;
}

.card .content {
    inset: 4px;
    border-radius: 13px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0) 72%);
}

.info-overlay h3 {
    color: var(--pk-text-strong);
    font-weight: 800;
}

.info-overlay p {
    color: var(--pk-muted);
}

.btn {
    border-radius: 999px;
    font-weight: 700;
}

.admin-actions button {
    background: #fff;
    border: 2px solid #f3b4b6;
    color: var(--pk-red);
    border-radius: 999px;
}

/* Emuladores y recursos */
#emuladoresStore .card,
#recursosStore .card {
    background: var(--pk-panel);
    border: 2px solid var(--pk-line);
    border-radius: 20px;
}

#emuladoresStore .card:hover,
#recursosStore .card:hover {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 4px var(--pk-blue-soft), 0 10px 22px rgba(74, 154, 44, 0.18);
}

#emuladoresStore .card img,
#recursosStore .card img {
    border-radius: 14px;
}

#emuladoresStore .content,
#recursosStore .content {
    inset: auto;
    background: none;
}

#emuladoresStore .info-overlay p,
#recursosStore .info-overlay p {
    color: var(--pk-muted);
}

/* ----- Paginación ----- */
.pagination button {
    border-radius: 999px;
    min-width: 36px;
    font-weight: 700;
}

.pagination button.active {
    background: linear-gradient(180deg, #a6e07f 0%, #6dbf45 100%) !important;
    border-color: #4a9a2c !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(30, 70, 10, 0.35) !important;
}

/* ==========================================================================
   MODALES
   ========================================================================== */
#loginBox,
#emuladoresBox,
#recursosBox,
#donacionesBox,
#descargaBox,
#captchaBox,
#cartBox,
#purchaseSuccessBox,
#previewBox {
    background: rgba(226, 232, 238, 0.88);
}

.login-content,
.success-content,
.captcha-content,
.preview-content {
    background: var(--pk-rayas-panel);
    background-attachment: fixed;
    border: 3px solid var(--pk-line-soft);
    border-radius: 28px;
    color: var(--pk-text);
    box-shadow: var(--pk-shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.login-content h3,
.admin-profile h3,
.success-content h2 {
    color: var(--pk-text-strong);
    font-weight: 800;
}

.login-content input {
    background: var(--pk-panel-2);
    color: var(--pk-text);
    border: 2px solid var(--pk-line);
    border-radius: 999px;
    padding: 12px 18px;
}

.login-content input:focus {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 3px var(--pk-blue-soft);
}

.login-content button {
    border-radius: 999px;
}

.admin-profile img {
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--pk-line), var(--pk-shadow);
}

.admin-profile p {
    color: var(--pk-muted);
}

/* ----- Descarga ----- */
#descargaNombre {
    color: var(--pk-blue-dark) !important;
}

#descargaEstado {
    color: var(--pk-muted);
}

.progress-bar,
#descargaBox .progress-bar {
    height: 10px;
    background: #e9e4d1;
    border: none;
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.progress-fill,
#descargaBox .progress-fill {
    border-radius: 999px;
    background: linear-gradient(180deg, #a6e07f 0%, #6dbf45 50%, #57ad31 100%);
    box-shadow: none;
}

#descargaBox .descarga-cancelar {
    background: #fff !important;
    border: 2px solid #f3b4b6 !important;
    color: var(--pk-red) !important;
    box-shadow: none !important;
}

#descargaBox .descarga-cancelar:hover {
    background: #fff5f5 !important;
    border-color: var(--pk-red) !important;
    color: var(--pk-red) !important;
}

/* VikingFile incrustado: la página ya es clara, así que no se invierte; la
   capa que la tapa usa el blanco del panel para no notarse. */
#descargaVikingFrame,
#captchaFrame {
    filter: none;
    background: #fff;
}

.descarga-viking-tinte,
.captcha-tinte {
    display: none;
}

.descarga-viking-capa,
.captcha-tapa,
.captcha-cargando,
.captcha-marco {
    background: var(--pk-rayas-panel);
    background-attachment: fixed;
}

.descarga-viking-boton {
    border-radius: 999px;
}

.captcha-header,
.captcha-close {
    color: var(--pk-text-strong);
}

.captcha-cargando,
.captcha-hosting {
    color: var(--pk-blue-dark);
}

/* ----- Bienvenida ----- */
#welcomeScreen {
    background: linear-gradient(rgba(240, 244, 248, 0.55), rgba(232, 237, 242, 0.75)),
                url('assets/images/Background.jpg') center/cover no-repeat;
}

.welcome-overlay {
    background: rgba(255, 255, 255, 0.2);
}

.welcome-box {
    background: var(--pk-rayas-panel);
    background-attachment: fixed;
    border: 3px solid var(--pk-line-soft);
    border-radius: 32px;
    box-shadow: var(--pk-shadow-lg);
}

.welcome-box h2 {
    color: var(--pk-text-strong);
    text-shadow: none;
}

.welcome-box p {
    color: var(--pk-text);
}

.welcome-box img {
    filter: drop-shadow(0 6px 14px rgba(70, 60, 30, 0.18));
}

.accept-btn {
    border-radius: 999px;
}

/* ----- Donaciones ----- */
.donate-btn {
    background: linear-gradient(180deg, #ffffff 0%, #f1eedf 100%);
    color: var(--pk-text);
    border: 2px solid var(--pk-line);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(70, 60, 30, 0.1);
}

.donate-btn:hover {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 3px var(--pk-blue-soft), 0 5px 12px rgba(70, 60, 30, 0.12);
}

/* ==========================================================================
   FICHA DEL JUEGO
   ========================================================================== */
.preview-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #f1eedf 100%);
    border: 2px solid var(--pk-line);
    color: var(--pk-text);
    font-size: 15px;
    opacity: 1;
}

.preview-close:hover {
    border-color: var(--pk-red);
    color: var(--pk-red);
}

.preview-cover img {
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--pk-line), var(--pk-shadow);
    background: var(--pk-panel-2);
}

.preview-title {
    color: var(--pk-text-strong);
    font-weight: 800;
}

/* Texto largo sobre las rayas: más oscuro y con más peso para que se lea */
.preview-desc {
    color: var(--pk-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.preview-file-info {
    color: var(--pk-text);
    font-size: 12px;
    font-weight: 500;
}

/* Etiquetas azules: un azul más oscuro (el azul cielo sobre blanco tiene poco
   contraste y se ve borroso) y la fuente del sistema, que es nítida. */
.preview-file-info .fi b,
.preview-meta .label {
    color: #356f1f;
    font-family: var(--pk-font-texto);
    font-weight: 700;
}

.preview-meta .label {
    font-size: 11px;
    letter-spacing: 0.5px;
}

.preview-meta {
    background: var(--pk-panel-2);
    border: 2px solid var(--pk-line-soft);
    border-radius: 16px;
}

.preview-meta .value {
    color: var(--pk-text-strong);
}

.preview-meta .value.gold {
    color: #e09a00;
}

.preview-main {
    border: 2px solid var(--pk-line);
    border-radius: 16px;
    background: #1b1d20;
}

.preview-thumbs .thumb {
    border: 2px solid var(--pk-line);
    border-radius: 10px;
    opacity: 0.6;
}

.preview-thumbs .thumb.active {
    border-color: var(--pk-blue);
    box-shadow: 0 0 0 3px var(--pk-blue-soft);
}

/* Botones de descarga (misma píldora): píldora blanca y el color de su tipo
   (variable --c, la pone script.js) solo en el borde y el icono. */
.preview-links .btn,
.btn-partes-toggle,
.btn-parte {
    background: var(--pk-btn-fondo) !important;
    color: var(--pk-text-strong) !important;
    font-weight: 500 !important;
    border-radius: 999px !important;
    border: 3px solid var(--c, var(--pk-btn-borde)) !important;
    text-shadow: none !important;
    box-shadow: var(--pk-btn-sombra) !important;
    transition: box-shadow 0.2s, background 0.2s !important;
}

.preview-links .btn i,
.btn-partes-toggle i,
.btn-parte i {
    color: var(--c, var(--pk-blue));
}

.preview-links .btn:hover,
.btn-partes-toggle:hover,
.btn-parte:hover {
    filter: none !important;
    background: color-mix(in srgb, var(--c, var(--pk-blue)) 10%, #ffffff) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--pk-blue)) 22%, transparent), 0 3px 8px rgba(70, 60, 30, 0.12) !important;
}

.preview-links .btn-partes,
.preview-links .btn-partes:hover {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    text-shadow: none !important;
}

/* ==========================================================================
   CARRITO, ÉXITO Y AVISOS
   ========================================================================== */
.cart-item {
    background: var(--pk-panel-2);
    border: 2px solid var(--pk-line-soft);
    border-radius: 14px;
    box-shadow: none;
}

.cart-item-img {
    border: 1px solid var(--pk-line);
    border-radius: 10px;
}

.cart-item span {
    color: var(--pk-text-strong);
}

.cart-total {
    color: var(--pk-text-strong);
}

.cart-total span,
.success-icon,
.success-content h2 {
    color: var(--pk-green);
}

.success-content p {
    color: var(--pk-muted);
}

.checkout-btn:disabled {
    background: #cfd5db !important;
    border-color: #c4bda2 !important;
}

.toast {
    background: #fff;
    border: 2px solid var(--pk-line);
    color: var(--pk-text-strong);
    border-radius: 999px;
    box-shadow: var(--pk-shadow);
}

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN
   ========================================================================== */
#adminPanel {
    --ap-border: var(--pk-line);
    --ap-surface: var(--pk-panel-2);
    --ap-field: #fff;
    --ap-accent: var(--pk-blue);
    --ap-accent2: var(--pk-blue-dark);

    background: var(--pk-rayas-panel);
    background-attachment: fixed;
    border: 3px solid var(--pk-line-soft);
    border-radius: 26px;
    box-shadow: var(--pk-shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.admin-header h3,
.admin-section h4,
.admin-list h4,
.admin-field .admin-homebrew-label,
.admin-game-item-info span {
    color: var(--pk-text-strong);
}

.admin-header h3 i {
    color: #fff;
    border-radius: 50%;
}

.admin-header-sub,
.admin-field label,
.admin-field .admin-homebrew-label small,
.admin-game-item-info small,
.admin-empty,
.admin-search-wrap i {
    color: var(--pk-muted);
}

.admin-section {
    border-width: 2px;
    border-radius: 20px;
}

.admin-section:hover,
.admin-section:focus-within {
    border-color: var(--pk-blue);
}

.admin-section h4 i {
    border-radius: 50%;
    background: var(--pk-blue-soft);
    border-color: transparent;
}

.admin-field input[type="text"],
.admin-field textarea,
#adminSearch,
.boton-fila select,
.boton-fila input[type="text"],
.boton-fila textarea,
.boton-agregar select {
    color: var(--pk-text);
    border-width: 2px;
    border-radius: 12px;
}

.admin-field input::placeholder,
.admin-field textarea::placeholder,
#adminSearch::placeholder,
.boton-fila input::placeholder,
.boton-fila textarea::placeholder {
    color: #aab1b9;
}

.admin-field input[type="text"]:hover,
.admin-field textarea:hover,
#adminSearch:hover {
    border-color: #cfc8ad;
}

.admin-field input[type="text"]:focus,
.admin-field textarea:focus,
#adminSearch:focus,
.boton-fila select:focus,
.boton-fila input[type="text"]:focus,
.boton-fila textarea:focus,
.boton-agregar select:focus {
    border-color: var(--pk-blue);
    background: #fff;
    box-shadow: 0 0 0 3px var(--pk-blue-soft);
}

.boton-fila select option,
.boton-agregar select option {
    background: #fff;
    color: var(--pk-text);
}

.admin-field .admin-homebrew-label {
    background: var(--pk-panel-2);
    border: 2px solid var(--pk-line);
}

.admin-mode {
    background: #eefaf0;
    border: 2px solid #a6dfb2;
    color: #2b9a40;
}

.admin-mode.editing {
    background: #fff7e6;
    border-color: #f5cf7a;
    color: #b97800;
}

.admin-actions-bar {
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid var(--pk-line-soft);
    border-radius: 20px;
    box-shadow: 0 -6px 20px rgba(70, 60, 30, 0.08);
}

.admin-actions-bar button {
    border-radius: 999px;
}

#btnCancelar {
    background: #fff;
    border: 2px solid #f3b4b6;
    color: var(--pk-red);
}

.admin-list {
    border-width: 2px;
    border-radius: 20px;
}

.admin-count {
    background: var(--pk-blue-soft);
    border-color: transparent;
    color: var(--pk-blue-dark);
}

.admin-game-item {
    background: #fff;
    border: 2px solid var(--pk-line-soft);
}

.admin-game-item:hover {
    background: #fff;
    border-color: var(--pk-blue);
}

.admin-game-item img {
    box-shadow: 0 2px 6px rgba(70, 60, 30, 0.15);
}

.admin-game-item .btn-edit,
.admin-game-item .btn-delete {
    border-radius: 50%;
}

.admin-game-item .btn-delete:hover {
    border-color: var(--pk-red) !important;
    color: var(--pk-red) !important;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12) !important;
}

.hb-badge {
    color: #7c4dcc;
    background: #f2ecfd;
    border-color: #d5c4f7;
}

.boton-fila {
    background: #fff;
    border-width: 2px;
    border-left-width: 6px;
    border-radius: 16px;
}

.boton-fila .bf-acciones button {
    border-radius: 50%;
    width: 34px;
    height: 34px;
}

.boton-fila .bf-acciones button[data-op="borrar"]:hover {
    border-color: var(--pk-red) !important;
    color: var(--pk-red) !important;
}

.boton-fila .bf-paleta button {
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--pk-line);
}

.boton-fila .bf-paleta button:hover {
    border-color: #fff;
    box-shadow: 0 0 0 2px var(--pk-blue);
}

.boton-agregar button {
    border: 2px dashed var(--pk-blue);
    border-radius: 999px;
    background: var(--pk-blue-soft);
    color: var(--pk-blue-dark);
    font-weight: 700;
}

/* ==========================================================================
   RESPONSIVE: sustituye los fondos oscuros que style.css fuerza con !important
   ========================================================================== */
@media (max-width: 1200px) {
    .header-btn {
        background: linear-gradient(180deg, #ffffff 0%, #f6f3e6 100%) !important;
    }
}

@media (max-width: 1100px) {
    .music-control {
        background: rgba(255, 255, 255, 0.96) !important;
        border: 2px solid var(--pk-line) !important;
        border-radius: 999px !important;
        box-shadow: var(--pk-shadow) !important;
    }
}

@media (max-width: 768px) {
    .header-btn {
        background: linear-gradient(180deg, #ffffff 0%, #f6f3e6 100%) !important;
        border: 2px solid var(--pk-line) !important;
        border-radius: 22px !important;
        box-shadow: var(--pk-shadow) !important;
    }

    .header-actions .admin-profile-btn {
        background: #fff !important;
        border: 2px solid var(--pk-line) !important;
        border-radius: 20px !important;
        box-shadow: inset 0 -3px 0 #f1eedf !important;
    }

    .header-actions .admin-profile-btn img {
        border: 3px solid #fff !important;
        box-shadow: 0 0 0 2px var(--pk-line) !important;
    }

    .header-actions .admin-profile-btn span {
        color: var(--pk-text-strong) !important;
        text-shadow: none !important;
    }

    .store {
        gap: 10px !important;
    }
}

/* ==========================================================================
   BOTONES DE LAS TARJETAS (Ver enlace / Agregar)
   Mismo botón claro, en tamaño compacto
   ========================================================================== */
.card .btns {
    gap: 5px;
}

.card .btns .btn,
.card .btns .btn.blue.cart-add-btn,
.card .btns .btn.green.cart-add-btn {
    background: var(--pk-btn-fondo) !important;
    border: 2px solid var(--pk-btn-borde) !important;
    border-radius: 999px !important;
    color: var(--pk-text-strong) !important;
    text-shadow: none !important;
    box-shadow: var(--pk-btn-sombra) !important;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.card .btns .btn i {
    color: var(--pk-blue-dark);
}

/* Ya en el carrito: borde e icono verdes */
.card .btns .btn.green.cart-add-btn {
    border-color: #8fdc9c !important;
}

.card .btns .btn.green.cart-add-btn i {
    color: var(--pk-green);
}

.card .btns .btn:hover {
    filter: none;
    border-color: var(--pk-blue) !important;
    box-shadow: 0 0 0 3px var(--pk-blue-soft), var(--pk-btn-sombra) !important;
}

/* Botón "Cerrar" de las ventanas anchas (emuladores, recursos, donaciones):
   tamaño de botón normal y centrado, en vez de ocupar todo el ancho */
#emuladoresBox .login-content > button,
#recursosBox .login-content > button,
#donacionesBox .login-content > button {
    width: 220px;
    max-width: 100%;
    padding: 10px 0;
    font-size: 14px;
}

/* Selector de tema */
.tema-selector {
    background: var(--pk-btn-fondo);
    border: 2px solid var(--pk-btn-borde);
    box-shadow: var(--pk-btn-sombra);
    color: var(--pk-text-strong);
}

.tema-selector i {
    color: var(--pk-blue-dark);
}

.tema-selector:hover,
.tema-selector:focus-within {
    border-color: var(--pk-blue);
}

.tema-selector select {
    font-weight: 500;
}

.tema-selector select option {
    background: #fff;
    color: var(--pk-text);
}

/* ==========================================================================
   BOTONES ESTILO PIKMIN
   Sustituyen a las píldoras con degradado del tema Wii: rectángulos
   redondeados planos de color crema con un canto inferior grueso (aspecto
   de botón físico, como los menús de Pikmin 4) y el punto de brillo de los
   botones de Pikmin 3. Al pasar el ratón se vuelven verde hoja y al pulsar
   se hunden.
   ========================================================================== */
:root {
    /* Sin punto de brillo: capa vacía para no tocar los fondos que la usan */
    --pk-punto: linear-gradient(transparent, transparent);
    --pk-canto: #d8cfae;
}

.header-btn button:not(.admin-profile-btn),
.pagination button,
.login-content button,
.captcha-tab,
.success-close-btn,
.cart-close-btn,
.boton-fila .bf-acciones button,
.admin-game-item .btn-edit,
.admin-game-item .btn-delete,
.btn:not([style]),
.card .btns .btn,
.card .btns .btn.blue.cart-add-btn,
.card .btns .btn.green.cart-add-btn,
.accept-btn,
#btnGuardar,
.checkout-btn,
.download-link-btn,
.download-all-btn,
.donate-btn,
.descarga-viking-boton,
.preview-links .btn,
.btn-partes-toggle,
.btn-parte {
    background: var(--pk-punto), #fffdf3 !important;
    color: var(--pk-text-strong) !important;
    border: 2px solid var(--pk-canto) !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 0 var(--pk-canto), 0 6px 12px rgba(70, 60, 30, 0.12) !important;
    transition: background 0.15s, box-shadow 0.1s, transform 0.1s, color 0.15s !important;
}

/* Botones de descarga de la ficha: el color de su tipo (--c) en el canto */
.preview-links .btn,
.btn-partes-toggle,
.btn-parte {
    border-color: var(--c, var(--pk-canto)) !important;
    box-shadow: 0 4px 0 var(--c, var(--pk-canto)), 0 6px 12px rgba(70, 60, 30, 0.12) !important;
}

.header-btn button:not(.admin-profile-btn):hover,
.pagination button:hover,
.pagination button.active,
.login-content button:hover,
.captcha-tab:hover,
.success-close-btn:hover,
.cart-close-btn:hover,
.boton-fila .bf-acciones button:hover,
.admin-game-item .btn-edit:hover,
.btn:not([style]):hover,
.card .btns .btn:hover,
.accept-btn:hover,
#btnGuardar:hover,
.checkout-btn:hover,
.download-link-btn:hover,
.download-all-btn:hover,
.donate-btn:hover {
    background: var(--pk-punto), #6dbf45 !important;
    color: #fff !important;
    border-color: #4a9a2c !important;
    box-shadow: 0 4px 0 #3f8a26, 0 6px 12px rgba(63, 138, 38, 0.25) !important;
    filter: none !important;
    transform: none !important;
}

.preview-links .btn:hover,
.btn-partes-toggle:hover,
.btn-parte:hover {
    background: var(--pk-punto), color-mix(in srgb, var(--c, #6dbf45) 14%, #fffdf3) !important;
    filter: none !important;
}

/* Al pulsar, el botón se hunde sobre su canto */
.header-btn button:not(.admin-profile-btn):active,
.pagination button:active,
.login-content button:active,
.btn:active,
.card .btns .btn:active,
.accept-btn:active,
#btnGuardar:active,
.checkout-btn:active,
.download-link-btn:active,
.download-all-btn:active,
.donate-btn:active,
.preview-links .btn:active,
.btn-partes-toggle:active,
.btn-parte:active {
    transform: translateY(3px) !important;
    box-shadow: 0 1px 0 var(--c, var(--pk-canto)), 0 2px 4px rgba(70, 60, 30, 0.12) !important;
}

/* Acciones peligrosas: rojo Pikmin */
#descargaBox .descarga-cancelar,
#btnCancelar,
.admin-game-item .btn-delete {
    color: var(--pk-red) !important;
    border-color: #f0b8b9 !important;
    box-shadow: 0 4px 0 #f0b8b9 !important;
}

#descargaBox .descarga-cancelar:hover,
.admin-game-item .btn-delete:hover {
    background: var(--pk-punto), var(--pk-red) !important;
    color: #fff !important;
    border-color: #c73a3f !important;
    box-shadow: 0 4px 0 #a92f33 !important;
}

/* Botón ya añadido al carrito: canto verde */
.card .btns .btn.green.cart-add-btn {
    border-color: #a6dfb2 !important;
    box-shadow: 0 3px 0 #a6dfb2 !important;
}

/* En botones pequeños el canto es más bajo */
.header-btn button:not(.admin-profile-btn),
.pagination button,
.card .btns .btn,
.boton-fila .bf-acciones button,
.admin-game-item .btn-edit,
.admin-game-item .btn-delete {
    border-radius: 10px !important;
    box-shadow: 0 3px 0 var(--pk-canto) !important;
}

/* Las cajas de los botones "Partes" no llevan estilo propio */
.preview-links .btn-partes,
.preview-links .btn-partes:hover,
.preview-links .btn-partes:active {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    transform: none !important;
}

.tema-selector {
    background: #fffdf3;
    border: 2px solid var(--pk-canto);
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--pk-canto);
}

.music-control .music-btn,
.music-control .skip-btn {
    background: #fffdf3;
    border: 2px solid var(--pk-canto);
    border-radius: 8px;
    box-shadow: 0 2px 0 var(--pk-canto);
}

/* Menú de temas en claro */
:root {
    --menu-fondo: #fffdf6;
    --menu-borde: var(--pk-line);
    --menu-texto: var(--pk-text-strong);
    --menu-hover: var(--pk-blue-soft);
    --menu-activo: rgba(90, 168, 60, 0.22);
    --menu-acento: var(--pk-blue-dark);
}