* {
    box-sizing: border-box;
}

:root {
    --duracion-apertura-eventos: 0.3s;
}

body {
    margin: 0;
    background: #111;
    color: white;
    font-family: Arial, sans-serif;
}


/* =========================
   ENCABEZADO
========================= */

header {
    height: 40px;

    background: #0b0b0b;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    border-bottom: 1px solid #333;
}

header h1 {
    margin: 0;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2px;
}

#dia {
    font-size: 13px;
    font-weight: 700;
}

/* =========================
   ESPACIO PUBLICITARIO
========================= */

#espacio-publicitario {
    width: 100%;
    height: 60px;

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

    background: #111;
}

.anuncio-placeholder {
    width: 320px;
    height: 50px;

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

    border: 1px dashed #555;

    color: #777;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================
   ESTRUCTURA PRINCIPAL
========================= */

main {
    display: flex;

    gap: 20px;

    padding: 20px;

}


/* =========================
   MAPA
========================= */

#mapa {
    position: relative;

    width: 75%;
    height: 750px;

    background: #1b1b1b;

    border: 1px solid #444;

    overflow: hidden;
}

.mapa-contenido {
    position: absolute;

    width: 520px;
    height: 750px;

    top: 0;
    left: 50%;

    transform: translateX(-50%);
}


/* =========================
   ZONAS
========================= */

.zona {
    position: absolute;
    width: 250px;
    min-height: 95px;
    background: #303030;
    border: 2px solid #666;
    border-radius: 10px;
    padding: 10px;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);

}

.zona h2 {
    margin: 0 0 12px 0;

    font-size: 15px;

    line-height: 1.3;
}

.zona-accesible {
    filter: brightness(1.25);
    border-color: #aaa;
    cursor: pointer;
}

.zona-bloqueada {
    filter: brightness(0.45);
    opacity: 0.65;
    cursor: not-allowed;
}

/* =========================
   POSICIÓN DE LAS ZONAS
========================= */

/*
             PLANTA
               |
             FABRICA — COMISARIA
               |         |
             HOSPITAL — CENTRO — TEMPLO
                          |        |
                     RESIDENCIAL — SUPERMERCADO
*/


.planta-agua { top: 30px; left: 0; }
.comisaria { top: 30px; left: 270px; }

.fabrica { top: 155px; left: 0; }
.centro { top: 155px; left: 270px; }

.hospital {
    top: 280px;
    left: 0;
    background: #303030;
    position: absolute;
}

.hospital::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("diseño/imagenes/hospital.jpeg");
    background-size: cover;
    background-position: center 20%;

    opacity: 0.15;
    filter: grayscale(100%);

    border-radius: 8px;

    z-index: 0;
}

.hospital h2,
.hospital .personajes {
    position: relative;
    z-index: 1;
}
.templo { top: 280px; left: 270px; }





/* =========================
   CONEXIONES
========================= */

.conexion {
    position: absolute;

    background: #777;

    z-index: 1;
}


/* CONEXIONES VERTICALES */

.conexion-vertical {
    width: 6px;
}


/* CONEXIONES HORIZONTALES */

.conexion-horizontal {
    height: 6px;
}


/* =========================
   PLANTA DE AGUA → FÁBRICA
========================= */

.conexion-agua-fabrica {
    top: 125px;
    left: 122px;
    height: 30px;
}


/* =========================
   FÁBRICA → CENTRO
========================= */

.conexion-fabrica-centro {
    top: 202px;
    left: 250px;
    width: 20px;
}


/* =========================
   FÁBRICA → HOSPITAL
========================= */

.conexion-fabrica-hospital {
    top: 250px;
    left: 122px;
    height: 30px;
}


/* =========================
   COMISARÍA → CENTRO
========================= */

.conexion-comisaria-centro {
    top: 125px;
    left: 392px;
    height: 30px;
}


/* =========================
   HOSPITAL → TEMPLO
========================= */

.conexion-hospital-templo {
    top: 327px;
    left: 250px;
    width: 20px;
}





/* =========================
   CENTRO → TEMPLO
========================= */

.conexion-centro-templo {
    top: 250px;
    left: 392px;
    height: 30px;
}







/* =========================
   PERSONAJES
========================= */

.personajes {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.personaje-mapa {
    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #ddd;

    color: #111;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 12px;

    font-weight: bold;

    cursor: pointer;
}

.personaje-mapa {
    overflow: hidden;

    flex: 0 1 32px;
    min-width: 0;

    aspect-ratio: 1 / 1;
}

.personaje-mapa .foto-personaje-mapa {
    width: 100%;
    height: 100%;
    min-width: 0;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
    display: block;
    pointer-events: none;
}

.personaje-critico {
    border: 2px solid red;
    animation: alertaCritica 1s ease-in-out infinite;
}

.zona.zona-accesible {
    border: 2px solid rgb(255, 255, 255);
    animation: alertaZona 1.8s ease-in-out infinite;
}

@keyframes alertaZona {

    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
    }
}

#informacion-mapa.ficha-critica {
    border: 2px solid red;
    animation: alertaCritica 1s ease-in-out infinite;
}

.dato-critico {
    color: red;
}

@keyframes alertaCritica {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.5);
    }
}


/* =========================
   PANEL
========================= */
#panel {
    position: absolute;

    width: 0;
    height: 0;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
}

#panel h2 {
    margin-top: 0;
}


/* =========================
   LISTA
========================= */

.personaje-panel {
    padding: 8px;

    margin-bottom: 5px;

    background: #303030;

    border-radius: 5px;

    font-size: 14px;
}

/* =========================
   FICHA DEL PERSONAJE
========================= */

#ficha-personaje {
    padding: 5px;
}

#ficha-personaje h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.ficha-nombre {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.ficha-dato {
    padding: 8px 0;
    border-bottom: 1px solid #444;
}

.ficha-dato {
    padding: 8px 0;
    border-bottom: 1px solid #444;
}


/* =========================
   ESTADÍSTICAS MODIFICADAS
========================= */

.estadistica-base-reducida {
    color: #ff4d4d;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    margin-right: 5px;
}

.estadistica-reducida {
    font-weight: bold;
}


.ficha-seccion {
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 16px;
}

.ficha-seccion {
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 16px;
}

.ficha-titulo {
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.2;
}

.ficha-titulo span {
    margin: 0 4px;
    color: #aaa;
}

.ficha-grid {
    display: flex;
    flex-direction: column;
}

.ficha-grid .ficha-dato:nth-child(1) { order: 1; }
.ficha-grid .ficha-dato:nth-child(4) { order: 2; }
.ficha-grid .ficha-dato:nth-child(2) { order: 3; }
.ficha-grid .ficha-dato:nth-child(5) { order: 4; }
.ficha-grid .ficha-dato:nth-child(6) { order: 5; }
.ficha-grid .ficha-dato:nth-child(3) { order: 6; }

.ficha-dato {
    min-width: 0;
    padding: 3px 0;
    line-height: 1.2;
}

.ficha-condiciones {
    display: block;
}

.ficha-condiciones span {
    display: inline;
}

.ficha-inventario {
    display: block;
}

/* =========================
   REGISTRO DE MUERTOS
========================= */

#registro-muertos {
    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid #444;
}

#registro-muertos h2 {
    margin-top: 0;
}

#lista-muertos {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;

    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 6px;

    width: 100%;
}

#lista-muertos p {
    white-space: nowrap;
    margin: 0;
}


/* ==========================================
   REGISTRO DIARIO - POPUP
========================================== */

#log-acciones {
    position: fixed;

    top: 50%;
    left: 50%;

    width: 560px;
    max-width: calc(100vw - 20px);

    min-height: 380px;
    max-height: 85vh;

    box-sizing: border-box;

    background: #252525;

    border: 2px solid #777;
    border-radius: 12px;

    padding: 24px;

    z-index: 1000;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);

    overflow-y: auto;

    transform: translate(-50%, -50%);

animation:
    aparecerPopup
    var(--duracion-apertura-eventos)
    ease-out;
}



#log-acciones.oculto {
    display: none;
}

#fondo-dilema {
    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.58);

    z-index: 999;

    opacity: 1;

    transition: opacity 0.22s ease;
}

#fondo-dilema.oculto {
    display: none;
}

#dilema-jugador {
    position: fixed;

    top: 50%;
    left: 50%;

    width: 560px;
    max-width: calc(100vw - 20px);

    min-height: 280px;
    max-height: 85vh;

    box-sizing: border-box;

    background: #252525;

    border: 2px solid #777;
    border-radius: 12px;

    padding: 24px;

    z-index: 1000;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);

    overflow-y: auto;

    transform: translate(-50%, -50%);

    animation: aparecerDilema 0.35s ease-out;
}

#dilema-jugador.oculto {
    display: none;
}

#dilema-jugador.saliendo {
    opacity: 0;
    transform: translate(-50%, -53%) scale(0.98);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

#cabecera-dilema {
    margin-bottom: 20px;
}

#cabecera-dilema h2 {
    margin: 0;

    font-size: 20px;

    text-align: center;
}

#opciones-dilema button {
    transition:
        transform 0.12s ease,
        filter 0.12s ease;
}

#opciones-dilema button:hover {
    filter: brightness(1.2);
}

#opciones-dilema button:active {
    transform: scale(0.94);
    filter: brightness(0.8);
}

@keyframes aparecerDilema {

    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

}

#contenido-dilema {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;
}

#texto-dilema-jugador {
    width: 100%;

    min-height: 100px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #1b1b1b;

    border-radius: 8px;

    padding: 20px;

    font-size: 18px;
}

#opciones-dilema {
    display: flex;

    justify-content: center;

    gap: 15px;

    width: 100%;
}

#opciones-dilema button {
    min-width: 130px;

    padding: 12px 18px;

    font-size: 15px;

    cursor: pointer;
}

#dilema-jugador.oculto {
    display: none;
}

#cabecera-log {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
}

#cabecera-log h2 {
    margin: 0;
    font-size: 18px;
}
#cerrar-log {
    font-size: 20px;
    cursor: pointer;

    background: none;
    border: none;
    color: white;
}

#contenido-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#categoria-accion {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#participantes-accion {
    width: 100%;
    min-height: 100px;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

#participantes-accion::after {
    content: "👆 Toca un personaje para ver su ficha";

    position: absolute;

    left: 50%;
    bottom: -15px;

    transform: translateX(-50%);

    padding: 5px 9px;

    background: rgba(45, 45, 45, 0.68);
    border-radius: 6px;

    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;

    z-index: 20;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    
}

@media (min-width: 701px) {

    #participantes-accion::after {
        font-size: 15px;
        padding: 7px 12px;
        border-radius: 8px;
        bottom: 4px;
    }

}


#participantes-accion.mostrar-aviso-ficha::after {
    visibility: visible;
    animation: parpadeo-aviso-ficha 2.6s ease-in-out infinite;
}

@keyframes parpadeo-aviso-ficha {
    0%, 20% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    80%, 100% {
        opacity: 1;
    }
}

#texto-accion {
    width: 100%;
    min-height: 110px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #1b1b1b;
    border-radius: 8px;

    padding: 20px;
}

#texto-accion strong {
    color: #ffd54f;
}

#navegacion-acciones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    margin-top: 20px;
}

#navegacion-acciones button {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    font-size: 18px;
    cursor: pointer;

    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

#contador-acciones {
    min-width: 50px;

    text-align: center;

    color: #aaa;
}

#abrir-log {
    position: fixed;

    bottom: 20px;
    right: 20px;

    padding: 10px 16px;

    cursor: pointer;

    z-index: 900;
}

#fondo-log {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.85);

    z-index: 999;
}

#fondo-log {
    opacity: 1;
}

#fondo-log.oculto {
    display: none;
}

/* ==========================================
   AVATARES DE PARTICIPANTES
========================================== */


.participante-accion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.avatar-accion {
    width: 64px;
    height: 64px;

    border-radius: 50%;

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

    font-size: 28px;
    font-weight: bold;

    color: white;

    box-sizing: border-box;
}

.nombre-participante {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}


@media (max-width: 700px) {

    main {
        display: block;
        padding: 10px;
    }

    #mapa {
        width: 100%;
        height: 300px;
        overflow: hidden;
        position: relative;
    }

   #panel {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
}

    .mapa-contenido {
        position: absolute;

        width: 520px;
        height: 590px;

        top: 70;
        left: 50%;

        transform: translateX(-50%) scale(0.64);
        transform-origin: top center;
    }

    



      #abrir-log {
        left: 20px;
        right: auto;
        bottom: 20px;
    }

    #siguiente-dia {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 900;
    }

        #abrir-log,
    #siguiente-dia {
        width: 130px;
        height: 40px;
        box-sizing: border-box;
    }

}

   
/* ==========================================
   INFORMACIÓN DEL MAPA
========================================== */
#informacion-mapa {
    position: relative;

    top: auto;
    left: auto;

    flex: 1;

    width: auto;
    height: 750px;

    box-sizing: border-box;

    background: #202020;
    border: 1px solid #444;
    border-radius: 10px;

    padding: 15px;

    overflow: hidden;


    box-sizing: border-box;

    background: #202020;
    border: 1px solid #444;
    border-radius: 10px;

    padding: 15px;

    overflow: hidden;
}

#informacion-mapa #registro-muertos {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

#informacion-mapa #ficha-personaje.ficha-activa h2 {
    grid-column: 1 / -1;
    margin: 0 0 6px 0;
    font-size: 13px;
    line-height: 1.1;
}

#informacion-mapa #ficha-personaje {
    display: none;
}

@media (max-width: 700px) {

    #informacion-mapa {
        position: relative;
        top: auto;
        left: auto;

        width: 90%;
        height: 80px;

        margin: 0 auto;

        padding: 10px;

        box-sizing: border-box;
        overflow: hidden;
    }

    #informacion-mapa #registro-muertos h2 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    #informacion-mapa #lista-muertos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px 10px;

        max-height: 75px;

        overflow-y: auto;
        overflow-x: hidden;
    }

    #informacion-mapa #lista-muertos p {
        margin: 0;
        font-size: 11px;
        line-height: 1.3;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-grid {
    display: grid;
    grid-template-columns: 0.7fr 0.7fr 1.6fr;
    gap: 0 8px;
}

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato {
        min-width: 0;
        padding: 0;
        font-size: 10px;
        line-height: 1.05;
        white-space: nowrap;
        border-bottom: none;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-condiciones,
    #informacion-mapa #ficha-personaje.ficha-activa .ficha-inventario {
        white-space: normal;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(3) {
        grid-column: 3;
        grid-row: 2;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    #informacion-mapa #ficha-personaje.ficha-activa .ficha-dato:nth-child(6) {
        grid-column: 3;
        grid-row: 1;
    }

}

@media (max-width: 700px) {

    #log-acciones {
        position: fixed;

        width: 90vw;
        height: 70vh;

        min-width: 0;
        min-height: 0;

        max-width: 90vw;
        max-height: 70vh;

        top: 50vh;
        left: 50vw;

        margin: 0;
        padding: 16px;

        transform: translate(-50%, -50%);

        box-sizing: border-box;
        overflow-y: auto;
    }

}

.transicion-dia {
    display: inline-block;
}

.transicion-dia.animar {
    animation: cambioDia 0.5s ease;
}

@keyframes cambioDia {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    40% {
        transform: scale(1.2);
        opacity: 0.4;
    }

    70% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#transicion-dia-mapa {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

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

    z-index: 1001;

    pointer-events: none;

    background: transparent;
}

#transicion-dia-mapa.modo-jugador::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 105px;

    background: rgba(0, 0, 0, 0.65);

    pointer-events: none;
}

#texto-transicion-dia {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 42px;
    font-weight: bold;
    color: white;

    opacity: 0;
    white-space: nowrap;
}

#transicion-dia-mapa.mostrar #texto-transicion-dia {
    animation: aparecerDia 0.7s ease-in-out forwards;
}

#transicion-dia-mapa.dia-preparacion #texto-transicion-dia {
    font-size: 30px;
}

#transicion-dia-mapa.fade-dia #texto-transicion-dia {
    animation: desaparecerDia 1s ease-in-out forwards;
}

@keyframes aparecerDia {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes desaparecerDia {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}



@keyframes oscurecerDia {

    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}



@keyframes aparecerPopup {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#fondo-log:not(.oculto) {
    animation: pruebaOscurecerFondo 0.6s ease-out forwards;
}

@keyframes pruebaOscurecerFondo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@keyframes aparecerFondoLog {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#informacion-mapa #ficha-personaje.ficha-activa {
    display: block;
}

.personaje-seleccionado {
    outline: 2px solid white;
    outline-offset: 2px;
}

#transicion-dia-mapa.modo-jugador.fade-dia::before {
    animation: desaparecerFranja 1s ease-in-out forwards;
}

@keyframes desaparecerFranja {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }

}

.personaje-seleccionado {
    outline: 2px solid white;
    outline-offset: 2px;
}

.personaje-jugador {
    border: 3px solid #2196f3;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.8);
}

.estadistica-mejorada {
    color: #22c55e;
    font-weight: 700;
}

/* ==========================================
   REGISTRO DE EVENTOS — DESKTOP
========================================== */

@media (min-width: 701px) {

    #log-acciones {
        width: 72vw;
        max-width: 1050px;

        height: 86vh;
        min-height: 0;
        max-height: 900px;

        padding: 32px;

        overflow: hidden;

        background-color: #252525;

background-image:
    radial-gradient(
        circle at 50% 35%,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.018) 35%,
        rgba(0, 0, 0, 0.20) 100%
    ),
    repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.020) 0px,
        rgba(255, 255, 255, 0.020) 1px,
        transparent 1px,
        transparent 4px
    );
    }

        #cabecera-log h2 {
        font-size: 26px;
    }

    #cerrar-log {
        font-size: 28px;
    }

    #categoria-accion {
        font-size: 32px;
    }

  #contenido-accion {
    height: calc(100% - 120px);
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;
}

#participantes-accion {
    height: auto;
    min-height: 0;

    gap: 75px;

    flex: 1 1 auto;
}

.avatar-accion {
    width: 200px;
    height: 200px;

    font-size: 48px;
}

    .nombre-participante {
        font-size: 18px;
    }

   #texto-accion {
    width: 78%;

    height: auto;
    min-height: 150px;

    flex: 0 0 auto;

    margin-left: auto;
    margin-right: auto;

    padding: 25px 35px;

    font-size: 22px;
    line-height: 1.4;

    box-sizing: border-box;
}

    #navegacion-acciones {
        height: 55px;
        margin-top: 10px;
        flex-shrink: 0;
    }

    #navegacion-acciones button {
        width: 58px;
        height: 58px;
        font-size: 26px;
    }

    #contador-acciones {
    font-size: 22px;
    min-width: 75px;
    }

        #texto-accion:has(.consecuencias-evento) {
        padding-top: 12px;
        padding-bottom: 12px;
    }

}
/* ==========================================
   REGISTRO DE EVENTOS — MÓVIL
========================================== */

@media (max-width: 700px) {

    #log-acciones {
        width: calc(100vw - 20px);
        max-width: none;

        height: 74vh;
        min-height: 0;
        max-height: 74vh;

        padding: 18px;

        overflow-y: hidden;

        background-color: #252525;

background-image:
    radial-gradient(
        circle at 50% 35%,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.018) 35%,
        rgba(0, 0, 0, 0.20) 100%
    ),
    repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.020) 0px,
        rgba(255, 255, 255, 0.020) 1px,
        transparent 1px,
        transparent 4px
    );
    }

    #contenido-accion {
    height: calc(100% - 110px);
}

#texto-accion {
    flex: 1;
    min-height: 0;

    font-size: 15px;
    line-height: 1.3;

    padding: 16px;
}


#navegacion-acciones {
    margin-top: 10px;
    height: 50px;
    flex-shrink: 0;
}

}

/* ==========================================
   EVENTOS DESTACADOS
========================================== */

/* Condiciones negativas */
#log-acciones.evento-peligro {
    border-color: rgba(255, 70, 70, 0.95);

    background-color: #3a2424;

    animation:
        aparecerPopup 1.2s ease-out,
        pulsoEventoPeligro 2.4s ease-in-out infinite;
}


/* Agradecido / Vengativo */
#log-acciones.evento-social {
    border-color: rgba(65, 175, 255, 0.95);

    background-color: #20384a;

    animation:
        aparecerPopup 1.2s ease-out,
        pulsoEventoSocial 2.4s ease-in-out infinite;
}

/* Abundancia de recursos */
#log-acciones.evento-abundancia {
    border-color: rgba(70, 210, 110, 0.95);

    background-color: #203b2a;

    animation:
        aparecerPopup 1.2s ease-out,
        pulsoEventoAbundancia 2.4s ease-in-out infinite;
}

/* Enamoramiento */
#log-acciones.evento-enamoramiento {
    border-color: rgba(255, 70, 180, 0.95);

    animation:
        aparecerPopup 1.2s ease-out,
        pulsoEventoEnamoramiento 2.4s ease-in-out infinite;
}


/* ==========================================
   PULSOS
========================================== */

@keyframes pulsoEventoPeligro {

    0%, 100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 10px rgba(255, 70, 70, 0.28),
            0 0 20px rgba(255, 70, 70, 0.10);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 24px rgba(255, 70, 70, 0.80),
            0 0 48px rgba(255, 70, 70, 0.32);
    }
}


@keyframes pulsoEventoSocial {

    0%, 100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 10px rgba(65, 175, 255, 0.28),
            0 0 20px rgba(65, 175, 255, 0.10);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 24px rgba(65, 175, 255, 0.80),
            0 0 48px rgba(65, 175, 255, 0.32);
    }
}

@keyframes pulsoEventoAbundancia {

    0%, 100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 10px rgba(70, 210, 110, 0.28),
            0 0 20px rgba(70, 210, 110, 0.10);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 24px rgba(70, 210, 110, 0.80),
            0 0 48px rgba(70, 210, 110, 0.32);
    }
}

/* ==========================================
   POSICIÓN DEL NÚMERO DE DÍA
========================================== */

#transicion-dia-mapa {
    transform: translateY(-20px);
}
/* ==========================================
   EVENTOS CON MUCHOS PARTICIPANTES — DESKTOP
========================================== */

@media (min-width: 701px) {

    #participantes-accion.participantes-compactos {
        gap: 10px;
        flex-wrap: nowrap;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #participantes-accion.participantes-compactos .participante-accion {
        flex: 1 1 0;
        min-width: 0;
        gap: 4px;
    }

    #participantes-accion.participantes-compactos .avatar-accion {
        width: clamp(32px, 4.5vw, 70px);
        height: clamp(32px, 4.5vw, 70px);
        font-size: clamp(15px, 2vw, 28px);
        flex-shrink: 0;
    }

    #participantes-accion.participantes-compactos .nombre-participante {
        width: 100%;
        font-size: 11px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================
   FICHA DE PERSONAJE DESDE EVENTOS — MÓVIL
========================================== */

#ficha-evento-movil {
    display: none;
}

@media (min-width: 701px) {

    #ficha-evento-movil:not(.oculto) {
    display: flex;

    position: fixed;
    top: 50%;
    left: auto;
    right: 16px;

    width: 220px;
    max-width: calc(100vw - 32px);
    min-height: 0;  

    transform: translateY(-50%);

    flex-direction: column;
    align-items: stretch;
    gap: 16px;

    padding: 26px;
    box-sizing: border-box;

    background: #252525;
    border: 1px solid #666;
    border-radius: 14px;

    color: white;

    z-index: 10001;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.65);
}

#ficha-evento-movil .ficha-evento-avatar {
    width: 82px;
    height: 82px;
    flex-shrink: 0;

    align-self: center;

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

    border-radius: 50%;

    font-size: 32px;
    font-weight: bold;
}


#ficha-evento-movil .ficha-evento-contenido {
    width: 100%;
    
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}


#ficha-evento-movil .ficha-evento-nombre {
    width: 100%;

    margin-bottom: 20px;

    text-align: center;
    font-size: 26px;
    font-weight: bold;
}


#ficha-evento-movil .ficha-evento-stats {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    font-size: 16px;
}


#ficha-evento-movil .ficha-evento-stats > span {
    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 7px 4px;

    box-sizing: border-box;

    border-bottom: 1px solid #3f3f3f;
}


#ficha-evento-movil .ficha-evento-stats > span:last-child {
    border-bottom: none;
}


#ficha-evento-movil .cerrar-ficha-evento {
    position: absolute;

    top: 8px;
    right: 10px;

    width: 28px;
    height: 28px;

    padding: 0;
    border: none;

    background: transparent;
    color: #aaa;

    font-size: 17px;
    line-height: 28px;

    cursor: pointer;
}
}

@media (min-width: 701px) and (max-width: 1100px) {

    body:has(#ficha-evento-movil:not(.oculto))
    #log-acciones:not(.oculto) {
        left: 12px !important;
        width: calc(100vw - 264px) !important;
        max-width: none !important;
        transform: translateY(-50%) !important;
    }

}

@media (max-width: 700px) {

    #ficha-evento-movil:not(.oculto) {
        display: flex;

        position: fixed;
        top: 12px;
        left: 50%;

        width: calc(100vw - 30px);
        max-width: 400px;
        min-height: 66px;

        transform: translateX(-50%);

        align-items: center;
        gap: 12px;

        padding: 10px 14px;
        box-sizing: border-box;

        background: #252525;
        border: 1px solid #666;
        border-radius: 12px;

        color: white;

        z-index: 10001;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);

        animation: bajarFichaEvento 0.25s ease-out;

        .participantes-extra {
    cursor: pointer;
    user-select: none;
}

#participantes-accion .participantes-extra .avatar-extra {
    width: 64px;
    height: 64px;

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

    box-sizing: border-box;

    border: 2px dashed #888;
    border-radius: 50%;

    background-color: red !important;

    font-size: 18px;
    font-weight: 700;
    color: white;
}

.participantes-extra .nombre-participante {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
}

.participantes-extra:active .avatar-extra {
    transform: scale(0.90);
}
    }

    .ficha-evento-avatar {
        width: 44px;
        height: 44px;

        flex-shrink: 0;

        border-radius: 50%;

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

        font-size: 20px;
        font-weight: bold;
    }

    .ficha-evento-contenido {
        flex: 1;
        min-width: 0;
    }

    .ficha-evento-nombre {
        margin-bottom: 6px;

        font-size: 16px;
        font-weight: bold;
    }

    .ficha-evento-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    column-gap: 18px;
    row-gap: 6px;

    font-size: 12px;
    line-height: 1.25;
    }

    .ficha-evento-stats > span {
        white-space: nowrap;
    }   

    @keyframes bajarFichaEvento {

        from {
            opacity: 0;
            transform: translate(-50%, -18px);
        }

        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }

    .cerrar-ficha-evento {
    position: absolute;

    top: 5px;
    right: 7px;

    width: 24px;
    height: 24px;

    padding: 0;

    border: none;
    background: transparent;

    color: #aaa;

    font-size: 14px;
    line-height: 24px;

    cursor: pointer;
}
}

#participantes-accion.participantes-scroll-movil {
    justify-content: flex-start;

    overflow-x: auto;
    overflow-y: hidden;

    flex-wrap: nowrap;

    width: 100%;

    padding: 4px 6px 10px;

    box-sizing: border-box;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

#participantes-accion.participantes-scroll-movil::-webkit-scrollbar {
    display: none;
}

#participantes-accion.participantes-scroll-movil .participante-accion {
    flex: 0 0 auto;
}

.avatar-extra {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    background: #3a3a3a !important;
    border: 2px dashed #888 !important;
    border-radius: 50% !important;

    color: #f2f2f2 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

@media (min-width: 701px) {

    #participantes-accion.participantes-scroll-movil {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;

        width: 100%;
        max-width: 100%;

        padding: 4px 6px 10px;
        box-sizing: border-box;

        scrollbar-width: thin;
    }

    #participantes-accion.participantes-scroll-movil .participante-accion {
        flex: 0 0 auto;
    }
}

/* ==========================================
   SUMINISTROS INICIALES
========================================== */

#suministros-iniciales {
    position: fixed;


    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: min(720px, calc(100vw - 40px));
    max-height: 82vh;

    padding: 28px;
    box-sizing: border-box;

    background: #252525;
    border: 1px solid #555;
    border-radius: 14px;

    color: white;

    z-index: 10002;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.7);

    animation: aparecerPopup 0.3s ease-out;
}


#suministros-iniciales.oculto {
    display: none;
}


.suministros-encabezado {
    text-align: center;
    flex-shrink: 0;
}


.suministros-icono {
    font-size: 38px;
    margin-bottom: 6px;
}


.suministros-encabezado h2 {
    margin: 0;

    font-size: 26px;
}


.suministros-encabezado p {
    margin: 8px 0 20px;

    color: #bbb;
    font-size: 14px;
}


#lista-suministros-iniciales {
    flex: 1;
    min-height: 0;
    min-width: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;

    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}


.fila-suministros {
    display: grid;

    grid-template-columns:
        minmax(130px, 1fr)
        70px
        70px
        90px;

    align-items: center;

    min-height: 48px;

    padding: 5px 10px;

    box-sizing: border-box;

    border-bottom: 1px solid #383838;

    font-size: 16px;
}


.fila-suministros:last-child {
    border-bottom: none;
}


.nombre-suministros {
    font-weight: 700;
}


#continuar-suministros {
    align-self: center;

    margin-top: 20px;

    min-width: 160px;

    padding: 11px 22px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 700;

    transition:
        background-color 0.9s ease,
        color 0.9s ease,
        border-color 0.9s ease,
        opacity 0.9s ease;

        appearance: none;
-webkit-appearance: none;

background-color: #efefef;
color: #111;
border: 1px solid #999;
border-radius: 8px;
}

#continuar-suministros:disabled {
    appearance: none;
    -webkit-appearance: none;

    background-color: #3f3f3f;
    color: #777;

    border: 1px solid #555;
    box-shadow: none;

    opacity: 0.7;
    cursor: not-allowed;
}

.controles-suministros {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 4px 4px;
}

#orden-general-suministros {
    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    border: none;
    box-shadow: none;

    color: #aaa;
    font: inherit;
    font-size: 12px;
    font-weight: 600;

    padding: 5px 4px;
    margin: 0;

    cursor: pointer;
}

#orden-general-suministros:hover {
    color: white;
}

#orden-general-suministros:active {
    opacity: 0.7;
}

.orden-suministros {
    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    border: none;
    box-shadow: none;

    color: inherit;
    font: inherit;
    font-weight: 700;

    padding: 8px 4px;
    margin: 0;

    cursor: pointer;
    text-align: center;
}

.orden-suministros:hover {
    background: rgba(255, 255, 255, 0.06);
}

.orden-suministros:active {
    background: rgba(255, 255, 255, 0.1);
}

.cabecera-suministros {
    border-bottom: 1px solid #555;
}

.orden-suministros {
    border-radius: 6px;
    transition:
        background 0.15s ease,
        opacity 0.15s ease;
}

/* ---------- MÓVIL ---------- */

@media (max-width: 700px) {

    #suministros-iniciales {
        width: calc(100vw - 20px);
        max-height: 84vh;

        padding: 20px 14px;
    }


    .suministros-encabezado h2 {
        font-size: 22px;
    }


    .suministros-encabezado p {
        font-size: 13px;
    }


    .fila-suministros {
    grid-template-columns:
        minmax(120px, 1fr)
        55px
        55px
        55px
        55px;

    padding: 5px 0;
    font-size: 14px;
}

.fila-suministros > div {
    text-align: center;
}

.fila-suministros .nombre-suministros {
    text-align: left;
    padding-left: 8px;
}

.cabecera-suministros {
    display: grid;
    grid-template-columns:
        minmax(120px, 1fr)
        55px
        55px
        55px
        55px;
    align-items: center;
}


}

/* ---------- DESKTOP ---------- */

@media (min-width: 701px) {

    #suministros-iniciales {
        width: min(820px, calc(100vw - 60px));
        max-height: 84vh;
        padding: 30px;
    }

    .suministros-icono {
        font-size: 44px;
    }

    .suministros-encabezado h2 {
        font-size: 30px;
    }

    .suministros-encabezado p {
        font-size: 17px;
        margin-bottom: 16px;
    }

    .controles-suministros {
        margin: 0 8px 5px;
    }

    #orden-general-suministros {
        font-size: 14px;
    }

    .cabecera-suministros,
    .fila-suministros {
        display: grid;

        grid-template-columns:
            2fr
            1fr
            1fr
            1fr
            1fr;

        align-items: center;
    }

    .orden-suministros {
        font-size: 18px;
        padding: 10px 4px;
    }

    .fila-suministros {
        min-height: 58px;
        padding: 7px 0;
        font-size: 19px;
    }

    .fila-suministros > div {
        text-align: center;
    }

    .fila-suministros .nombre-suministros {
        text-align: left;
        padding-left: 12px;
    }

    #continuar-suministros {
    margin-top: 24px;

    width: 90%;
    max-width: none;

    font-size: 19px;
    padding: 16px 34px;
}

    

    
}

/* ============================================================
   APUESTAS INICIALES — BLOQUE ÚNICO
============================================================ */

#apuestas-iniciales.oculto {
    display: none;
}

.oculto-apuestas {
    display: none !important;
}


/* Ventana de suministros cuando muestra apuestas */

#suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) {
    height: 94vh;
    max-height: 94vh;
}


/* Contenedor */

#apuestas-iniciales {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* ============================================================
   CABECERA
============================================================ */

.apuestas-encabezado {
    display: grid;

    grid-template-columns: auto 1fr auto;

    grid-template-areas:
        "icono titulo saldo"
        "subtitulo subtitulo subtitulo";

    align-items: center;

    column-gap: 10px;
    row-gap: 3px;

    flex-shrink: 0;
}

.apuestas-icono {
    grid-area: icono;

    margin: 0;

    font-size: 27px;
}

.apuestas-encabezado h2 {
    grid-area: titulo;

    margin: 0;

    font-size: 30px;
    line-height: 1.05;
}

.apuestas-encabezado p {
    grid-area: subtitulo;

    margin: 0;

    font-size: 15px;

    color: #bbb;
}

.saldo-apuestas {
    grid-area: saldo;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0;

    background: none;

    white-space: nowrap;
}

.saldo-apuestas strong {
    font-size: 18px;
}


/* ============================================================
   LISTA
============================================================ */

#lista-apuestas {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 14px;

    border-top: 1px solid #444;
    border-bottom: 1px solid #444;

    scrollbar-gutter: stable;
}


/* ============================================================
   FILA
============================================================ */

.fila-apuesta {
    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr)
        44px
        auto;

    grid-template-areas:
        "foto principal cuota controles"
        "foto stats     stats controles";

    align-items: center;

    column-gap: 9px;
    row-gap: 4px;

    min-height: 68px;

    padding: 7px 2px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.fila-apuesta:last-child {
    border-bottom: none;
}


/* ============================================================
   AVATAR
============================================================ */

.foto-apuesta {
    grid-area: foto;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    font-size: 20px;

    overflow: hidden;
}

.foto-apuesta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   NOMBRE + ETIQUETA + CUOTA
============================================================ */

.identidad-apuesta {
    grid-area: principal;

    min-width: 0;

    width: 100%;

    position: relative;
}

.linea-nombre-apuesta {
    display: grid;

    grid-template-columns:
        max-content
        minmax(0, 1fr);

    align-items: center;

    width: 100%;
    min-width: 0;
}

.nombre-apuesta {
    min-width: 0;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.cuota-apuesta {
    grid-area: cuota;

    justify-self: end;
    align-self: center;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
}

.cuota-apuesta-larga {
    font-size: 13px;
}

.zona-etiqueta-apuesta {
    min-width: 0;

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

.etiqueta-apuesta {
    flex: 0 0 auto;

    padding: 3px 5px;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.08);

    font-size: 8px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;

   
}

.etiqueta-apuesta:empty {
    display: none;
}


/* ============================================================
   STATS
============================================================ */

.stats-apuesta {
    grid-area: stats;

    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;

    font-size: 12px;

    color: #bbb;

    white-space: nowrap;
}

.stats-apuesta span {
    flex: 0 0 auto;
}


/* ============================================================
   CONTROLES DE APUESTA
============================================================ */

.controles-apuesta {
    grid-area: controles;

    display: grid;

    grid-template-columns:
        34px
        46px
        34px;

    gap: 3px;

    align-items: center;
    grid-template-rows: 34px 14px;
}

.premio-potencial {
    grid-column: 2;
    grid-row: 2;

    justify-self: center;
    align-self: start;

    font-size: 9px;
    line-height: 1;

    white-space: nowrap;

    opacity: 0.75;
}
.boton-menos-apuesta {
    grid-column: 1;
    grid-row: 1;
}

.cantidad-apuesta {
    grid-column: 2;
    grid-row: 1;
}

.boton-mas-apuesta {
    grid-column: 3;
    grid-row: 1;
}

.boton-apuesta {
    width: 34px;
    height: 34px;

    padding: 0;

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

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;

    font-size: 21px;
    font-weight: 800;

    cursor: pointer;
}

.boton-apuesta:disabled {
    opacity: 0.25;
    cursor: default;
}

.cantidad-apuesta {
    min-width: 46px;

    text-align: center;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}
/* ============================================================
   RESUMEN
============================================================ */

.resumen-apuestas {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
}

.resumen-apuestas > div {
    display: flex;
    align-items: center;

    gap: 7px;
}

.resumen-apuestas strong {
    white-space: nowrap;
}


/* ============================================================
   COMENZAR
============================================================ */

#continuar-apuestas {
    flex-shrink: 0;

    min-height: 48px;

    border-radius: 10px;

    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
}

#continuar-apuestas:disabled {
    background: #555;
    color: #999;
    border-color: #666;

    opacity: 0.65;

    cursor: not-allowed;
}

/* ============================================================
   APUESTAS — DESKTOP
============================================================ */

@media (min-width: 701px) {

    /* Ventana más grande */

    #suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) {
        width: min(1200px, calc(100vw - 60px));
        height: 94vh;
        max-height: 94vh;

        padding: 38px 46px;
    }

.apuestas-linea-principal {
    display: contents;
}

.apuestas-titulo {
    display: contents;
}

.apuestas-encabezado {
    display: grid;

    grid-template-columns: auto 1fr auto;

    grid-template-areas:
        "icono titulo saldo"
        "subtitulo subtitulo subtitulo";

    align-items: center;

    column-gap: 12px;
    row-gap: 6px;
}

.apuestas-icono {
    grid-area: icono;
}

.apuestas-encabezado h2 {
    grid-area: titulo;
}

.saldo-apuestas {
    grid-area: saldo;

    justify-self: end;
    align-self: center;

    margin-right: 45px;

    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 23px;
}

.saldo-apuestas strong {
    font-size: 34px;
}

.apuestas-encabezado p {
    grid-area: subtitulo;
}

    /* Cabecera */

    .apuestas-icono {
        font-size: 34px;
    }

    .apuestas-encabezado h2 {
        font-size: 36px;
    }

    .apuestas-encabezado p {
        font-size: 18px;
    }

    .saldo-apuestas {
        font-size: 24px;
    }

    .saldo-apuestas strong {
        font-size: 22px;
    }

    .apuestas-encabezado {
    grid-template-columns: auto 1fr auto;

    grid-template-areas:
        "icono titulo saldo"
        "subtitulo subtitulo subtitulo";

    column-gap: 12px;
    row-gap: 6px;
}

.saldo-apuestas {
    grid-area: saldo;

    justify-self: end;
    align-self: center;

    display: flex;
    align-items: center;

    gap: 8px;
}


    /* Filas */

    .fila-apuesta {
    grid-template-columns:
        62px
        minmax(0, 1fr)
        82px
        220px;

    column-gap: 20px;
    row-gap: 8px;

    min-height: 108px;

    padding: 14px 10px;
}


    /* Avatar */

    .foto-apuesta {
        width: 68px;
        height: 68px;

        font-size: 30px;
    }


    /* Nombre */

    .nombre-apuesta {
        font-size: 24px;
    }


    /* Favorito / Longshot */

    .etiqueta-apuesta {
    font-size: 15px;
    padding: 6px 10px;
    border-radius: 7px;
}


    /* Estadísticas */

    .stats-apuesta {
        gap: 24px;

        font-size: 17px;
    }


    /* Cuota */

    .cuota-apuesta {
        font-size: 24px;
    }

    .cuota-apuesta-larga {
        font-size: 19px;
    }


    /* Controles */

    .controles-apuesta {
        grid-template-columns:
            48px
            82px
            48px;

        grid-template-rows:
            48px
            19px;

        gap: 6px;
    }

    .boton-apuesta {
        width: 48px;
        height: 48px;

        font-size: 26px;
    }

    .cantidad-apuesta {
        min-width: 70px;

        font-size: 16px;
    }

    .premio-potencial {
        font-size: 12px;
    }


    /* Pie */

    .resumen-apuestas {
        font-size: 16px;

        padding: 12px 18px;
    }

    #continuar-apuestas {
        min-height: 52px;

        font-size: 18px;
    }

    #saldo-apuestas {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.reiniciar-apuestas {
    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    color: #aaa;

    border: 1px solid #3a3a3a;
    border-radius: 8px;

    padding: 7px 12px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.1s ease;
}

.reiniciar-apuestas.activo {
    background: #454545;
    color: #ddd;
    border-color: #5c5c5c;
}

.reiniciar-apuestas:hover {
    background: #505050;
    color: #fff;
    border-color: #5a5a5a;
}

.reiniciar-apuestas:active {
    transform: scale(0.97);
}

.apuestas-encabezado {
    grid-template-columns: auto 1fr auto;

    grid-template-areas:
        "icono titulo saldo"
        "subtitulo subtitulo reset";

    align-items: center;
}
}

@media (max-width: 700px) {

    .apuestas-linea-principal {
        display: grid;

        grid-template-columns:
            auto 1fr;

        grid-template-areas:
            "titulo titulo"
            "saldo reset";

        align-items: center;
    }

    .apuestas-titulo {
    grid-area: titulo;

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

    gap: 8px;
}

    .saldo-apuestas {
        grid-area: saldo;
    }

    .reiniciar-apuestas {
    grid-area: reset;

    position: relative;
    left: 40px;

    width: max-content;
    margin: 0;
}

}

@media (max-width: 700px) {

    .reiniciar-apuestas {
        appearance: none;
        -webkit-appearance: none;

        background: transparent;
        color: #aaa;

        border: 1px solid #3a3a3a;
        border-radius: 8px;

        padding: 7px 12px;

        font-family: inherit;
        font-size: 14px;
        font-weight: 600;

        cursor: pointer;

        transition:
            background 0.15s ease,
            color 0.15s ease,
            border-color 0.15s ease,
            transform 0.1s ease;
    }

    .reiniciar-apuestas.activo {
        background: #454545;
        color: #ddd;
        border-color: #5c5c5c;
    }

    .saldo-apuestas {
    min-width: 155px;
}

}

/* ==========================================
   VISTA PRINCIPAL — RANKING / MAPA
========================================== */

#vista-principal {
    width: 75%;
}

#selector-vista-principal {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    gap: 8px;
}

.boton-vista-principal {
    flex: 1;

    padding: 11px 16px;

    background: #202020;
    color: #999;

    border: 1px solid #444;
    border-radius: 8px;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}

.boton-vista-principal.activo {
    background: #303030;
    color: white;
    border-color: #777;
}

#vista-principal #mapa {
    width: 100%;
}

#ranking-supervivencia {
    width: 100%;
    height: 750px;

    box-sizing: border-box;

    background: #1b1b1b;

    border: 1px solid #444;

    overflow-y: auto;
}

.oculto-vista-principal {
    display: none !important;
}


/* ==========================================
   VISTA PRINCIPAL — MÓVIL
========================================== */

@media (max-width: 700px) {

    #vista-principal {
        width: 100%;
    }

    #selector-vista-principal {
        margin-bottom: 8px;
    }

    .boton-vista-principal {
        padding: 9px 10px;
        font-size: 12px;
    }

    #ranking-supervivencia {
        height: 470px;
    }

}

/* ==========================================
   VISTA PRINCIPAL — DESKTOP
========================================== */

@media (min-width: 701px) {

    main {
        width: 100%;
        max-width: 1400px;

        margin-left: auto;
        margin-right: auto;

        align-items: flex-start;
    }

    #vista-principal {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    #informacion-mapa {
        flex: 0 0 300px;
        width: 300px;
    }

}

/* ==========================================
   RANKING DE SUPERVIVENCIA
========================================== */

#contenido-ranking-supervivencia {
    width: 100%;
}

.ranking-cabecera,
.ranking-fila {
    display: grid;

    grid-template-columns:
        60px
        minmax(180px, 1fr)
        80px
        80px
        80px
        120px;

    align-items: center;

    min-height: 52px;

    padding: 0 18px;

    box-sizing: border-box;
}

.ranking-cabecera {
    position: sticky;
    top: 0;

    min-height: 46px;

    background: #202020;

    border-bottom: 1px solid #555;

    font-size: 12px;
    font-weight: bold;

    color: #aaa;

    z-index: 2;
}

.ranking-cabecera > div:not(:nth-child(2)) {
    text-align: center;
    justify-self: stretch;
}

.ranking-fila {
    border-bottom: 1px solid #333;

    font-size: 15px;
}

.ranking-fila > div:not(.ranking-personaje) {
    text-align: center;
}

.ranking-posicion {
    font-size: 17px;
    font-weight: bold;
}

.ranking-personaje {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.ranking-nombre {
    font-weight: bold;
}

.ranking-movimiento {
    min-width: 32px;

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

    gap: 1px;

    font-size: 13px;
    font-weight: bold;
    line-height: 1;

    color: #888;
}

.ranking-flecha {
    display: inline-block;

    line-height: 1;

    /* Corrección óptica del glifo ↑ / ↓ */
    transform: translateY(-1px);
}

.ranking-sin-cambio {
    color: #888;
}

.ranking-movimiento.sube {
    color: #4ade80;
}

.ranking-movimiento.baja {
    color: #f87171;
}

.ranking-dias {
    font-size: 17px;
    font-weight: bold;
}

.ranking-muerto {
    opacity: 0.42;
}

.ranking-dias-muerto {
    font-weight: bold;
}


/* ==========================================
   RANKING — MÓVIL
========================================== */

@media (max-width: 700px) {

    .ranking-cabecera,
    .ranking-fila {
        grid-template-columns:
            30px
            minmax(105px, 1fr)
            38px
            38px
            38px
            62px;

        min-width: 0;

        padding: 0 7px;
    }

    .ranking-cabecera {
        font-size: 9px;
    }

    .ranking-fila {
        min-height: 43px;
        font-size: 12px;
    }

    .ranking-posicion {
        font-size: 13px;
    }

    .ranking-personaje {
        gap: 5px;
    }

    .ranking-nombre {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ranking-movimiento {
        min-width: 23px;
        font-size: 10px;
    }

    .ranking-dias {
        font-size: 13px;
    }

   #ranking-supervivencia {
    height: calc(100dvh - 190px);
    min-height: 0;
    max-height: none;

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

#contenido-ranking-supervivencia {
    padding-bottom: 24px;
}

   

.ranking-supervivencia-final {
    padding-right: 8px;
    font-size: 10px;
}

}

/* ==========================================
   PANEL LATERAL SEGÚN VISTA
========================================== */

#informacion-mapa.oculto-en-ranking {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================
   RANKING — DESKTOP
========================================== */

@media (min-width: 701px) {

    .ranking-cabecera {
        min-height: 52px;
        font-size: 14px;
    }

    .ranking-fila {
        min-height: 60px;
        font-size: 17px;
    }

    .ranking-posicion {
        font-size: 19px;
    }

    .ranking-nombre {
        font-size: 17px;
    }

    .ranking-movimiento {
        font-size: 14px;
    }

    .ranking-dias {
        font-size: 19px;
    }

}

.ranking-supervivencia-final {
    grid-column: 3 / -1;

    text-align: right !important;

    padding-right: 18px;

    font-size: 14px;
    font-weight: bold;

    white-space: nowrap;
}


.ranking-calavera {
    flex-shrink: 0;
    font-size: 0.8em;
    line-height: 1;
}

.ranking-supervivencia-final {
    grid-column: 3 / -1;

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

    padding-right: 18px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
}

/* ==========================================
   RANKING — TEXTO DE MUERTOS
========================================== */

@media (min-width: 701px) {

    .ranking-supervivencia-final {
        font-size: 15px;
    }

}

/* Separación entre estadísticas e inventario
   en la ficha pequeña de personaje */
.cambio-inventario {
    display: inline-block;
    margin-left: 6px;
}
.ficha-evento-inventario {
    margin-left: 10px;
}

/* ==========================================
   RANKING — DÍAS ESTIMADOS
========================================== */

.ranking-columna-dias,
.ranking-dias {
    width: 100%;
    text-align: center;
    justify-self: stretch;
}

.ranking-columna-dias {
    display: flex;
    align-items: center;
    justify-content: center;

    white-space: normal;

    font-size: 0.9em;
    line-height: 1.05;
}

/* ==========================================
   BOTONES — ESQUINAS REDONDEADAS
========================================== */

button {
    border-radius: 8px;
    border: 1px solid #777;
}

/* Personaje con apuesta en el ranking */
.ranking-nombre-apostado {
    color: #f4c542;
}

/* ==========================================
   MAPA MÓVIL — 6 ZONAS
========================================== */

@media (max-width: 700px) {

    #vista-principal {
        height: auto;
        min-height: 0;
    }

    #mapa {
        height: 290px;
    }

   #informacion-mapa {
    margin: 10px auto 0;
    height: 100px;
    flex: none;

}

}

@media (max-width: 700px) {

    #mapa .mapa-contenido {
        top: 15px !important;
    }

}

/* ==========================================
   ENAMORAMIENTO — PULSO ROSA
========================================== */

@keyframes pulsoEventoEnamoramiento {

    0%, 100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 12px rgba(255, 70, 180, 0.35),
            0 0 24px rgba(255, 70, 180, 0.15);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.7),
            0 0 28px rgba(255, 70, 180, 0.90),
            0 0 56px rgba(255, 70, 180, 0.40);
    }
}

/* ==========================================
   APUESTAS — AJUSTE TIPOGRÁFICO MÓVIL
   Igualar jerarquía visual con Suministros
========================================== */

@media (max-width: 700px) {

    /* Disponible */
    .saldo-apuestas {
        font-size: 14px;
    }

    /* Número de monedas: 1000 */
    .saldo-apuestas strong,
    #saldo-apuestas {
        font-size: 17px;
    }

    /* ¿Quién sobrevivirá? */
    .apuestas-encabezado p {
        font-size: 12px;
    }

    /* Nombres: Toby, Jim, Pam... */
    .nombre-apuesta {
        font-size: 13px;
    }

    @media (max-width: 700px) {

    .saldo-apuestas {
        margin-bottom: 0px;
    }

    .apuestas-encabezado p {
        margin-top: 0px;
    }
}

@media (max-width: 700px) {

    .apuestas-encabezado {
        row-gap: 0;
    }

    .apuestas-encabezado p {
        transform: translateY(-3px);
    }

}

@media (max-width: 700px) {

    .resumen-apuestas {
        font-size: 12px;
    }

}

@media (max-width: 700px) {

    .reiniciar-apuestas {
        font-size: 10px;
        padding: 5px 8px;

        position: relative;
        left: 80px;
    }

}

}

.ranking-fila-clicable {
    cursor: pointer;
}

.ranking-fila-clicable:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* ==========================================
   RANKING — FILAS CLICABLES
========================================== */

.ranking-fila-clicable {
    cursor: pointer;
}

.ranking-fila-clicable:hover {
    background: rgba(255, 255, 255, 0.04);
}


/* ==========================================
   FICHA DESDE RANKING — DESKTOP
========================================== */

@media (min-width: 701px) {

    #ficha-personaje.ficha-desde-ranking {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 !important;

        transform: none !important;

        overflow: visible !important;

        box-shadow: none !important;
    }

    #ficha-personaje.ficha-desde-ranking
    .cerrar-ficha-ranking {
        display: none !important;
    }
}


/* ==========================================
   FICHA DESDE RANKING — MÓVIL
========================================== */

@media (max-width: 700px) {

    #ficha-personaje.ficha-desde-ranking {
    position: fixed !important;

    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: 70px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 125px !important;
    max-height: 38vh !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    transform: none !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #202026 !important;
    border: 2px solid #86505e !important;
    border-radius: 14px !important;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .35),
        0 0 16px rgba(255, 96, 121, .09) !important;

    z-index: 9999 !important;
}


    #ficha-personaje.ficha-desde-ranking
    .cerrar-ficha-ranking {

        display: block !important;

        position: absolute !important;

        top: 8px !important;
        right: 10px !important;
        left: auto !important;

        width: 30px !important;
        height: 30px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: none !important;

        color: white !important;

        font-size: 25px !important;
        line-height: 30px !important;

        cursor: pointer;

        z-index: 10000 !important;
    }

        /* ==========================================
       FICHA COMPACTA EN RANKING MÓVIL
    ========================================== */

    #ficha-personaje.ficha-desde-ranking {
        padding: 14px 16px !important;
    }

    #ficha-personaje.ficha-desde-ranking .ficha-titulo {
    font-size: 16px !important;
    line-height: 1.15 !important;

        margin: 0 35px 8px 0 !important;
        padding: 0 !important;
    }

    #ficha-personaje.ficha-desde-ranking .ficha-grid {
        display: grid !important;

        grid-template-columns:
    0.7fr 0.7fr 1.6fr !important;

column-gap: 8px !important;
        row-gap: 2px !important;
    }

    #ficha-personaje.ficha-desde-ranking .ficha-dato {
        font-size: 11px !important;
        line-height: 1.15 !important;

        padding: 0 !important;
        margin: 0 !important;

        border: none !important;
    }

    /* En Ranking móvil el contenedor padre no debe dibujar una caja */
/* En Ranking móvil el contenedor padre no debe dibujar una caja */
#informacion-mapa:has(#ficha-personaje.ficha-desde-ranking) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}


/* ==========================================
   ALERTA CRÍTICA — FICHA RANKING MÓVIL
========================================== */

#informacion-mapa.ficha-critica:has(#ficha-personaje.ficha-desde-ranking) {
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
}

#informacion-mapa.ficha-critica
#ficha-personaje.ficha-desde-ranking {
    border: 2px solid red !important;
    animation: none !important;
}

#informacion-mapa.ficha-critica
#ficha-personaje.ficha-desde-ranking::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.2);

    pointer-events: none;

    animation: alertaCriticaRankingMovil 1s ease-in-out infinite;
}

@keyframes alertaCriticaRankingMovil {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.5);
    }
}

}
/* ==========================================
   COLOR POR TIPO DE EVENTO
========================================== */

#log-acciones.evento-busqueda {
    background-color: #17252d;
}

#log-acciones.evento-hallazgo {
    background-color: #17303a;
}

#log-acciones.evento-infortunio {
    background-color: #29251a;
}

#log-acciones.evento-enfrentamiento {
    background-color: #2b171a;
}

#log-acciones.evento-interaccion {
    background-color: #1d202b;
}

#log-acciones.evento-romance {
    background-color: #291a27;
}

.imagen-avatar-accion {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    display: block;
}

/* ==========================================
   PARTICIPANTES EN EVENTOS — DEFINITIVO
========================================== */

/* 1–2 participantes */

#participantes-accion:not(.participantes-compactos) {
    gap: 45px;
}

#participantes-accion:not(.participantes-compactos) .avatar-accion {
    width: 110px;
    height: 110px;

    min-width: 110px;
    min-height: 110px;

    font-size: 46px;

    flex-shrink: 0;
}


/* 3+ participantes */

#participantes-accion.participantes-compactos {
    width: 100%;

    gap: 12px;
    padding: 0 16px;

    justify-content: center;
    flex-wrap: nowrap;

    box-sizing: border-box;
}

#participantes-accion.participantes-compactos .participante-accion {
    flex: 1 1 0;

    min-width: 0;
    max-width: 100px;

    gap: 6px;
}

#participantes-accion.participantes-compactos .avatar-accion {
    width: 90px;
    height: 90px;

    min-width: 90px;
    min-height: 90px;

    font-size: 44px;

    flex-shrink: 0;
}

#participantes-accion.participantes-compactos .nombre-participante {
    width: 100%;

    font-size: 15px;

    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ==========================================
   DESKTOP — AVATARES GRANDES EN EVENTOS
========================================== */

@media (min-width: 701px) {

    /* 1 o 2 participantes */
    #participantes-accion:not(.participantes-compactos):not(.participantes-scroll-movil)
    .avatar-accion {
        width: 170px;
        height: 170px;

        min-width: 170px;
        min-height: 170px;

        font-size: 68px;
    }

    /* 3 o más participantes en vista compacta */
    #participantes-accion.participantes-compactos
    .avatar-accion {
        width: 125px;
        height: 125px;

        min-width: 125px;
        min-height: 125px;

        font-size: 52px;
    }
}
/* ==========================================
   MODO PERIÓDICO
========================================== */

#log-acciones.modo-periodico {
    background: #e7dec4;
    color: #1d1b17;
    border: 3px solid #575244;
    font-family: Georgia, "Times New Roman", serif;
}


/* ------------------------------------------
   CABECERA DEL PERIÓDICO
------------------------------------------ */

#log-acciones.modo-periodico::before {
    content: var(--nombre-periodico, "");

    display: block;

    width: calc(100% - 60px);
    margin: 22px auto 12px;
    padding-bottom: 12px;

    border-bottom: 4px double #26231d;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 2px;

    color: #1d1b17;
}


/* ------------------------------------------
   OCULTAR ELEMENTOS DEL EVENTO NORMAL
------------------------------------------ */

#log-acciones.modo-periodico #categoria-accion {
    display: none;
}

#log-acciones.modo-periodico #participantes-accion {
    display: none;
}


/* ------------------------------------------
   CONTENEDOR DEL TEXTO
------------------------------------------ */

#log-acciones.modo-periodico #texto-accion {
    background: transparent;
    color: #1d1b17;

    width: auto;
    max-width: none;

    margin: 0;
    padding: 0 38px;

    border: none;
    box-shadow: none;

    font-family: Georgia, "Times New Roman", serif;
}


/* ------------------------------------------
   NOTICIA
------------------------------------------ */

#log-acciones.modo-periodico .periodico-noticia {
    width: 100%;
    box-sizing: border-box;

    text-align: center;

    color: #1d1b17;
}


/* Día / edición */

#log-acciones.modo-periodico .periodico-meta {
    margin-top: 6px;
    margin-bottom: 15px;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #514b3e;
}


/* Titular */

#log-acciones.modo-periodico .periodico-titular {
    margin: 0 auto 14px;

    max-width: 620px;

    font-size: 34px;
    line-height: 1.02;

    font-weight: 900;
    text-transform: uppercase;

    color: #171612;
}


/* Separador */

#log-acciones.modo-periodico .periodico-separador {
    width: 70%;
    height: 1px;

    margin: 0 auto 20px;

    background: #4e493d;
}


/* ------------------------------------------
   FOTO PROVISIONAL
------------------------------------------ */

#log-acciones.modo-periodico .periodico-foto {
    width: 150px;
    height: 150px;

    margin: 0 auto 10px;

    overflow: hidden;

    border: 4px solid #25231e;

    background: #c7bea5;

    filter: grayscale(1);
}


/* Inicial provisional */

#log-acciones.modo-periodico .periodico-avatar {
    width: 100%;
    height: 100%;

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

    font-size: 76px;
    font-weight: 900;

    color: #25231e;

    background: #bcb49e;
}


/* Nombre */

#log-acciones.modo-periodico .periodico-nombre {
    margin: 8px 0 2px;

    font-size: 28px;
    line-height: 1;

    font-weight: 900;

    color: #171612;
}


/* Causa */

#log-acciones.modo-periodico .periodico-causa {
    margin-bottom: 17px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #625b4b;
}


/* ------------------------------------------
   CUERPO DE LA NOTICIA
------------------------------------------ */

#log-acciones.modo-periodico .periodico-cuerpo {
    max-width: 560px;

    margin: 0 auto 20px;

    font-size: 19px;
    line-height: 1.45;

    text-align: left;

    color: #25221c;
}


/* Los nombres clicables dejan de usar
   el amarillo del evento normal */

#log-acciones.modo-periodico
.periodico-cuerpo .nombre-evento {
    color: #171612;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}


/* ------------------------------------------
   PERSONAJE APOSTADO
------------------------------------------ */

#log-acciones.modo-periodico .periodico-apostado {
    max-width: 520px;

    margin: 18px auto 95px;

    padding: 10px 14px;

    border-top: 2px solid #25231e;
    border-bottom: 2px solid #25231e;

    font-size: 16px;
    font-weight: 900;

    letter-spacing: 1px;

    color: #171612;
}


/* ------------------------------------------
   CONTADOR Y NAVEGACIÓN
------------------------------------------ */

#log-acciones.modo-periodico #contador-acciones {
    color: #494438;
}


/* ------------------------------------------
   MÓVIL
------------------------------------------ */

@media (max-width: 700px) {

    #log-acciones.modo-periodico::before {
        width: calc(100% - 36px);

        margin-top: 18px;

        font-size: 31px;
        letter-spacing: 1px;
    }

    #log-acciones.modo-periodico #texto-accion {
        padding: 0 22px;
    }

    #log-acciones.modo-periodico .periodico-titular {
        font-size: 27px;
    }

    #log-acciones.modo-periodico .periodico-foto {
        width: 125px;
        height: 125px;
    }

    #log-acciones.modo-periodico .periodico-avatar {
        font-size: 62px;
    }

    #log-acciones.modo-periodico .periodico-cuerpo {
        font-size: 17px;
    }

    /* ==========================================
   AJUSTES DE COMPOSICIÓN DEL PERIÓDICO
========================================== */

/* Ocultar el título normal "Registro del día" */
#log-acciones.modo-periodico .titulo-log,
#log-acciones.modo-periodico .titulo-registro {
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
}


/* Dar aire entre la cabecera y la noticia */
#log-acciones.modo-periodico #texto-accion {
    margin-top: 10px;
}


/* Separar correctamente la edición del titular */
#log-acciones.modo-periodico .periodico-meta {
    margin: 0 auto 24px;

    padding-top: 4px;

    font-size: 15px;
    line-height: 1.2;
}


/* Titular */
#log-acciones.modo-periodico .periodico-titular {
    margin: 0 auto 22px;

    max-width: 580px;

    font-size: 32px;
    line-height: 1.08;
}


/* Separador debajo del titular */
#log-acciones.modo-periodico .periodico-separador {
    margin: 0 auto 28px;
}
}

/* ==========================================
   PERIÓDICO — CORRECCIÓN DE FORMATO
========================================== */

/* ------------------------------------------
   CABECERA NORMAL DEL MODAL
------------------------------------------ */

/* Ocultar únicamente "📜 Registro del día" */
#log-acciones.modo-periodico #cabecera-log h2 {
    display: none;
}

/* Mantener la X arriba a la derecha */
#log-acciones.modo-periodico #cabecera-log {
    position: absolute;
    top: 18px;
    right: 18px;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    z-index: 20;
}

#log-acciones.modo-periodico #cerrar-log {
    position: relative;
    top: auto;
    right: auto;

    margin: 0;
}


/* ------------------------------------------
   VENTANA
------------------------------------------ */

#log-acciones.modo-periodico {
    padding: 0 28px 20px;

    overflow: hidden;

    background: #e7dec4;
    color: #1d1b17;

    border: 3px solid #575244;
}


/* ------------------------------------------
   NOMBRE DEL PERIÓDICO
------------------------------------------ */

#log-acciones.modo-periodico::before {
    content: var(--nombre-periodico, "");

    display: block;

    width: calc(100% - 90px);

    margin: 26px auto 0;
    padding: 0 0 8px;

    border-bottom: 4px double #27231c;

    color: #171511;

    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--tamano-nombre-periodico, 38px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1px;

    text-align: center;

    white-space: nowrap;
}


/* ------------------------------------------
   ÁREA DE LA NOTICIA
------------------------------------------ */

#log-acciones.modo-periodico #contenido-accion {
    height: auto;
    min-height: 0;

    display: block;

    margin: 0;
    padding: 0;
}

#log-acciones.modo-periodico #texto-accion {
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;

    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    box-shadow: none;

    overflow: visible;
}


/* ------------------------------------------
   EDICIÓN
------------------------------------------ */

#log-acciones.modo-periodico .periodico-meta {
    margin: 9px auto 16px;
    padding: 0;

    color: #5b5445;

    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;

    text-align: center;
}


/* ------------------------------------------
   TITULAR
------------------------------------------ */

#log-acciones.modo-periodico .periodico-titular {
    max-width: 520px;

    margin: 0 auto 12px;

    color: #171511;

    font-size: 29px;
    line-height: 1.02;
    font-weight: 900;

    text-align: center;
}

#log-acciones.modo-periodico .periodico-separador {
    width: 62%;
    height: 1px;

    margin: 0 auto 18px;

    background: #615a4b;
}


/* ------------------------------------------
   FOTO
------------------------------------------ */

#log-acciones.modo-periodico .periodico-foto {
    width: 112px;
    height: 112px;

    margin: 0 auto 8px;

    border: 3px solid #29261f;

    background: #b9b9b9;

    overflow: hidden;
}

#log-acciones.modo-periodico .periodico-avatar {
    width: 100%;
    height: 100%;

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

    background: #b9b9b9;

    color: #25221d;

    font-size: 55px;
    line-height: 1;
    font-weight: 900;
}


/* ------------------------------------------
   PERSONAJE
------------------------------------------ */

#log-acciones.modo-periodico .periodico-nombre {
    margin: 0;

    color: #171511;

    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;

    text-align: center;
}

#log-acciones.modo-periodico .periodico-causa {
    margin: 3px 0 14px;

    color: #625a4b;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;

    text-align: center;
}


/* ------------------------------------------
   TEXTO DE LA NOTICIA
------------------------------------------ */

#log-acciones.modo-periodico .periodico-cuerpo {
    width: 88%;
    max-width: 520px;

    margin: 0 auto 14px;

    color: #27231d;

    font-size: 16px;
    line-height: 1.35;

    text-align: left;
}


/* El nombre clicable no debe verse amarillo */
#log-acciones.modo-periodico
.periodico-cuerpo .nombre-evento {
    color: #171511;
    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 1px;
}


/* ------------------------------------------
   NAVEGACIÓN
------------------------------------------ */

#log-acciones.modo-periodico #navegacion-acciones {
    height: 46px;

    margin: 8px 0 0;

    flex-shrink: 0;
}

#log-acciones.modo-periodico #navegacion-acciones button {
    width: 48px;
    height: 48px;

    font-size: 21px;
}

#log-acciones.modo-periodico #contador-acciones {
    color: #575043;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
}


/* ==========================================
   PERIÓDICO — MÓVIL
========================================== */

@media (max-width: 700px) {

    #log-acciones.modo-periodico {
        padding: 0 16px 16px;
    }

    #log-acciones.modo-periodico::before {
    width: calc(100% - 70px);

    margin-top: 22px;

    font-size: var(
        --tamano-nombre-periodico,
        29px
    );
}

    #log-acciones.modo-periodico #cabecera-log {
        top: 12px;
        right: 12px;
    }

    #log-acciones.modo-periodico .periodico-meta {
        margin-top: 8px;

        font-size: 11px;
    }

    #log-acciones.modo-periodico .periodico-titular {
        max-width: 90%;

        font-size: 23px;
    }

    #log-acciones.modo-periodico .periodico-foto {
        width: 96px;
        height: 96px;
    }

    #log-acciones.modo-periodico .periodico-avatar {
        font-size: 46px;
    }

    #log-acciones.modo-periodico .periodico-nombre {
        font-size: 21px;
    }

    #log-acciones.modo-periodico .periodico-cuerpo {
        width: 92%;

        font-size: 15px;
        line-height: 1.3;
    }
}

/* ==========================================
   PERIÓDICO — ALTURA Y ESPACIO
========================================== */

#log-acciones.modo-periodico {
    height: min(88vh, 820px);
    max-height: 88vh;
}


/* Más separación entre cabecera y titular */

#log-acciones.modo-periodico .periodico-titular {
    margin-top: 24px;
}


/* El cuerpo puede aprovechar la nueva altura */

#log-acciones.modo-periodico #contenido-accion {
    flex: 1;
    min-height: 0;
}


/* En pantallas pequeñas usamos casi toda
   la altura disponible */

@media (max-width: 700px) {

    #log-acciones.modo-periodico {
        height: 90vh;
        max-height: 90vh;
    }

    #log-acciones.modo-periodico .periodico-titular {
        margin-top: 20px;
    }
}

/* ==========================================
   PERIÓDICO — PAPEL IMPRESO
========================================== */

#log-acciones.modo-periodico {

    /* Base gris cálida de papel periódico */
    background-color: #cec8b5;

    background-image:

        /* motas de impresión */
        radial-gradient(
            circle at 14% 18%,
            rgba(35, 35, 32, 0.055) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 72% 38%,
            rgba(35, 35, 32, 0.045) 0 1px,
            transparent 1.5px
        ),

        radial-gradient(
            circle at 38% 72%,
            rgba(35, 35, 32, 0.035) 0 1px,
            transparent 1.5px
        ),

        /* variaciones suaves del papel */
        radial-gradient(
            ellipse at 18% 30%,
            rgba(45, 45, 40, 0.055),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 82% 76%,
            rgba(45, 45, 40, 0.045),
            transparent 31%
        ),

        /* fibras horizontales */
        repeating-linear-gradient(
            0deg,
            rgba(35, 35, 32, 0.040) 0px,
            rgba(35, 35, 32, 0.040) 1px,
            transparent 1px,
            transparent 4px
        ),

        /* fibras verticales */
        repeating-linear-gradient(
            90deg,
            rgba(35, 35, 32, 0.020) 0px,
            rgba(35, 35, 32, 0.020) 1px,
            transparent 1px,
            transparent 7px
        );

    border: none;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55);

    color: #181816;
}


/* Pequeña irregularidad en el borde.
   Más adelante podemos sustituirla por
   varias máscaras de recorte aleatorias. */

#log-acciones.modo-periodico {
   clip-path: polygon(
    /* ARRIBA — mayormente cortado, con imperfecciones aisladas */
    0.9% 1.2%,
    3.4% 0.55%,
    5.2% 0.85%,
    9.8% 0.38%,
    18.5% 0.55%,
    27.6% 0.35%,
    36.1% 0.62%,
    43.8% 0.28%,
    55.4% 0.48%,
    64.7% 0.31%,
    75.9% 0.57%,
    86.8% 0.36%,
    94.1% 0.5%,
    97.8% 0.22%,
    99.1% 1.15%,

    /* DERECHA — casi recto, con dos desgarros */
    99.35% 8%,
    99.05% 17%,
    99.45% 27%,
    99.2% 39%,
    99.5% 48%,

    /* mordisco/desgarro */
    98.7% 54%,
    99.45% 57%,

    99.15% 68%,
    99.4% 79%,
    99.1% 90%,
    98.8% 97.8%,

    /* ABAJO — desgarro irregular realista */

    /* esquina derecha bastante limpia */
    98.8% 97.8%,
    96.7% 98.55%,
    93.4% 98.75%,

    /* tramo casi recto */
    89.6% 98.72%,
    86.1% 98.79%,

    /* pequeño pedazo arrancado */
    83.8% 99.18%,
    82.1% 98.63%,
    79.7% 98.91%,

    /* tramo largo relativamente limpio */
    75.3% 98.83%,
    71.2% 98.86%,
    67.8% 98.80%,

    /* desgarro profundo aislado */
    65.9% 99.47%,
    64.4% 98.72%,
    62.7% 98.96%,

    /* casi recto otra vez */
    58.6% 98.87%,
    54.9% 98.82%,

    /* rotura central grande y asimétrica */
    52.6% 99.15%,
    50.9% 99.78%,
    49.2% 99.08%,
    47.6% 98.71%,
    45.3% 99.02%,

    /* zona tranquila */
    41.8% 98.84%,
    38.2% 98.88%,
    35.4% 98.79%,

    /* otro roto, pero diferente al central */
    32.8% 99.34%,
    30.9% 98.92%,
    28.6% 98.68%,
    26.4% 99.02%,

    /* tramo casi cortado */
    22.5% 98.84%,
    18.7% 98.80%,
    15.6% 98.87%,

    /* fibras finales */
    13.2% 99.16%,
    11.5% 98.71%,
    9.1% 99.04%,
    6.8% 98.76%,

    /* esquina izquierda rota */
    4.4% 99.22%,
    2.6% 98.89%,
    1.5% 98.3%,

    /* IZQUIERDA — parece cortada, no serruchada */
    0.8% 92%,
    0.55% 81%,
    0.72% 69%,
    0.48% 57%,

    /* pequeño roto lateral */
    1.05% 51%,
    0.42% 47%,

    0.68% 35%,
    0.46% 23%,
    0.7% 12%,
    0.55% 4%
);
}


/* ==========================================
   TIPOGRAFÍA
========================================== */

/* Nombre del periódico y titulares:
   serif pesada, estilo prensa */

#log-acciones.modo-periodico::before,
#log-acciones.modo-periodico .periodico-titular {
    font-family:
        "Times New Roman",
        Times,
        Georgia,
        serif;
}


/* Texto del artículo:
   serif más legible y menos pesada */

#log-acciones.modo-periodico .periodico-cuerpo {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
    letter-spacing: -0.15px;
}


/* Primera línea un poco más periodística */

#log-acciones.modo-periodico
.periodico-cuerpo::first-line {
    line-height: 1.4;
}


/* Nombre y causa */

#log-acciones.modo-periodico .periodico-nombre {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

#log-acciones.modo-periodico .periodico-causa {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

/* ==========================================
   PERIÓDICO — TEXTO IMPRESO
========================================== */

#log-acciones.modo-periodico .periodico-cuerpo {
    width: 86%;
    max-width: 500px;

    margin: 0 auto 14px;

    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size: 17px;
    line-height: 1.28;
    font-weight: 500;

    letter-spacing: -0.1px;

    color: #16130f;

    text-align: left;

    /* Hace que la tinta destaque ligeramente
       sobre la textura del papel */
    text-shadow:
        0 0 0.25px #16130f;
}


/* Nombres dentro del artículo:
   negros, negritas y siguen siendo clicables */

#log-acciones.modo-periodico
.periodico-cuerpo strong,

#log-acciones.modo-periodico
.periodico-cuerpo .nombre-evento {

    color: #11100d !important;

    font-family:
        "Times New Roman",
        Times,
        serif;

    font-weight: 700;

    text-decoration: none;
}


/* ==========================================
   FOTO — IMPRESIÓN DE PERIÓDICO
========================================== */

#log-acciones.modo-periodico .periodico-foto {
    position: relative;

    background: #aaa38f;

    border: 2px solid #29251d;

    overflow: hidden;

    filter:
        grayscale(1)
        contrast(1.25);
}


/* La inicial provisional también pierde
   el aspecto de tarjeta gris moderna */

#log-acciones.modo-periodico .periodico-avatar {
    position: relative;

    background: #aaa38f;

    color: #211e18;

    filter:
        grayscale(1)
        contrast(1.35);
}


/* Foto real cuando la añadamos */

#log-acciones.modo-periodico .periodico-foto img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(1)
        contrast(1.45)
        brightness(0.88);
}


/* Trama de tinta */

#log-acciones.modo-periodico .periodico-foto::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(20, 17, 12, 0.38) 0.65px,
            transparent 0.8px
        );

    background-size:
        3px 3px;

    mix-blend-mode: multiply;

    opacity: 0.7;
}


/* Segunda imperfección:
   líneas muy finas de impresión */

#log-acciones.modo-periodico .periodico-foto::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 6;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(25, 20, 14, 0.10) 0px,
            rgba(25, 20, 14, 0.10) 1px,
            transparent 1px,
            transparent 4px
        );

    mix-blend-mode: multiply;
}

/* ==========================================
   PERIÓDICO — COMPOSICIÓN EDITORIAL
========================================== */


/* FOTO: menos "tarjeta", más recorte impreso */

#log-acciones.modo-periodico .periodico-foto {
    width: 190px;
    height: 128px;

    margin: 0 auto 5px;

    border: none;

    background: #aaa89f;
}

/* Inicial provisional */

#log-acciones.modo-periodico .periodico-avatar {
    font-size: 52px;
}


/* Pie de fotografía */

#log-acciones.modo-periodico .periodico-pie-foto {
    width: 190px;

    margin: 0 auto 20px;

    padding-top: 3px;

    border-top: 1px solid rgba(35, 30, 20, 0.45);

    color: #4e4739;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 0.5px;

    text-align: left;
    text-transform: uppercase;
}


/* Firma periodística */

#log-acciones.modo-periodico .periodico-autor {
    width: 86%;
    max-width: 500px;

    margin: 0 auto 5px;

    color: #4b4437;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: 0.7px;

    text-align: left;
    text-transform: uppercase;
}


/* Cuerpo de la noticia */

#log-acciones.modo-periodico .periodico-cuerpo {
    width: 86%;
    max-width: 500px;

    margin: 0 auto 3px;

    padding-top: 7px;

    border-top: 1px solid rgba(45, 38, 25, 0.35);

    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size: 17px;
    line-height: 1.28;
    font-weight: 500;

    color: #16130f;

    text-align: left;
}


/* ==========================================
   NAVEGACIÓN COMO PARTE DEL PAPEL
========================================== */

#log-acciones.modo-periodico
#navegacion-acciones button {

    width: 42px;
    height: 42px;

    padding: 0;

    background: transparent;

    border: none;
    border-radius: 0;

    box-shadow: none;

    color: #1c1914;

    font-size: 29px;
}


/* Evitar aspecto de botón al pasar el mouse */

#log-acciones.modo-periodico
#navegacion-acciones button:hover {

    background: transparent;

    transform: scale(1.08);
}


/* Contador más discreto */

#log-acciones.modo-periodico
#contador-acciones {

    color: #5a5242;

    font-family:
        "Times New Roman",
        Times,
        serif;

    font-size: 15px;

    font-weight: 700;
}

/* ==========================================
   PERIÓDICO — FOTO INTEGRADA AL PAPEL
========================================== */

#log-acciones.modo-periodico .periodico-foto,
#log-acciones.modo-periodico .periodico-avatar {
    background-color: #c4c0b1;
    color: #171613;
}

#log-acciones.modo-periodico .periodico-foto::after {
    background-image:
        radial-gradient(
            circle,
            rgba(25, 24, 20, 0.38) 0.6px,
            transparent 0.75px
        );

    background-size: 3px 3px;
    mix-blend-mode: multiply;
    opacity: 0.48;
}

#log-acciones.modo-periodico .periodico-avatar {
    position: relative;

    filter:
        grayscale(1)
        contrast(1.42)
        brightness(0.88) !important;
}

/* ------------------------------------------
   TRAMA DE IMPRESIÓN

   Dos tramas ligeramente desfasadas para
   evitar la cuadrícula digital perfecta.
------------------------------------------ */

#log-acciones.modo-periodico .periodico-avatar::after {
    content: "";

    position: absolute;
    inset: -2px;

    pointer-events: none;

    /*
       Trama mucho más fina.

       A tamaño normal debe percibirse como
       textura de impresión, no como una
       cuadrícula colocada encima de la foto.
    */
    background-image:

    /* Tinta negra */
    radial-gradient(
        circle,
        rgba(15, 13, 10, 0.30) 0 0.22px,
        transparent 0.48px
    ),

    /* Pequeña contaminación cian */
    radial-gradient(
        circle,
        rgba(0, 75, 90, 0.10) 0 0.18px,
        transparent 0.43px
    ),

    /* Pequeña contaminación magenta */
    radial-gradient(
        circle,
        rgba(105, 15, 48, 0.075) 0 0.17px,
        transparent 0.42px
    );

    background-size:
    1.65px 1.65px,
    1.71px 1.69px,
    1.67px 1.73px;

background-position:
    0 0,
    0.32px 0.12px,
    -0.24px 0.28px;

    /*
       Una ligera rotación evita que la trama
       coincida perfectamente con los píxeles
       horizontales y verticales de la pantalla.
    */
    transform:
        rotate(-1.7deg)
        scale(1.04);

    transform-origin: center;

    mix-blend-mode: multiply;

    opacity: 0.58;

    z-index: 2;
}


/* ------------------------------------------
   DEFECTOS DE TINTA

   Ya no son rayas repetidas perfectamente.
   Son zonas arbitrarias de tinta desigual.
------------------------------------------ */

#log-acciones.modo-periodico .periodico-avatar::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            91deg,
            transparent 0%,
            transparent 17%,
            rgba(20, 20, 18, 0.10) 18%,
            transparent 19%,
            transparent 61%,
            rgba(20, 20, 18, 0.07) 62%,
            transparent 64%
        ),

        radial-gradient(
            ellipse at 27% 38%,
            rgba(255, 255, 255, 0.11),
            transparent 23%
        ),

        radial-gradient(
            ellipse at 76% 71%,
            rgba(15, 15, 13, 0.12),
            transparent 27%
        );

    mix-blend-mode: multiply;

    opacity: 0.75;
}
/* ==================================================
   PERIÓDICO — ACABADO FOTO DEFINITIVO DE PRUEBA
================================================== */

#log-acciones.modo-periodico .periodico-foto {
    width: 190px;
    height: 128px;

    position: relative;
    overflow: hidden;

    margin: 0 auto 5px;

    border: none;

    background-color: #c1bcac;

    filter: none;
}


/* ------------------------------------------
   FOTO BASE
------------------------------------------ */

#log-acciones.modo-periodico .periodico-avatar {
    position: relative;

    width: 100%;
    height: 100%;

    font-size: 0 !important;

    

    filter:
    grayscale(0)
    saturate(0.68)
    contrast(1.22)
    brightness(0.94)
    sepia(0.10) !important;
}


/* ------------------------------------------
   TRAMA DE IMPRESIÓN

   Varias tramas superpuestas con tamaños
   y posiciones ligeramente diferentes.

   El objetivo es evitar que los puntos
   parezcan una cuadrícula digital perfecta.
------------------------------------------ */

#log-acciones.modo-periodico .periodico-avatar::after {
    content: "";

    position: absolute;
    inset: -3px;

    pointer-events: none;

    /*
       TRAMA DE IMPRESIÓN FINA

       Debe percibirse como pérdida de definición
       de imprenta, no como puntos dibujados
       encima de la fotografía.
    */
    background-image:

        /* Negro principal */
        radial-gradient(
            circle,
            rgba(13, 12, 10, 0.26) 0 0.14px,
            transparent 0.36px
        ),

        /* Cian ligeramente desregistrado */
        radial-gradient(
            circle,
            rgba(0, 72, 82, 0.075) 0 0.12px,
            transparent 0.32px
        ),

        /* Magenta ligeramente desregistrado */
        radial-gradient(
            circle,
            rgba(105, 18, 48, 0.060) 0 0.11px,
            transparent 0.31px
        );

    background-size:
        1.28px 1.28px,
        1.34px 1.31px,
        1.30px 1.36px;

    background-position:
        0 0,
        0.21px 0.08px,
        -0.16px 0.19px;

    transform:
        rotate(-1.15deg)
        scale(1.04);

    transform-origin: center;

    mix-blend-mode: multiply;

    opacity: 0.42;

    z-index: 2;
}

/* ------------------------------------------
   IMPERFECCIONES DE TINTA

   Manchas extremadamente suaves para que
   distintas zonas tengan distinta densidad
   de impresión.

   No forman líneas regulares.
------------------------------------------ */

#log-acciones.modo-periodico .periodico-avatar::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    /*
       DEFECTOS ORGÁNICOS DE IMPRESIÓN

       Algunas zonas reciben más tinta,
       otras quedan ligeramente lavadas.
       Debe ser sutil.
    */
    background:

        /* Mancha oscura irregular arriba izquierda */
        radial-gradient(
            ellipse at 18% 16%,
            rgba(24, 18, 12, 0.14) 0%,
            rgba(24, 18, 12, 0.07) 13%,
            transparent 32%
        ),

        /* Zona ligeramente empastada */
        radial-gradient(
            ellipse at 73% 37%,
            rgba(20, 15, 11, 0.11) 0%,
            rgba(20, 15, 11, 0.045) 18%,
            transparent 39%
        ),

        /* Pérdida de tinta */
        radial-gradient(
            ellipse at 39% 61%,
            rgba(235, 226, 199, 0.16) 0%,
            rgba(235, 226, 199, 0.07) 15%,
            transparent 34%
        ),

        /* Segunda pérdida de tinta */
        radial-gradient(
            ellipse at 84% 82%,
            rgba(235, 226, 199, 0.12) 0%,
            transparent 29%
        ),

        /* Franja vertical imperfecta */
        linear-gradient(
            93deg,
            transparent 0%,
            transparent 24%,
            rgba(32, 24, 16, 0.055) 26%,
            rgba(32, 24, 16, 0.025) 28%,
            transparent 31%,
            transparent 69%,
            rgba(238, 229, 204, 0.07) 71%,
            transparent 75%
        ),

        /* Variación diagonal muy tenue */
        linear-gradient(
            17deg,
            transparent 0%,
            transparent 44%,
            rgba(22, 17, 12, 0.035) 47%,
            transparent 51%
        );

    mix-blend-mode: multiply;

    opacity: 0.82;

    z-index: 3;
}


/* ------------------------------------------
   LIGERA PÉRDIDA DE TINTA EN LOS BORDES

   Evita que la fotografía parezca un
   rectángulo digital perfectamente limpio.
------------------------------------------ */

#log-acciones.modo-periodico .periodico-foto::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 8;

    pointer-events: none;

    box-shadow:
        inset 1px 0 2px rgba(205, 199, 180, 0.30),
        inset -1px 0 2px rgba(205, 199, 180, 0.22),
        inset 0 1px 2px rgba(205, 199, 180, 0.20),
        inset 0 -1px 2px rgba(205, 199, 180, 0.27);
}


/* ------------------------------------------
   GRANO MUY FINO SOBRE LA FOTO
------------------------------------------ */

#log-acciones.modo-periodico .periodico-foto::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 9;

    pointer-events: none;

    /*
       PEQUEÑOS DEFECTOS DE IMPRESIÓN

       Puntos y pequeñas zonas donde la tinta
       no cubrió el papel uniformemente.
    */
    background-image:

        radial-gradient(
            ellipse at 11% 21%,
            rgba(225, 218, 194, 0.42) 0 0.7px,
            transparent 1.4px
        ),

        radial-gradient(
            ellipse at 29% 74%,
            rgba(225, 218, 194, 0.34) 0 0.55px,
            transparent 1.2px
        ),

        radial-gradient(
            ellipse at 67% 18%,
            rgba(225, 218, 194, 0.28) 0 0.65px,
            transparent 1.3px
        ),

        radial-gradient(
            ellipse at 83% 63%,
            rgba(25, 19, 13, 0.20) 0 0.6px,
            transparent 1.25px
        ),

        radial-gradient(
            ellipse at 46% 43%,
            rgba(25, 19, 13, 0.16) 0 0.5px,
            transparent 1.1px
        );

    background-size:
        19px 23px,
        31px 27px,
        37px 41px,
        29px 35px,
        43px 31px;

    background-position:
        2px 4px,
        13px 8px,
        5px 17px,
        19px 3px,
        7px 11px;

    opacity: 0.85;

    mix-blend-mode: multiply;
}

/* ==========================================
   PERIÓDICO — TITULARES LARGOS
========================================== */

#log-acciones.modo-periodico
.periodico-titular.periodico-titular-largo {
    font-size: 25px;
    line-height: 1.02;
}

#log-acciones.modo-periodico
.periodico-titular.periodico-titular-muy-largo {
    font-size: 21px;
    line-height: 1;
}

/* ==========================================
   PERIÓDICO — AJUSTE TITULARES LARGOS
========================================== */

#log-acciones.modo-periodico
h2.periodico-titular.periodico-titular-largo {
    font-size: 23px !important;
    line-height: 1.02 !important;
}

#log-acciones.modo-periodico
h2.periodico-titular.periodico-titular-muy-largo {
    font-size: 19px !important;
    line-height: 1 !important;
}

/* ==========================================
   PERIÓDICO — TAMAÑO SEGÚN LONGITUD
========================================== */

#log-acciones.modo-periodico
h2.periodico-titular.periodico-titular-largo {
    font-size: 21px !important;
    line-height: 1.02 !important;
}

#log-acciones.modo-periodico
h2.periodico-titular.periodico-titular-muy-largo {
    font-size: 17px !important;
    line-height: 1.02 !important;
}

/* ==========================================
   PERIÓDICO — NAVEGACIÓN FIJA
========================================== */

#log-acciones.modo-periodico {
    position: relative;
}

#log-acciones.modo-periodico
#navegacion-acciones {
    position: absolute;

    left: 50%;
    bottom: 42px;

    width: 100%;

    margin: 0;

    transform: translateX(-50%);

    z-index: 20;
}

@media (max-width: 700px) {

    #log-acciones #navegacion-acciones {
        position: absolute !important;
        left: 50% !important;
        bottom: 48px !important;

        width: calc(100% - 36px) !important;
        margin: 0 !important;

        transform: translateX(-50%) !important;
        z-index: 20;
    }

    #log-acciones #contenido-accion {
        padding-bottom: 54px;
        box-sizing: border-box;
    }

}

/* ==========================================
   PERIÓDICO — CABECERA DE ALTURA FIJA
========================================== */

#log-acciones.modo-periodico::before {
    box-sizing: border-box;

    width: calc(100% - 90px);
    height: 68px;

    margin: 18px auto 0;
    padding: 0 8px 8px;

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

    border-bottom: 4px double #27231c;

    /* Permite partir nombres sin espacios
       como CLUBPENGUIN.COM si fuera necesario */
    overflow-wrap: anywhere;
    word-break: normal;

    line-height: 0.9;

    text-align: center;
}

/* ==========================================
   PERIÓDICO — ZONA FIJA DEL TITULAR
========================================== */

#log-acciones.modo-periodico
.periodico-titular {
    box-sizing: border-box;

    height: 105px;
    max-width: 520px;

    margin: 0 auto;

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

    overflow: hidden;

    text-align: center;
}

#log-acciones.modo-periodico
.periodico-separador {
    margin-top: 0;
    margin-bottom: 18px;
}

/* ==========================================
   PERIÓDICO — TITULAR COMPACTO
========================================== */

#log-acciones.modo-periodico
.periodico-titular {
    box-sizing: border-box;

    height: 78px;

    margin: 0 auto !important;
    padding: 0;

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

    overflow: hidden;
}

#log-acciones.modo-periodico
.periodico-separador {
    margin: 0 auto 12px !important;
}

/* ==========================================
   PERIÓDICO — CABECERA MÁS COMPACTA
========================================== */

#log-acciones.modo-periodico::before {
    margin-top: 10px !important;
    padding-bottom: 4px !important;
}

/* ==========================================
   ARRUGAS DEL PERIÓDICO
========================================== */

/*
   Las bandas son deliberadamente anchas,
   suaves y ligeramente descentradas.
   La combinación luz/sombra evita que
   parezcan líneas dibujadas.
*/


/* ------------------------------------------
   VARIANTE 1
------------------------------------------ */

#log-acciones.modo-periodico.periodico-textura-1 {
    background-image:

        /* arruga diagonal principal */
        linear-gradient(
            73deg,
            transparent 0%,
            transparent 18%,
            rgba(72, 62, 43, 0.025) 20%,
            rgba(72, 62, 43, 0.075) 21.3%,
            rgba(255,255,240,0.10) 22.2%,
            rgba(72, 62, 43, 0.035) 23.1%,
            transparent 25.5%,
            transparent 100%
        ),

        /* pliegue secundario */
        linear-gradient(
            112deg,
            transparent 0%,
            transparent 69%,
            rgba(72, 62, 43, 0.035) 70.5%,
            rgba(255,255,240,0.08) 71.4%,
            rgba(72, 62, 43, 0.025) 72.5%,
            transparent 75%,
            transparent 100%
        ),

        /* mancha irregular */
        radial-gradient(
            ellipse at 18% 34%,
            rgba(91, 74, 43, 0.055),
            transparent 31%
        ),

        radial-gradient(
            ellipse at 76% 72%,
            rgba(255,255,235,0.055),
            transparent 27%
        ),

        /* fibras */
        repeating-linear-gradient(
            0deg,
            rgba(70,55,30,0.025) 0px,
            rgba(70,55,30,0.025) 1px,
            transparent 1px,
            transparent 4px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(70,55,30,0.012) 0px,
            rgba(70,55,30,0.012) 1px,
            transparent 1px,
            transparent 7px
        );
}


/* ------------------------------------------
   VARIANTE 2
------------------------------------------ */

#log-acciones.modo-periodico.periodico-textura-2 {
    background-image:

        /* pliegue horizontal imperfecto */
        linear-gradient(
            2deg,
            transparent 0%,
            transparent 52%,
            rgba(66,55,38,0.025) 53%,
            rgba(66,55,38,0.075) 54%,
            rgba(255,255,240,0.09) 54.8%,
            rgba(66,55,38,0.035) 55.7%,
            transparent 57.5%,
            transparent 100%
        ),

        /* diagonal */
        linear-gradient(
            37deg,
            transparent 0%,
            transparent 31%,
            rgba(66,55,38,0.04) 32.5%,
            rgba(255,255,240,0.075) 33.5%,
            rgba(66,55,38,0.025) 34.5%,
            transparent 37%,
            transparent 100%
        ),

        radial-gradient(
            ellipse at 82% 26%,
            rgba(91,74,43,0.05),
            transparent 29%
        ),

        radial-gradient(
            ellipse at 28% 78%,
            rgba(255,255,235,0.05),
            transparent 24%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(70,55,30,0.025) 0px,
            rgba(70,55,30,0.025) 1px,
            transparent 1px,
            transparent 4px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(70,55,30,0.012) 0px,
            rgba(70,55,30,0.012) 1px,
            transparent 1px,
            transparent 7px
        );
}


/* ------------------------------------------
   VARIANTE 3
   Más maltratada
------------------------------------------ */

#log-acciones.modo-periodico.periodico-textura-3 {
    background-image:

        linear-gradient(
            101deg,
            transparent 0%,
            transparent 25%,
            rgba(65,54,37,0.035) 26.5%,
            rgba(65,54,37,0.08) 27.5%,
            rgba(255,255,240,0.09) 28.3%,
            rgba(65,54,37,0.025) 29.2%,
            transparent 31.5%,
            transparent 100%
        ),

        linear-gradient(
            58deg,
            transparent 0%,
            transparent 63%,
            rgba(65,54,37,0.035) 64.5%,
            rgba(255,255,240,0.075) 65.5%,
            rgba(65,54,37,0.025) 66.5%,
            transparent 69%,
            transparent 100%
        ),

        linear-gradient(
            149deg,
            transparent 0%,
            transparent 79%,
            rgba(65,54,37,0.045) 80%,
            rgba(255,255,240,0.07) 81%,
            transparent 83%,
            transparent 100%
        ),

        radial-gradient(
            ellipse at 16% 73%,
            rgba(88,69,39,0.06),
            transparent 25%
        ),

        radial-gradient(
            ellipse at 73% 31%,
            rgba(255,255,235,0.055),
            transparent 28%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(70,55,30,0.025) 0px,
            rgba(70,55,30,0.025) 1px,
            transparent 1px,
            transparent 4px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(70,55,30,0.012) 0px,
            rgba(70,55,30,0.012) 1px,
            transparent 1px,
            transparent 7px
        );
}

/* ==========================================
   PERIÓDICO — POSICIÓN DEL MODAL
   Debe ocupar exactamente el mismo centro
   que el registro normal de eventos.
========================================== */

#log-acciones.modo-periodico {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    margin: 0 !important;

    transform: translate(-50%, -50%) !important;
}

/* ==========================================
   APOYO — BOTÓN EN FICHA
========================================== */

.boton-enviar-apoyo {
    width: 100%;
    margin: 10px 0 16px;
    padding: 11px 14px;

    border: 1px solid #666;
    border-radius: 8px;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.boton-enviar-apoyo:hover {
    transform: translateY(-1px);
}


/* ==========================================
   SÍMBOLO DE GÉNERO
========================================== */

.genero-simbolo {
    font-weight: 900;
}

.genero-masculino {
    color: #5dade2;
}

.genero-femenino {
    color: #ff78b5;
}

.ficha-titulo .genero-simbolo {
    font-weight: 900 !important;
}

.ficha-titulo .genero-simbolo.genero-masculino {
    color: #5dade2 !important;
}

.ficha-titulo .genero-simbolo.genero-femenino {
    color: #ff78b5 !important;
}

.boton-enviar-apoyo {
    width: auto;

    margin: 12px auto 0;
    padding: 7px 18px;

    display: block;

    background: #343434;
    color: #fff;

    border: 1px solid #666;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

/* ==========================================
   MAPA MÓVIL — BOTÓN DE APOYO DENTRO DE FICHA
========================================== */

@media (max-width: 700px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa:has(.boton-enviar-apoyo) {
        height: 118px !important;
        overflow: hidden !important;
    }

    #informacion-mapa
    #ficha-personaje.ficha-activa
    .ficha-grid
    .boton-enviar-apoyo {
        grid-column: 1 / 4 !important;
        grid-row: 3 !important;

        justify-self: center !important;

        width: auto !important;
        height: 32px !important;

        margin: 5px 0 0 !important;
        padding: 0 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        font-size: 12px !important;

        position: static !important;
        transform: none !important;
    }
}

/* ==========================================
   MENÚ DE APOYO
========================================== */

#menu-apoyo {
    position: fixed;
    inset: 0;
    z-index: 3000;

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

    background: rgba(0, 0, 0, 0.72);
}

.ventana-apoyo {
    position: relative;

    width: min(420px, 90vw);
    padding: 24px;

    box-sizing: border-box;

    background: #252525;
    border: 1px solid #555;
    border-radius: 12px;

    text-align: center;
}

.ventana-apoyo h2 {
    margin: 0 35px 6px;
}

.apoyo-destinatario {
    margin: 0 0 14px;
    font-weight: 700;
}

.apoyo-dinero {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.cerrar-apoyo {
    position: absolute;
    top: 8px;
    right: 10px;

    padding: 0;

    background: none;
    border: none;

    color: #aaa;
    font-size: 26px;
    cursor: pointer;
}

.opciones-apoyo {
    display: grid;
    gap: 8px;

    margin-top: 20px;
}

.opcion-apoyo {
    width: 100%;
    padding: 10px 12px;

    background: #333;
    color: white;

    border: 1px solid #555;
    border-radius: 8px;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

#menu-apoyo {
    z-index: 10000;
}

.opcion-apoyo:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.opcion-apoyo.opcion-apoyo-seleccionada {
    border-color: #fff;
    background: #4a4a4a;
    transform: scale(1.01);
}

/* ==========================================
   MENSAJE Y CONFIRMACIÓN DE APOYO
========================================== */

.mensaje-apoyo {
    margin-top: 18px;
}

.input-mensaje-apoyo {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 12px;

    background: #181818;
    color: white;

    border: 1px solid #555;
    border-radius: 8px;

    font-size: 14px;
}

.confirmar-apoyo {
    width: 100%;

    margin-top: 16px;
    padding: 10px 12px;

    border: 1px solid #666;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.confirmar-apoyo:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ==========================================
   CABECERA DEL MENÚ DE APOYO
========================================== */

.cabecera-apoyo {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 20px;
    padding-right: 0px;

    text-align: left;
}

.foto-apoyo {
    width: 86px;
    height: 86px;

    flex: 0 0 86px;

    object-fit: cover;

    border-radius: 10px;
    border: 1px solid #555;
}

.foto-apoyo-sin-imagen {
    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-size: 32px;
    font-weight: 800;
}

.datos-apoyo {
    min-width: 0;
}

.datos-apoyo h2 {
    margin: 0 0 5px;
    text-align: left;
    white-space: nowrap;
}

.datos-apoyo .apoyo-destinatario {
    margin: 0 0 5px;
    text-align: left;
}

.datos-apoyo .apoyo-dinero {
    margin: 0;
    text-align: left;
}

.apoyo-info {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 7px;

    white-space: nowrap;
}

.apoyo-info .apoyo-destinatario {
    margin: 0;

    font-size: 17px;
    font-weight: 700;
}

.apoyo-info .apoyo-separador {
    color: #777;
    font-size: 16px;
}

.apoyo-info .apoyo-dinero {
    margin: 0;

    font-size: 17px;
    font-weight: 700;
}

/* ==========================================
   STATS COMPACTOS — MENÚ DE APOYO
========================================== */

.apoyo-stats {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 5px;

    font-size: 12px;
    font-weight: 500;
    color: #c8c8c8;

    white-space: nowrap;
}

.apoyo-stats span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ==========================================
   MAPA — POSICIÓN DEL BOTÓN DE APOYO
========================================== */



/* ==========================================
   EVENTO ESPECIAL — APOYO
========================================== */

/* Caja del texto */
#log-acciones.evento-apoyo #texto-accion {
    background:
        linear-gradient(
            135deg,
            #211b0d 0%,
            #17140d 55%,
            #241c0b 100%
        );

    border: 1px solid #c99a32;

    box-shadow:
        0 0 10px rgba(201, 154, 50, 0.28),
        inset 0 0 12px rgba(201, 154, 50, 0.08);
}

/* Título: 🎁 Apoyo */
#log-acciones.evento-apoyo #categoria-accion {
    color: #e4b84f;
    text-shadow:
        0 0 8px rgba(228, 184, 79, 0.35);

        /* Fondo general del evento de apoyo */
#log-acciones.evento-apoyo {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(184, 132, 25, 0.20) 0%,
            rgba(75, 53, 12, 0.15) 38%,
            rgba(25, 21, 13, 0) 70%
        ),
        repeating-linear-gradient(
            135deg,
            #302a1c 0px,
            #302a1c 3px,
            #262116 3px,
            #262116 6px
        );
}
}

@media (max-width: 700px) {

    #log-acciones.evento-apoyo {
        background-color: #211b0f;

        background-image:
            radial-gradient(
                circle at 50% 38%,
                rgba(210, 157, 43, 0.18) 0%,
                rgba(125, 88, 20, 0.10) 38%,
                rgba(0, 0, 0, 0.18) 100%
            ),
            repeating-linear-gradient(
                135deg,
                rgba(218, 166, 54, 0.035) 0px,
                rgba(218, 166, 54, 0.035) 1px,
                transparent 1px,
                transparent 4px
            );
    }
}

/* ==========================================
   PENDIENTE — EVENTO EXTRAORDINARIO
   ------------------------------------------
   Tratamiento visual reservado para eventos
   extremadamente raros/importantes.

   NO ASIGNADO TODAVÍA.

   Idea:
   - Usarlo solo 1–3 veces aprox. por partida.
   - Debe indicar que ocurrió algo excepcional.
   - No usar para eventos especiales comunes
     como APOYO.
========================================== */

/*
#log-acciones.evento-extraordinario {
    background-color: #3a2b0b;

    background-image:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 196, 55, 0.32) 0%,
            rgba(205, 143, 25, 0.20) 42%,
            rgba(70, 45, 5, 0.12) 100%
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255, 205, 75, 0.055) 0px,
            rgba(255, 205, 75, 0.055) 1px,
            transparent 1px,
            transparent 4px
        );
}
*/

/* ==========================================
   EVITAR RESALTADO VISUAL TRAS ABRIR POPUPS
========================================== */

.boton-enviar-apoyo,
.ranking-fila-clicable {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

.boton-enviar-apoyo:focus,
.boton-enviar-apoyo:focus-visible,
.boton-enviar-apoyo:active {
    outline: none;
    box-shadow: none;
}

.ranking-fila-clicable:focus,
.ranking-fila-clicable:focus-visible,
.ranking-fila-clicable:active {
    outline: none;
    box-shadow: none;
}

/* ==========================================
   SELLO BONUS — APOYO
========================================== */

.avatar-accion {
    position: relative;
    overflow: visible;
}

#sello-bonus-apoyo {
    position: absolute;

    top: 0;
    right: 0;
    left: auto;

    padding: 3px 6px;

    background: #d39b22;
    color: #17120a;

    border: 2px solid #f2c85b;
    border-radius: 5px;

    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;

    

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35);

    z-index: 5;

    pointer-events: none;
}

/* ==========================================
   BONUS — BRILLO DINÁMICO
========================================== */

#sello-bonus-apoyo {
    overflow: hidden;

    animation:
        brilloBonusApoyo 1.8s ease-in-out infinite;
}

@keyframes brilloBonusApoyo {

    0%,
    100% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.35),
            0 0 4px rgba(255, 204, 70, 0.25);
    }

    50% {
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.35),
            0 0 13px rgba(255, 211, 85, 0.85),
            0 0 22px rgba(255, 184, 35, 0.35);
    }
}


/* Destello que cruza el sello */

#sello-bonus-apoyo::after {
    content: "";

    position: absolute;
    top: -40%;
    left: -45%;

    width: 22%;
    height: 180%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.75),
            transparent
        );

    transform:
        rotate(18deg);

    animation:
        destelloBonusApoyo 2.6s ease-in-out infinite;

    pointer-events: none;
}

@keyframes destelloBonusApoyo {

    0%,
    45% {
        left: -45%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    72% {
        left: 125%;
        opacity: 0.8;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

/* ==========================================
   PERIÓDICO — PERSONAJE SIN FOTOGRAFÍA
========================================== */

#log-acciones.modo-periodico
.periodico-avatar.periodico-avatar-sin-foto {

    width: 100%;
    height: 100%;

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

    background-image: none !important;
    background-color: #aaa38f !important;

    color: #39352d;

    font-size: 62px !important;
    line-height: 1;

    filter:
        grayscale(1)
        contrast(1.15)
        opacity(0.72) !important;
}

/* ==========================================
   CONSECUENCIAS SECUNDARIAS DE EVENTO
   ========================================== */
/* ==========================================
   CONSECUENCIAS SECUNDARIAS DE EVENTO
   ========================================== */

#texto-accion:has(.consecuencias-evento) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    height: auto;
    min-height: 0px;
    max-height: 210px;

    padding-top: 1px;
    padding-bottom: 12px;

    overflow-y: auto;
overflow-x: hidden;
}

#texto-accion:has(.consecuencias-evento)
.texto-principal-evento {
    width: 100%;

    display: block;

    box-sizing: border-box;

    padding: 0;

    text-align: center;
}

.consecuencias-evento {
    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 5px;
}

.consecuencia-evento {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    font-size: 0.82em;
    line-height: 1.25;

    opacity: 0.82;

    text-align: center;
}

.consecuencia-evento:first-child {
    padding-top: 8px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);
}

.consecuencia-evento
+ .consecuencia-evento {
    margin-top: 4px;
}

/* ==========================================
   COLOR DE FONDO SEGÚN TIPO DE EVENTO
========================================== */

/* 🔎 BÚSQUEDA */
#log-acciones.evento-busqueda {
    background-color: #12304a !important;
}

/* 💎 HALLAZGO */
#log-acciones.evento-hallazgo {
    background-color: #124047 !important;
}

/* 🤕 INFORTUNIO */
#log-acciones.evento-infortunio {
    background-color: #4a2a12 !important;
}

/* ⚔️ ENFRENTAMIENTO */
#log-acciones.evento-enfrentamiento {
    background-color: #421b20 !important;
}

/* 💬 INTERACCIÓN */
#log-acciones.evento-interaccion {
    background-color: #252947 !important;
}

/* ❤️ ROMANCE */
#log-acciones.evento-romance {
    background-color: #431d34 !important;
}

/* ==========================================
   VIÑETA INTERIOR — VENTANA DE EVENTOS
========================================== */

#log-acciones.evento-busqueda,
#log-acciones.evento-hallazgo,
#log-acciones.evento-infortunio,
#log-acciones.evento-enfrentamiento,
#log-acciones.evento-interaccion,
#log-acciones.evento-romance,
#log-acciones.evento-enamoramiento {
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0.12) 65%,
            rgba(0, 0, 0, 0.42) 100%
        ) !important;
}

/* ==========================================
   BORDE BRILLANTE SEGÚN TIPO DE EVENTO
========================================== */

/* 🔎 BÚSQUEDA — azul */
#log-acciones.evento-busqueda {
    border-color: #3da9ff !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(61, 169, 255, 0.55),
        0 0 28px rgba(61, 169, 255, 0.22);
}

/* 💎 HALLAZGO — turquesa */
#log-acciones.evento-hallazgo {
    border-color: #38e0d0 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(56, 224, 208, 0.55),
        0 0 28px rgba(56, 224, 208, 0.22);
}

/* 🤕 INFORTUNIO — naranja */
#log-acciones.evento-infortunio {
    border-color: #ff9d3d !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(255, 157, 61, 0.55),
        0 0 28px rgba(255, 157, 61, 0.22);
}

/* ⚔️ ENFRENTAMIENTO — rojo */
#log-acciones.evento-enfrentamiento {
    border-color: #ff525d !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(255, 82, 93, 0.60),
        0 0 28px rgba(255, 82, 93, 0.25);
}

/* 💬 INTERACCIÓN — violeta */
#log-acciones.evento-interaccion {
    border-color: #8d8cff !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(141, 140, 255, 0.55),
        0 0 28px rgba(141, 140, 255, 0.22);
}

/* ❤️ ROMANCE Y ENAMORAMIENTO — rosa */
#log-acciones.evento-romance,
#log-acciones.evento-enamoramiento {
    border-color: #ff62b0 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(255, 98, 176, 0.60),
        0 0 28px rgba(255, 98, 176, 0.25);
}

/* 🎁 APOYO — dorado */
#log-acciones.evento-apoyo {
    border-color: #ffd54f !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(255, 213, 79, 0.60),
        0 0 28px rgba(255, 213, 79, 0.25);
}

/* 🔫 ARMA USADA — fuego */
#log-acciones.evento-arma-usada {
    background-color: #2f2600 !important;

    border-color: #f79400 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(255, 112, 67, 0.60),
        0 0 28px rgba(255, 112, 67, 0.25);
}

/* 💊 CURACIÓN — verde médico */
#log-acciones.evento-curacion {
    background-color: #123400 !important;

    border-color: #4cffc9 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(76, 255, 145, 0.60),
        0 0 28px rgba(76, 255, 145, 0.25);
}

/* ==========================================
   FILTRO DEL REGISTRO DE EVENTOS
========================================== */

#filtro-eventos-alternar {
    position: fixed;
    z-index: 10001;

    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;

    min-height: 35px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: #f1f1f1;
    border: 2px solid #888;
    border-radius: 9px;

    color: #111;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.35);

    animation:
        aparecerFiltroEventos
        var(--duracion-apertura-eventos)
        ease-out;
}

@keyframes aparecerFiltroEventos {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#filtro-eventos-alternar.oculto {
    display: none !important;
}

/* ==========================================
   PERIODICO — TRES FINALISTAS
========================================== */

.periodico-finalistas-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;

    margin: 12px 0 10px;
}

/* ==========================================
   DESKTOP — PERIÓDICO DE 2 Y 3 FINALISTAS
   ========================================== */

@media (min-width: 769px) {

    /* Reducir el espacio ocupado por el titular */
    #log-acciones.modo-periodico
    .periodico-finalistas .periodico-titular {
        min-height: 0 !important;
        height: auto !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        font-size: 34px !important;
    }

    #log-acciones.modo-periodico
    .periodico-finalistas .periodico-separador {
        margin-bottom: 10px;
    }

    /* Tres fotografías */
    #log-acciones.modo-periodico
    .periodico-finalistas-fotos {
        max-width: 780px;
        margin: 8px auto 10px;
        gap: 10px;
    }

    #log-acciones.modo-periodico
    .periodico-finalistas-fotos
    .periodico-finalista-foto {
        height: 195px;
        aspect-ratio: auto;
    }

    /* Dos fotografías */
    #log-acciones.modo-periodico
    .periodico-finalistas-fotos:has(
        > .periodico-finalista:nth-child(2):last-child
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 580px;
    }

    #log-acciones.modo-periodico
    .periodico-finalistas-fotos:has(
        > .periodico-finalista:nth-child(2):last-child
    ) .periodico-finalista-foto {
        height: 215px;
    }

    /* Nombres de los finalistas */
    #log-acciones.modo-periodico
    .periodico-finalista-nombre {
        font-size: 14px;
        margin-top: 5px;
    }

    /* Autor y cuerpo */
    #log-acciones.modo-periodico
    .periodico-finalistas .periodico-autor {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    #log-acciones.modo-periodico
    .periodico-finalistas .periodico-cuerpo {
        font-size: 19px;
        line-height: 1.3;
    }
}


.periodico-finalista {
    min-width: 0;
    text-align: center;
}

.periodico-finalista-foto {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #d8d2c4;
    border: 1px solid rgba(0, 0, 0, 0.55);
}

.periodico-finalista-foto img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    filter:
        grayscale(0)
        saturate(0.68)
        contrast(1.22)
        brightness(0.94)
        sepia(0.10) !important;
}

.periodico-finalista-sin-foto {
    width: 100%;
    height: 100%;

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

    font-size: 36px;
}

.periodico-finalista-nombre {
    margin-top: 5px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 700;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   PERIODICO — ACABADO IMPRESO FINALISTAS
========================================== */

#log-acciones.modo-periodico .periodico-finalista-foto {
    position: relative;
    overflow: hidden;

    background-color: #c1bcac;
}

#log-acciones.modo-periodico .periodico-finalista-foto img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    filter:
        grayscale(0)
        saturate(0.68)
        contrast(1.22)
        brightness(0.94)
        sepia(0.10) !important;
}


/* TRAMA DE IMPRESIÓN */

#log-acciones.modo-periodico .periodico-finalista-foto::after {
    content: "";

    position: absolute;
    inset: -3px;

    pointer-events: none;

    background-image:

        radial-gradient(
            circle,
            rgba(13, 12, 10, 0.26) 0 0.14px,
            transparent 0.36px
        ),

        radial-gradient(
            circle,
            rgba(38, 30, 19, 0.15) 0 0.12px,
            transparent 0.34px
        ),

        radial-gradient(
            circle,
            rgba(10, 9, 8, 0.12) 0 0.11px,
            transparent 0.32px
        );

    background-size:
    1.8px 1.8px,
    2.15px 2.15px,
    2.6px 2.6px;
    opacity: 0.78;

    background-position:
        0 0,
        0.32px 0.12px,
        -0.24px 0.28px;

    transform:
        rotate(-1.7deg)
        scale(1.04);

    transform-origin: center;

    mix-blend-mode: multiply;

  

    z-index: 2;
}


/* DEFECTOS DE TINTA */

#log-acciones.modo-periodico .periodico-finalista-foto::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            91deg,
            transparent 0%,
            transparent 17%,
            rgba(20, 20, 18, 0.10) 18%,
            transparent 19%,
            transparent 61%,
            rgba(20, 20, 18, 0.07) 62%,
            transparent 64%
        ),

        radial-gradient(
            ellipse at 27% 38%,
            rgba(255, 255, 255, 0.11),
            transparent 23%
        ),

        radial-gradient(
            ellipse at 76% 71%,
            rgba(15, 15, 13, 0.12),
            transparent 27%
        );

    mix-blend-mode: multiply;

    opacity: 0.75;

    z-index: 3;
}

/* ==========================================
   FINAL DE PARTIDA
========================================== */

#fondo-final-partida {
    position: fixed;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 215, 80, 0.12),
            rgba(0, 0, 0, 0.92) 65%
        );

    z-index: 20000;
}

#fondo-final-partida.oculto,
#final-partida.oculto {
    display: none;
}

#final-partida {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: min(520px, calc(100vw - 30px));

    padding: 38px 32px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        linear-gradient(
            145deg,
            #292929,
            #151515
        );

    border: 2px solid #d7b44a;
    border-radius: 18px;

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(215, 180, 74, 0.22);

    color: white;

    z-index: 20001;

    animation:
        aparecerFinalPartida 0.45s ease-out;
}

.final-partida-trofeo {
    font-size: 48px;
    line-height: 1;

    margin-bottom: 7px;
}

.final-partida-titulo {
    font-size: 30px;
    font-weight: 900;

    letter-spacing: 3px;
    text-align: center;

    margin-bottom: 18px;
}

.final-partida-foto {
    width: 165px;
    height: 165px;

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

    overflow: hidden;

    border: 4px solid #d7b44a;
    border-radius: 50%;

    background: #333;

    font-size: 70px;
    font-weight: bold;

    box-shadow:
        0 0 0 6px rgba(215, 180, 74, 0.10),
        0 12px 30px rgba(0, 0, 0, 0.55);
}

.final-partida-foto img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.final-partida-nombre {
    margin-top: 14px;

    font-size: 30px;
    font-weight: 800;
    text-align: center;
}

.final-partida-dia {
    margin-top: 8px;

    font-size: 16px;
    color: #bbb;
    text-align: center;
}

@keyframes aparecerFinalPartida {

    from {
        opacity: 0;
        transform:
            translate(-50%, -46%)
            scale(0.94);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@media (max-width: 700px) {

    #final-partida {
        padding: 26px 28px 28px;
    }

    .final-partida-trofeo {
        font-size: 52px;
    }

    .final-partida-titulo {
        font-size: 27px;
    }

    .final-partida-foto {
        width: 155px;
        height: 155px;
    }

    .final-partida-nombre {
        font-size: 27px;
    }
}

/* ==========================================
   CONFETI — FINAL DE PARTIDA
========================================== */

#confeti-final-partida {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 20002;
}

#confeti-final-partida.oculto {
    display: none;
}

.confeti-final {
    position: absolute;

    top: -30px;

    width: 10px;
    height: 18px;

    opacity: 0.95;

    animation-name: caerConfetiFinal;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes caerConfetiFinal {

    0% {
        transform:
            translateY(-30px)
            rotate(0deg);

        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;
    }
}

.cerrar-final-partida {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 34px;
    height: 34px;

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

    padding: 0;

    border: 0;
    background: transparent;

    color: #aaa;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    z-index: 2;
}

.cerrar-final-partida:hover {
    color: white;
}

/* ==========================================
   FINAL DE PARTIDA — INFORMACIÓN
========================================== */

.final-partida-dia {
    margin-top: 7px;

    font-size: 16px;
    color: #bbb;
    text-align: center;
}

.final-partida-ranking {
    margin-top: 4px;

    font-size: 15px;
    color: #ddd;
    text-align: center;
}

.final-partida-cuota {
    margin-top: 2px;

    font-size: 15px;
    font-weight: 700;
    color: #d7b44a;
    text-align: center;
}

/* ==========================================
   FINAL DE PARTIDA — MÓVIL
========================================== */

@media (max-width: 700px) {

    #final-partida {
        padding: 24px 20px 26px;
    }

    .final-partida-trofeo {
        font-size: 44px;
    }

    .final-partida-titulo {
        font-size: 27px;
    }

    .final-partida-foto {
        width: 150px;
        height: 150px;
    }

    .final-partida-nombre {
        font-size: 27px;
    }
}

/* ==========================================
   FINAL DE PARTIDA — JERARQUÍA
========================================== */

.final-partida-trofeo {
    font-size: 38px;
    margin-bottom: 4px;
}

.final-partida-titulo {
    font-size: 25px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.final-partida-nombre {
    margin-top: 12px;
    font-size: 32px;
    line-height: 1.05;
}

.final-partida-dia {
    margin-top: 8px;
    font-size: 15px;
    color: #aaa;
}

.final-partida-ranking {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #f0f0f0;
}

.final-partida-cuota {
    margin-top: 5px;
    font-size: 19px;
    font-weight: 900;
    color: #d7b44a;
}

/* ==========================================
   FINAL DE PARTIDA — COMPACTAR CABECERA
========================================== */

@media (max-width: 700px) {

    #final-partida {
        padding-top: 18px;
        padding-bottom: 22px;
    }

    .final-partida-trofeo {
        font-size: 32px;
        margin-bottom: 2px;
    }

    .final-partida-titulo {
        font-size: 23px;
        margin-bottom: 11px;
    }

    .final-partida-foto {
        width: 125px;
        height: 125px;
    }

    .final-partida-nombre {
        margin-top: 9px;
        font-size: 29px;
    }

    .final-partida-dia {
        margin-top: 4px;
        font-size: 14px;
    }

    .final-partida-ranking {
        margin-top: 8px;
        font-size: 15px;
    }

    .final-partida-cuota {
        margin-top: 2px;
        font-size: 16px;
    }
}

/* ==========================================
   FINAL DE PARTIDA — HAZAÑA
========================================== */

.final-partida-hazana {
    width: 100%;
    max-width: 420px;

    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid rgba(215, 180, 74, 0.35);

    text-align: center;
}

.final-partida-hazana-titulo {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
}

.final-partida-hazana-texto {
    margin-top: 4px;

    font-size: 14px;
    line-height: 1.3;
    color: #aaa;
}

@media (max-width: 700px) {

    .final-partida-hazana {
        margin-top: 13px;
        padding-top: 11px;
    }

    .final-partida-hazana-titulo {
        font-size: 16px;
    }

    .final-partida-hazana-texto {
        font-size: 13px;
    }
}

/* ==========================================
   FINAL — APUESTA GANADORA
========================================== */

#final-partida-apuesta.oculto {
    display: none;
}

.final-partida-apuesta {
    width: 100%;
    max-width: 480px;

    margin-top: 18px;
    padding-top: 18px;

    border-top:
        2px solid rgba(215, 180, 74, 0.55);

    text-align: center;
}

.final-partida-apuesta-titulo {
    font-size: 22px;
    font-weight: 900;
    color: #fff;

    letter-spacing: 0.5px;
}

.final-partida-apuesta-detalle {
    margin-top: 8px;

    font-size: 14px;
    color: #aaa;
}

.final-partida-apuesta-cobro {
    margin-top: 12px;

    font-size: 30px;
    line-height: 1;
    font-weight: 900;

    color: #d7b44a;

    text-shadow:
        0 0 16px rgba(215, 180, 74, 0.25);
}

@media (max-width: 700px) {

    .final-partida-apuesta {
        margin-top: 16px;
        padding-top: 15px;
    }

    .final-partida-apuesta-titulo {
        font-size: 20px;
    }

    .final-partida-apuesta-detalle {
        margin-top: 7px;
        font-size: 13px;
    }

    .final-partida-apuesta-cobro {
        margin-top: 11px;
        font-size: 29px;
    }
}

@keyframes brilloCobroFinal {

    0% {
        text-shadow:
            0 0 0 rgba(215, 180, 74, 0);
    }

    45% {
        text-shadow:
            0 0 18px rgba(215, 180, 74, 0.65);
    }

    100% {
        text-shadow:
            0 0 8px rgba(215, 180, 74, 0.22);
    }
}

.final-partida-apuesta-cobro {
    animation:
        brilloCobroFinal 1.2s ease-out;
}

/* =========================================================
   DESKTOP — VIEWPORT FIJO
   ========================================================= */

@media (min-width: 769px) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    body {
        max-width: none;
    }

        #ranking-supervivencia {
        height: calc(100dvh - 190px);
        min-height: 0;
        max-height: none;

        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    #contenido-ranking-supervivencia {
        padding-bottom: 24px;
    }

        /* -----------------------------------------
       CONTROLES PRINCIPALES — DESKTOP
       ----------------------------------------- */

   #abrir-log,
#siguiente-dia {
    width: 180px;
    min-width: 180px;
    height: 48px;

    padding: 0 18px;

    box-sizing: border-box;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

        /* -----------------------------------------
       POSICIÓN CONTROLES PRINCIPALES — DESKTOP
       ----------------------------------------- */

    #abrir-log {
    position: fixed;

    left: calc(50% - 180px);
    right: auto;
    bottom: 24px;

    z-index: 900;
}

#siguiente-dia {
    position: fixed;

    left: calc(50% + 10px);
    right: auto;
    top: auto;
    bottom: 24px;

    z-index: 900;
}
}

/* ==========================================
   RESULTADO DE PARTICIPANTES EN EVENTOS
========================================== */

.avatar-accion.avatar-accion-ganador {
    border: 3px solid #36c96b !important;

    box-shadow:
        0 0 0 1px rgba(54, 201, 107, 0.10),
        0 0 5px rgba(54, 201, 107, 0.22) !important;
}

.avatar-accion.avatar-accion-perdedor {
    border: 3px solid #e54848 !important;

    box-shadow:
        0 0 0 1px rgba(229, 72, 72, 0.10),
        0 0 5px rgba(229, 72, 72, 0.22) !important;
}

/* ==========================================
   BRILLO — COBRO DE APUESTA GANADORA
========================================== */

#final-partida-apuesta-cobro {
    animation:
        brilloCobroApuesta 2.4s ease-in-out infinite;
}

@keyframes brilloCobroApuesta {

    0%, 100% {
        filter:
            drop-shadow(
                0 0 0 rgba(255, 215, 80, 0)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 7px rgba(255, 215, 80, 0.65)
            );
    }
}

/* =========================================================
   DESKTOP — CONTROLES DE LA BARRA LATERAL
   ========================================================= */

@media (min-width: 769px) {

    #informacion-mapa {
        display: flex;
        flex-direction: column;

        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #controles-desktop {
        position: fixed;

        right: max(
            35px,
            calc((100vw - 1400px) / 2 + 35px)
        );

        bottom: 24px;

        width: 270px;

        display: flex;
        flex-direction: column;
        gap: 10px;

        margin: 0;

        z-index: 900;
    }

    #controles-desktop #abrir-log,
    #controles-desktop #siguiente-dia {
        position: static;

        width: 100%;
        min-width: 0;
        height: 48px;

        margin: 0;
        transform: none;
    }
}

/* =========================================================
   MÓVIL — RESTAURAR CONTROLES INFERIORES
   ========================================================= */

@media (max-width: 700px) {

    #controles-desktop {
        display: contents;
    }

    #abrir-log,
#siguiente-dia {
    position: fixed !important;

    top: auto !important;
bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;

    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    font-size: 15px !important;
    line-height: 1 !important;

    transform: none !important;

    z-index: 900;
}

    #abrir-log {
        left: 20px !important;
        right: auto !important;
    }

    #siguiente-dia {
        left: auto !important;
        right: 20px !important;
    }
}

/* =========================================================
   DESKTOP — BOTÓN APOYO SOBRE CONTROLES LATERALES
   ========================================================= */

@media (min-width: 769px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa
    .boton-enviar-apoyo {

        position: fixed !important;

        right: max(
            35px,
            calc((100vw - 1400px) / 2 + 35px)
        ) !important;

        bottom: 140px !important;

        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        font-size: 15px !important;
        font-weight: 700 !important;

        transform: none !important;

        z-index: 900;
    }
}

/* =========================================================
   DESKTOP — NOMBRE Y ESTADO DE VIDA DE LA FICHA
   ========================================================= */

@media (min-width: 769px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa
    .ficha-titulo {
        font-size: 20px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
    }

}

/* =========================================================
   DESKTOP — PANEL LATERAL A LA ALTURA DE LA VISTA PRINCIPAL
   ========================================================= */

@media (min-width: 769px) {

    #informacion-mapa {
        height: 797px;
    }

}

/* RUINITO — MISMO ANCHO DEL MAPA Y ALTURA DE FICHA */
@media (max-width: 700px) {
    #informacion-mapa.informacion-ruinito-prueba {
        width: 100%;
        height: 135px;
        min-height: 135px;
        margin-left: 0;
        margin-right: 0;
    }
}

    /* Ficha normal de MAPA */
    #informacion-mapa
    #ficha-personaje.ficha-activa:not(.ficha-desde-ranking) {
        height: 100% !important;
        min-height: 100% !important;
        box-sizing: border-box;
    }

    /* Bajar SOLO el botón Enviar apoyo de MAPA */
    #informacion-mapa
#ficha-personaje.ficha-activa:not(.ficha-desde-ranking) {
    position: relative;
}

#informacion-mapa
#ficha-personaje.ficha-activa:not(.ficha-desde-ranking)
.boton-enviar-apoyo {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
}

   /* Texto de ficha MAPA solo en móvil */
@media (max-width: 700px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa:not(.ficha-desde-ranking)
    .ficha-titulo {
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    #informacion-mapa
    #ficha-personaje.ficha-activa:not(.ficha-desde-ranking)
    .ficha-dato {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

}



/* =========================================================
   DESKTOP — RANKING A LA ALTURA DEL PANEL LATERAL
   ========================================================= */

@media (min-width: 769px) {

    #ranking-supervivencia {
        height: 750px;
        max-height: 750px;
    }

}

/* =========================================================
   DESKTOP — AJUSTES DEL REGISTRO DE EVENTOS
   No modificar móvil ni periódico
   ========================================================= */

@media (min-width: 769px) {

    /* 1. Subir el rectángulo de texto */
    #log-acciones:not(.modo-periodico) #texto-accion {
        transform: translateY(-35px);
    }

    /* 2. Mantener altura con consecuencias */
    #log-acciones:not(.modo-periodico)
    #texto-accion:has(.consecuencias-evento) {
        min-height: 150px;
        height: auto;
        max-height: 210px;

        padding: 20px 35px;

        justify-content: center;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 3. Fotografías grandes con 3 o más personajes */
    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos {
        gap: 18px;
        padding: 0 10px;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos
    .participante-accion {
        flex: 0 0 170px;
        max-width: 170px;
        min-width: 0;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos
    .avatar-accion {
        width: 170px;
        height: 170px;
        min-width: 170px;
        min-height: 170px;
        font-size: 48px;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos
    .nombre-participante {
        font-size: 16px;
    }
}

/* =========================================================
   DESKTOP — PERIÓDICO MÁS GRANDE Y LEGIBLE
   ========================================================= */

@media (min-width: 769px) {

    /* Nombre del periódico */
    #log-acciones.modo-periodico::before {
        font-size: calc(
            var(--tamano-nombre-periodico, 42px) * 1.15
        ) !important;
    }

    /* Titular principal */
    #log-acciones.modo-periodico
    h2.periodico-titular {
        font-size: 32px !important;
        line-height: 1.08 !important;
        max-width: 780px;
        height: auto;
        min-height: 90px;
        overflow: visible;
    }

    /* Titulares largos */
    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-largo {
        font-size: 28px !important;
    }

    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-muy-largo {
        font-size: 24px !important;
    }

    /* Fotografía */
#log-acciones.modo-periodico
.periodico-foto {
    width: 320px;
    height: 235px;
}

/* Pie de fotografía */
#log-acciones.modo-periodico
.periodico-pie-foto {
    width: 320px;
    font-size: 10px;
    line-height: 1.2;
}

    /* Autor */
    #log-acciones.modo-periodico
    .periodico-autor {
        max-width: 720px;
        font-size: 15px;
        margin-top: 14px;
        margin-bottom: 8px;
    }

    /* Cuerpo de noticia */
    #log-acciones.modo-periodico
    .periodico-cuerpo {
        max-width: 720px;
        font-size: 23px;
        line-height: 1.4;
    }

    /* Botón Solo muertes / Todos los eventos */
    #filtro-eventos-alternar {
        left: auto;
        right: 24px;
        bottom: 24px;
        transform: none;

        min-height: 48px;
        padding: 0 20px;

        font-size: 15px;
        font-weight: 700;
    }
}

/* =========================================================
   DESKTOP — TITULAR Y POSICIÓN DEL FILTRO
   ========================================================= */

@media (min-width: 769px) {

    /* Titular: mayor fuente y mayor área horizontal */
    #log-acciones.modo-periodico
    h2.periodico-titular {
        width: 94% !important;
        max-width: 950px !important;
        min-height: 105px !important;

        font-size: 38px !important;
        line-height: 1.12 !important;

        margin-left: auto;
        margin-right: auto;
    }

    /* Mantener proporciones en titulares largos */
    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-largo {
        font-size: 33px !important;
    }

    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-muy-largo {
        font-size: 28px !important;
    }

    /* DESKTOP — Filtro alineado con la minificha */
#filtro-eventos-alternar {
    left: auto;
    right: 24px;
    bottom: 8vh;
    transform: none;

    width: 155px;
    min-height: 46px;
    padding: 0 12px;

    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
}
}

/* =========================================================
   DESKTOP — NAVEGACIÓN DEL PERIÓDICO
   ========================================================= */

@media (min-width: 769px) {

    #log-acciones.modo-periodico
    #navegacion-acciones button {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;

        font-size: 30px !important;
        padding: 0 !important;
    }

    #log-acciones.modo-periodico
    #contador-acciones {
        font-size: 22px !important;
        min-width: 75px;
        text-align: center;
    }
}
/* ==========================================
   DESKTOP — VENTANA DEL GANADOR SIN SCROLL
   ========================================== */

@media (min-width: 769px) {

    #final-partida {
        width: min(620px, calc(100vw - 60px));
        padding: 12px 34px;
        max-height: 96vh;
        overflow: hidden;
        gap: 0;
    }

    #final-partida .final-partida-trofeo {
        font-size: 38px;
        margin-bottom: 4px;
    }

    #final-partida .final-partida-titulo {
        font-size: 30px;
        margin-bottom: 12px;
    }

    #final-partida .final-partida-foto {
    width: clamp(110px, 19vh, 160px);
    height: clamp(110px, 19vh, 160px);
    flex-shrink: 0;
}

    #final-partida .final-partida-nombre {
        font-size: 34px;
        margin-top: 12px;
    }

    #final-partida .final-partida-dia {
        font-size: 17px;
        margin-top: 5px;
    }

    #final-partida .final-partida-ranking {
        font-size: 18px;
        margin-top: 10px;
    }

    #final-partida .final-partida-cuota {
        font-size: 21px;
        margin-top: 5px;
    }

    #final-partida .final-partida-hazana {
        margin-top: 12px;
        padding-top: 10px;
    }

    #final-partida .final-partida-hazana-titulo {
        font-size: 19px;
    }

    #final-partida .final-partida-hazana-texto {
        font-size: 16px;
        line-height: 1.35;
    }
}

/* ==========================================
   DESKTOP — EVENTOS DE UN SOLO PERSONAJE
   ========================================== */

@media (min-width: 769px) {

    #log-acciones:not(.modo-periodico)
    #participantes-accion:has(> .participante-accion:only-child)
    .avatar-accion {
        width: 210px !important;
        height: 210px !important;
        min-width: 210px !important;
        min-height: 210px !important;
        flex-shrink: 0;
    }

}

/* ==========================================
   DESKTOP — EVENTOS DE 2 Y 3 PERSONAJES
   ========================================== */

@media (min-width: 769px) {

    /* Dos participantes */
    #log-acciones:not(.modo-periodico)
    #participantes-accion:has(> .participante-accion:nth-child(2):last-child)
    .participante-accion {
        flex: 0 0 240px !important;
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    /* Tres participantes */
    #log-acciones:not(.modo-periodico)
    #participantes-accion:has(> .participante-accion:nth-child(3):last-child)
    .participante-accion {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }

    /* Fotografías de dos participantes */
    #log-acciones:not(.modo-periodico)
    #participantes-accion:has(> .participante-accion:nth-child(2):last-child)
    .avatar-accion {
        width: 240px !important;
        height: 240px !important;
        min-width: 240px !important;
        min-height: 240px !important;
    }

    /* Fotografías de tres participantes */
    #log-acciones:not(.modo-periodico)
    #participantes-accion:has(> .participante-accion:nth-child(3):last-child)
    .avatar-accion {
        width: 220px !important;
        height: 220px !important;
        min-width: 220px !important;
        min-height: 220px !important;
    }
}

/* ==========================================
   PORTADA PRINCIPAL — DESKTOP Y MÓVIL
========================================== */

#portada-principal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 75%, #46271e 0%, transparent 48%),
        linear-gradient(180deg, #0c111b 0%, #161d27 55%, #100e10 100%);
    color: #fff;
    isolation: isolate;
}

#portada-principal.portada-oculta {
    display: none;
}

.portada-atmosfera {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(transparent 80%, rgba(0,0,0,.65)),
        repeating-linear-gradient(
            90deg,
            transparent 0 85px,
            rgba(0,0,0,.07) 86px 87px
        );
    opacity: .65;
}

.portada-contenido {
    position: relative;
    z-index: 1;
    width: min(600px, calc(100% - 36px));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 18px;
}

.portada-etiqueta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #c5a99a;
    margin-bottom: 20px;
}

.portada-logo {
    font-size: clamp(46px, 9vw, 92px);
    line-height: 1;
    letter-spacing: 3px;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 8px 35px #000;
}

.portada-linea {
    width: 90px;
    height: 3px;
    background: #d64c3c;
    margin: 27px 0;
}

.portada-descripcion {
    font-size: clamp(17px, 2.5vw, 23px);
    line-height: 1.5;
    max-width: 470px;
    color: #d5d5d5;
    margin: 0 0 35px;
}

#portada-jugar {
    width: min(370px, 100%);
    min-height: 72px;
    border: 1px solid #f16b56;
    border-radius: 12px;
    background: linear-gradient(180deg, #e05b45, #a92e27);
    color: white;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 10px 35px rgba(181,48,36,.35);
    transition: transform .15s, filter .15s;
}

#portada-jugar:hover {
    transform: translateY(-3px);
    filter: brightness(1.12);
}

#portada-jugar:active {
    transform: scale(.98);
}

.portada-opciones {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.portada-opciones button {
    background: transparent;
    border: none;
    color: #9a9da5;
    font-size: 15px;
    padding: 8px;
}

.portada-opciones button:disabled {
    cursor: default;
    opacity: .55;
}

.portada-pie {
    position: absolute;
    bottom: 22px;
    color: #686c75;
    font-size: 11px;
    letter-spacing: 4px;
}

@media (max-width: 700px) {
    .portada-contenido {
        padding: 24px 12px;
    }

    .portada-etiqueta {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .portada-logo {
        font-size: clamp(39px, 11vw, 65px);
        letter-spacing: 1px;
    }

    #portada-jugar {
        min-height: 64px;
        font-size: 23px;
    }

    .portada-opciones {
        gap: 12px;
    }
}

/* ==========================================
   RUINITO — IDENTIDAD DE PORTADA
========================================== */

#portada-principal {
    background:
        radial-gradient(
            ellipse at 50% 115%,
            rgba(234, 111, 64, 0.23),
            transparent 60%
        ),
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 205, 111, 0.08),
            transparent 35%
        ),
        #17191f;
}

.portada-logo {
    font-family: Arial, sans-serif;
    font-size: clamp(60px, 12vw, 118px);
    font-weight: 900;
    letter-spacing: -5px;
    color: #fff2db;
    text-shadow:
        0 7px 0 #753f37,
        0 17px 35px rgba(0, 0, 0, 0.5);
    transform: rotate(-2deg);
}

.portada-logo-punto {
    color: #f57b50;
}

.portada-etiqueta {
    color: #f3bb83;
    letter-spacing: 3px;
}

.portada-linea {
    width: 65px;
    height: 5px;
    border-radius: 10px;
    background: #f57b50;
}

.portada-descripcion {
    color: #ded8cf;
    max-width: 490px;
}

#portada-jugar {
    background: #f47b4f;
    border: 3px solid #ffae75;
    border-radius: 15px;
    color: #241b1b;
    box-shadow:
        0 7px 0 #963e2c,
        0 18px 35px rgba(0, 0, 0, 0.35);
}

#portada-jugar:hover {
    filter: brightness(1.08);
    transform: translateY(-3px);
}

.portada-opciones button {
    color: #e5d4c6;
    font-weight: 700;
}

@media (max-width: 700px) {
    .portada-logo {
        font-size: clamp(48px, 13vw, 78px);
        letter-spacing: -3px;
    }
}



/* ==========================================
   RUINITO — EXPERIMENTO PORTADA NEÓN
   ========================================== */

#portada-principal.portada-neon {
    background:
        radial-gradient(ellipse at 50% 78%,
            rgba(255, 48, 83, .26), transparent 53%),
        radial-gradient(ellipse at 50% 15%,
            rgba(123, 36, 105, .22), transparent 55%),
        #101015;
}

#portada-principal.portada-neon .portada-atmosfera {
    opacity: .85;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 85px,
            rgba(255, 80, 105, .035) 86px 87px
        ),
        linear-gradient(transparent 70%, rgba(0,0,0,.45));
}

#portada-principal.portada-neon .portada-etiqueta {
    color: #ff7894;
    text-shadow: 0 0 14px rgba(255, 65, 105, .65);
}

#portada-principal.portada-neon .portada-logo {
    color: #fff2e6;
    text-shadow:
        0 7px 0 #9b314d,
        0 0 22px rgba(255, 71, 108, .48),
        0 0 65px rgba(255, 71, 108, .22),
        0 18px 35px rgba(0,0,0,.65);
}

#portada-principal.portada-neon .portada-logo-punto {
    color: #ff476c;
    text-shadow:
        0 0 12px #ff476c,
        0 0 35px rgba(255, 71, 108, .75);
}

#portada-principal.portada-neon .portada-linea {
    background: #ff476c;
    box-shadow:
        0 0 12px rgba(255, 71, 108, .9),
        0 0 32px rgba(255, 71, 108, .4);
}

#portada-principal.portada-neon .portada-descripcion {
    color: #fff0e4;
}

#portada-principal.portada-neon #portada-jugar {
    background: linear-gradient(180deg, #ff8269, #ff4969);
    border: 3px solid #ffac91;
    color: #24151b;
    box-shadow:
        0 7px 0 #8d2942,
        0 0 24px rgba(255, 65, 105, .5),
        0 0 65px rgba(255, 65, 105, .2);
}

#portada-principal.portada-neon #portada-jugar:hover {
    filter: brightness(1.12);
    box-shadow:
        0 7px 0 #8d2942,
        0 0 34px rgba(255, 65, 105, .75),
        0 0 80px rgba(255, 65, 105, .3);
}

#portada-principal.portada-neon .portada-opciones button {
    color: #e5c9d1;
}


/* ==========================================
   RUINITO — PORTADA NEÓN V2
   ========================================== */

#portada-principal.portada-neon {
    background:
        radial-gradient(
            ellipse at 50% 72%,
            rgba(255, 52, 91, 0.17),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 50% 27%,
            rgba(255, 52, 91, 0.12),
            transparent 45%
        ),
        #101015;
}

#portada-principal.portada-neon .portada-logo {
    text-shadow:
        0 8px 0 #982b49,
        0 0 12px rgba(255, 64, 103, 0.65),
        0 0 38px rgba(255, 64, 103, 0.30),
        0 18px 38px rgba(0, 0, 0, 0.75);
}

#portada-principal.portada-neon #portada-jugar {
    background: #ff6079;
    border: 4px solid #ffad96;
    border-radius: 16px;

    box-shadow:
        0 8px 0 #8e2945,
        0 0 18px rgba(255, 64, 103, 0.65),
        0 0 48px rgba(255, 64, 103, 0.28),
        0 20px 45px rgba(0, 0, 0, 0.45);
}

#portada-principal.portada-neon .portada-linea {
    box-shadow:
        0 0 8px #ff476c,
        0 0 22px rgba(255, 71, 108, 0.65);
}


/* ==========================================
   RUINITO — NEÓN V3: BRILLO CONTROLADO
   ========================================== */

#portada-principal.portada-neon .portada-logo {
    text-shadow:
        0 8px 0 #982b49,
        0 0 10px rgba(255, 64, 103, 0.35),
        0 0 28px rgba(255, 64, 103, 0.16),
        0 18px 38px rgba(0, 0, 0, 0.75);
}

#portada-principal.portada-neon #portada-jugar {
    box-shadow:
        0 8px 0 #8e2945,
        0 0 14px rgba(255, 64, 103, 0.32),
        0 0 38px rgba(255, 64, 103, 0.13),
        0 20px 45px rgba(0, 0, 0, 0.45);
}

#portada-principal.portada-neon .portada-linea {
    box-shadow:
        0 0 7px rgba(255, 71, 108, 0.55),
        0 0 18px rgba(255, 71, 108, 0.25);
}

#portada-principal.portada-neon .portada-etiqueta {
    text-shadow: 0 0 9px rgba(255, 65, 105, 0.3);
}


/* ==========================================
   RUINITO — APUESTAS RETRO 3D (PRUEBA)
   ========================================== */

/* Botón principal COMENZAR */

#apuestas-iniciales.apuestas-retro-prueba #continuar-apuestas:not(:disabled) {
    appearance: none;
    background: #ff6079;
    color: #24151b;
    border: 3px solid #ffad96;
    border-radius: 13px;

    font-weight: 900;
    letter-spacing: .4px;

    box-shadow:
        0 5px 0 #8e2945,
        0 9px 20px rgba(0, 0, 0, .3),
        0 0 12px rgba(255, 64, 103, .12);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

#apuestas-iniciales.apuestas-retro-prueba #continuar-apuestas:not(:disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

#apuestas-iniciales.apuestas-retro-prueba #continuar-apuestas:not(:disabled):active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #8e2945,
        0 3px 8px rgba(0, 0, 0, .25);
}

/* Botones + y -: relieve compacto */

#apuestas-iniciales.apuestas-retro-prueba .boton-apuesta:not(:disabled) {
    appearance: none;
    background: #fff0e4;
    color: #24151b;
    border: 2px solid #ffffff;
    border-radius: 10px;

    box-shadow:
        0 4px 0 #9c827c,
        0 6px 12px rgba(0, 0, 0, .25);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

#apuestas-iniciales.apuestas-retro-prueba .boton-apuesta:not(:disabled):hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#apuestas-iniciales.apuestas-retro-prueba .boton-apuesta:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #9c827c;
}

/* Contenedor de apuestas: negro más profundo */

#suministros-iniciales:has(
    #apuestas-iniciales.apuestas-retro-prueba:not(.oculto)
) {
    background: #202026;

    border: 2px solid #86505e;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .7),
        0 0 16px rgba(255, 96, 121, .09);
}

/* Cabecera y acentos de marca */

#apuestas-iniciales.apuestas-retro-prueba .apuestas-icono {
    filter: drop-shadow(0 0 7px rgba(255, 64, 103, .35));
}

#apuestas-iniciales.apuestas-retro-prueba .resumen-apuestas {
    background: #302b32;
    border: 1px solid #493c44;
}


/* RUINITO — ACENTO DE MARCA EN APUESTAS */

#apuestas-iniciales.apuestas-retro-prueba .apuestas-titulo {
    position: relative;
    padding-bottom: 12px;
}

#apuestas-iniciales.apuestas-retro-prueba .apuestas-titulo::after {
    content: none;
}


/* ==========================================
   RUINITO — PRUEBA SUMINISTROS INICIALES
   ========================================== */

/* Ventana principal */
#suministros-iniciales.suministros-ruinito-prueba:not(:has(#apuestas-iniciales:not(.oculto))) {
    background: #202026;
    border: 2px solid #86505e;
    border-radius: 18px;
    color: #fff0e4;

    box-shadow:
    0 18px 55px rgba(0, 0, 0, .7),
    0 0 16px rgba(255, 96, 121, .09);
}

/* Encabezado */
.suministros-ruinito-prueba .suministros-icono {
    filter: drop-shadow(0 0 9px rgba(255, 96, 121, .22));
}

.suministros-ruinito-prueba .suministros-encabezado h2 {
    color: #fff0e4;
}

.suministros-ruinito-prueba .suministros-encabezado p {
    color: #bdb7bd;
}

/* Línea de identidad */
.suministros-ruinito-prueba .suministros-encabezado::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    margin: 0 auto 18px;
    border-radius: 10px;
    background: #ff6079;
    box-shadow: 0 0 10px rgba(255, 96, 121, .3);
}

/* Tabla: cambios muy discretos */
.suministros-ruinito-prueba .cabecera-suministros {
    color: #fff0e4;
}

.suministros-ruinito-prueba #lista-suministros-iniciales {
    border-color: #494047;
}

.suministros-ruinito-prueba .fila-suministros {
    border-bottom-color: #39343c;
}

/* Botón principal 3D */
.suministros-ruinito-prueba #continuar-suministros:not(:disabled) {
    appearance: none;
    -webkit-appearance: none;

    background: #ff6079;
    color: #24151b;
    border: 3px solid #ffad96;
    border-radius: 13px;

    font-weight: 900;

    box-shadow:
        0 6px 0 #8e2945,
        0 10px 22px rgba(0, 0, 0, .3);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

.suministros-ruinito-prueba #continuar-suministros:not(:disabled):hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
}

.suministros-ruinito-prueba #continuar-suministros:not(:disabled):active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #8e2945;
}


/* ==========================================
   RUINITO — PRUEBA PESTAÑAS RANKING / MAPA
   ========================================== */

#selector-vista-principal.pestanas-ruinito-prueba {
    gap: 12px;
    margin-bottom: 17px;
}

/* Estilo general: pestaña inactiva */
.pestanas-ruinito-prueba .boton-vista-principal {
    appearance: none;
    -webkit-appearance: none;

    min-width: 0;
    padding: 13px 10px;

    background: #29272e;
    color: #fff0e4;

    border: 2px solid #86505e;
    border-radius: 12px;

    box-shadow:
        0 5px 0 #151319,
        0 8px 15px rgba(0, 0, 0, .3);

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .12s ease,
        box-shadow .12s ease;
}

/* Pestaña activa */
.pestanas-ruinito-prueba .boton-vista-principal.activo {
    background: #ff6079;
    color: #24151b;

    border: 2px solid #ffad96;

    box-shadow:
        0 5px 0 #8e2945,
        0 8px 18px rgba(255, 96, 121, .13);
}

/* Interacciones */
@media (hover: hover) {
    .pestanas-ruinito-prueba .boton-vista-principal:hover {
        filter: brightness(1.08);
        transform: translateY(-2px);
    }
}

.pestanas-ruinito-prueba .boton-vista-principal:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #151319;
}

/* Adaptación móvil */
@media (max-width: 700px) {
    #selector-vista-principal.pestanas-ruinito-prueba {
        gap: 8px;
        margin-bottom: 14px;
    }

    .pestanas-ruinito-prueba .boton-vista-principal {
        padding: 11px 6px;
        font-size: 12px;
        border-radius: 10px;
    }
}


/* ==========================================
   RUINITO — PRUEBA MARCOS RANKING Y MAPA
   ========================================== */

#vista-principal.paneles-ruinito-prueba #ranking-supervivencia,
#vista-principal.paneles-ruinito-prueba #mapa {
    background-color: #202026;

    border: 2px solid #86505e;
    border-radius: 14px;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .35),
        0 0 16px rgba(255, 96, 121, .09);
}

/* RUINITO — ELIMINAR DESTELLO AZUL EN PESTAÑAS */

.pestanas-ruinito-prueba .boton-vista-principal {
    -webkit-tap-highlight-color: transparent;
}

.pestanas-ruinito-prueba .boton-vista-principal:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================
   RUINITO — PRUEBA PANEL DE INFORMACIÓN
   ========================================== */

#informacion-mapa.informacion-ruinito-prueba {
    background: #202026;

    border: 2px solid #86505e;
    border-radius: 14px;

    color: #fff0e4;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, .35),
        0 0 16px rgba(255, 96, 121, .09);
}

/* Separación entre fallecidos y ficha */
#informacion-mapa.informacion-ruinito-prueba
#registro-muertos {
    border-color: #514047;
}

/* Separadores de datos de personajes */
#informacion-mapa.informacion-ruinito-prueba
.ficha-dato {
    border-bottom-color: #514047;
}

/* RUINITO — EVITAR DESBORDAMIENTO HORIZONTAL EN APUESTAS */

#suministros-iniciales:has(
    #apuestas-iniciales.apuestas-retro-prueba:not(.oculto)
) {
    overflow-x: hidden;
}

/* RUINITO — INICIO DESTACADO SOLO DESKTOP */

#inicio-destacado-ruinito {
    display: none;
}

@media (min-width: 701px) {
    #inicio-destacado-ruinito {
        position: fixed;
        inset: 0;
        z-index: 9990;
        display: grid;
        place-items: center;
        background: rgba(0, 0, 0, .72);
    }

    .inicio-destacado-contenido {
        width: min(440px, calc(100vw - 48px));
        text-align: center;
    }

    .inicio-destacado-contenido h2 {
    color: #fff0e4;
    font-size: clamp(20px, 2vw, 26px);
    margin: 0 0 24px;
    font-weight: 700;
    line-height: 1.35;
}

    #boton-inicio-destacado {
        width: 100%;
        padding: 22px;
        background: #ff6079;
        border: 3px solid #ffad96;
        border-radius: 14px;
        color: #24151b;
        font-size: 25px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 7px 0 #8e2945;
    }

    #boton-inicio-destacado:hover {
        filter: brightness(1.08);
    }

    #boton-inicio-destacado:active {
        transform: translateY(5px);
        box-shadow: 0 2px 0 #8e2945;
    }
}

/* Ocultar el inicio destacado hasta terminar apuestas */
#inicio-destacado-ruinito.oculto {
    display: none;
}

/* RUINITO — FOTO EN MINIFICHA DE ESCRITORIO */

@media (min-width: 701px) {
    .ficha-evento-avatar .foto-minificha-desktop {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        border-radius: 50%;
    }

    .ficha-evento-avatar:has(.foto-minificha-desktop) {
        overflow: hidden;
    }
}

/* ==========================================
   RUINITO — BOTONES DEL PANEL PRINCIPAL
   PRUEBA REVERSIBLE
========================================== */

/* ACCIÓN PRINCIPAL */
#controles-desktop #siguiente-dia {
    appearance: none;
    -webkit-appearance: none;

    background: #ff6079;
    color: #24151b;

    border: 3px solid #ffad96;
    border-radius: 12px;

    font-weight: 900;

    box-shadow:
        0 5px 0 #8e2945,
        0 8px 18px rgba(0, 0, 0, .25);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

/* VER EVENTOS */
#controles-desktop #abrir-log {
    appearance: none;
    -webkit-appearance: none;

    background: #fff0e4;
    color: #24151b;

    border: 3px solid #ffffff;
    border-radius: 12px;

    font-weight: 800;

    box-shadow:
        0 5px 0 #a58e8b,
        0 8px 18px rgba(0, 0, 0, .2);

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

/* INTERACCIÓN */
#controles-desktop #siguiente-dia:not(:disabled):hover,
#controles-desktop #abrir-log:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

#controles-desktop #siguiente-dia:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #8e2945;
}

#controles-desktop #abrir-log:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #a58e8b;
}

/* BOTÓN DE APOYO */
.boton-enviar-apoyo {
    background: #343438;
    color: #fff0e4;
    border: 1px solid #60545b;
    border-radius: 10px;
    font-weight: 800;
}

.boton-enviar-apoyo:not(:disabled):hover {
    background: #414047;
}

/* ==========================================
   RUINITO — SCROLLBARS DEL RANKING
   ========================================== */

/* Firefox */
#ranking-supervivencia {
    scrollbar-width: thin;
    scrollbar-color: #86505e #202026;
}

/* Chrome, Safari y Edge */
#ranking-supervivencia::-webkit-scrollbar {
    width: 7px;
}

#ranking-supervivencia::-webkit-scrollbar-track {
    background: #202026;
    border-radius: 10px;
}

#ranking-supervivencia::-webkit-scrollbar-thumb {
    background: #86505e;
    border-radius: 10px;
}

#ranking-supervivencia::-webkit-scrollbar-thumb:hover {
    background: #b16a7d;
}

/* RUINITO — ACENTO ROSA CORRECTO EN APUESTAS */

#apuestas-iniciales.apuestas-retro-prueba #titulo-apuestas {
    position: relative;
}

#apuestas-iniciales.apuestas-retro-prueba #titulo-apuestas::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -8px;

    width: 68px;
    height: 4px;

    border-radius: 10px;
    background: #ff6079;
    box-shadow: 0 0 10px rgba(255, 96, 121, .3);
}

/* ==========================================
   RUINITO — INICIO ESPECIAL MÓVIL
   ========================================== */

#inicio-movil-ruinito {
    display: none;
}

@media (max-width: 700px) {

    /* Ocultar controles normales antes de iniciar */
    body.ruinito-esperando-inicio-movil #abrir-log,
    body.ruinito-esperando-inicio-movil #siguiente-dia {
        display: none !important;
    }

    /* Contenedor del inicio */
    body.ruinito-esperando-inicio-movil
#inicio-movil-ruinito:not(.oculto) {
    display: flex;
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    z-index: 1;

    width: calc(100% - 32px);
    margin: 16px auto 22px;

    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    /* Pregunta */
    #titulo-inicio-movil {
    margin: 0;
    color: #fff0e4;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

    /* Botón principal */
    #boton-inicio-movil {
        width: 100%;
        min-height: 52px;
        padding: 9px 16px;

        background: #ff6079;
        color: #24151b;

        border: 3px solid #ffad96;
        border-radius: 14px;

        font-size: 20px;
        font-weight: 900;
        cursor: pointer;

        box-shadow: 0 7px 0 #8e2945;

        animation: ruinito-rebote-inicio 6s ease-in-out 3s infinite;
    }

    #boton-inicio-movil:active {
        animation: none;
        transform: translateY(4px);
        box-shadow: 0 3px 0 #8e2945;
    }
}

/* Pequeño movimiento ocasional */
@keyframes ruinito-rebote-inicio {
    0%, 88%, 100% {
        transform: translateY(0);
    }

    92% {
        transform: translateY(-4px);
    }

    96% {
        transform: translateY(0);
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    #boton-inicio-movil {
        animation: none;
    }
}

/* ==========================================
   RUINITO — INICIO MÓVIL COMPACTO
   ========================================== */

@media (max-width: 700px) {

    /* Reservar espacio para iniciar */
    body.ruinito-esperando-inicio-movil
    #ranking-supervivencia {
        height: 62dvh !important;
        max-height: 62dvh !important;
        min-height: 0 !important;
        overflow-y: auto;
    }

    /* Pregunta y botón más compactos */
    body.ruinito-esperando-inicio-movil
    #inicio-movil-ruinito:not(.oculto) {
        margin: 10px auto 12px;
        gap: 8px;
    }

    body.ruinito-esperando-inicio-movil
    #titulo-inicio-movil {
        font-size: 15px;
        line-height: 1.2;
    }

    body.ruinito-esperando-inicio-movil
    #boton-inicio-movil {
        min-height: 48px;
        padding: 8px 14px;
        font-size: 19px;
    }
}

/* RUINITO — ELIMINAR DESTELLO AZUL EN APUESTAS */

#apuestas-iniciales button {
    -webkit-tap-highlight-color: transparent;
}

/* RUINITO — ELIMINAR DESTELLO AZUL EN VER EVENTOS */

#abrir-log {
    -webkit-tap-highlight-color: transparent;
}

/* RUINITO — BLOQUEAR SCROLL EXTERIOR EN INICIO MÓVIL */

@media (max-width: 700px) {

    html:has(body.ruinito-esperando-inicio-movil) {
        overflow: hidden !important;
    }

    body.ruinito-esperando-inicio-movil {
        height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

}

/* RUINITO — NAVEGACIÓN DE EVENTOS, MÓVIL Y ESCRITORIO */

#log-acciones:not(.modo-periodico) #navegacion-acciones button {
    width: 54px;
    height: 48px;

    background: #29262d;
    color: #ff6079;

    border: 3px solid #ff6079;
    border-radius: 12px;

    font-size: 22px;
    font-weight: 900;

    box-shadow: 0 5px 0 #542c39;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#log-acciones:not(.modo-periodico)
#navegacion-acciones button:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #542c39;
}

#log-acciones:not(.modo-periodico)
#navegacion-acciones button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* RUINITO — CONTADOR DE EVENTOS EN ESCRITORIO Y MÓVIL */

#log-acciones #contador-acciones {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 78px;
    min-height: 42px;
    padding: 4px 12px;

    background: #29262d;
    color: #fff0e4;

    border: 2px solid #86505e;
    border-radius: 12px;

    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ==========================================
   RUINITO — NAVEGACIÓN COMPACTA EN MÓVIL
========================================== */

@media (max-width: 700px) {

    /* Flechas anterior y siguiente */
    #log-acciones:not(.modo-periodico)
    #navegacion-acciones button {
        width: 42px;
        height: 40px;
        padding: 0;

        font-size: 18px;

        border-width: 2px;
        border-radius: 10px;

        box-shadow: 0 4px 0 #542c39;
    }

    /* Contador de eventos */
    #log-acciones #contador-acciones {
        min-width: 65px;
        min-height: 36px;
        padding: 3px 9px;

        font-size: 15px;
        border-width: 2px;
        border-radius: 9px;
    }

    /* Separación entre controles */
    #navegacion-acciones {
        gap: 12px;
    }

    /* Efecto al presionar */
    #log-acciones:not(.modo-periodico)
    #navegacion-acciones button:active:not(:disabled) {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #542c39;
    }
}

/* ==========================================
   RUINITO — NAVEGACIÓN DEL PERIÓDICO
========================================== */

/* Flechas */
#log-acciones.modo-periodico #navegacion-acciones button {
    width: 42px !important;
    height: 40px !important;
    padding: 0 !important;

    background: #29262d !important;
    color: #ff6079 !important;

    border: 2px solid #ff6079 !important;
    border-radius: 10px !important;

    font-size: 18px !important;
    font-weight: 900 !important;

    box-shadow: 0 4px 0 #542c39 !important;
    -webkit-tap-highlight-color: transparent;
}

/* Contador */
#log-acciones.modo-periodico #contador-acciones {
    display: flex !important;
    align-items: center;
    justify-content: center;

    min-width: 65px !important;
    min-height: 36px !important;
    padding: 3px 9px !important;

    background: #29262d !important;
    color: #fff0e4 !important;

    border: 2px solid #86505e !important;
    border-radius: 9px !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
}

/* Separación */
#log-acciones.modo-periodico #navegacion-acciones {
    gap: 12px;
}

/* Efecto 3D al presionar */
#log-acciones.modo-periodico
#navegacion-acciones button:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #542c39 !important;
}

/* Botones deshabilitados */
#log-acciones.modo-periodico
#navegacion-acciones button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ==========================================
   RUINITO — PERIÓDICO: NAVEGACIÓN ESCRITORIO
========================================== */

@media (min-width: 701px) {

    #log-acciones.modo-periodico #navegacion-acciones {
        gap: 16px !important;
        align-items: center;
        justify-content: center;
    }

    #log-acciones.modo-periodico
    #navegacion-acciones button {
        width: 54px !important;
        height: 48px !important;
        padding: 0 !important;

        background: #29262d !important;
        color: #ff6079 !important;

        border: 3px solid #ff6079 !important;
        border-radius: 12px !important;

        font-size: 22px !important;
        font-weight: 900 !important;

        box-shadow: 0 5px 0 #542c39 !important;
    }

    #log-acciones.modo-periodico #contador-acciones {
        min-width: 78px !important;
        min-height: 42px !important;
        padding: 4px 12px !important;

        background: #29262d !important;
        color: #fff0e4 !important;

        border: 2px solid #86505e !important;
        border-radius: 12px !important;

        font-size: 18px !important;
        font-weight: 800 !important;
    }

    #log-acciones.modo-periodico
    #navegacion-acciones button:active:not(:disabled) {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #542c39 !important;
    }
}

/* ==========================================
   RUINITO — IGUALAR NAVEGACIÓN DEL PERIÓDICO
   CON EVENTOS NORMALES (ESCRITORIO)
========================================== */

@media (min-width: 701px) {

    #log-acciones.modo-periodico #navegacion-acciones {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
    }

    #log-acciones.modo-periodico #navegacion-acciones button {
        box-sizing: border-box !important;

        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #29262d !important;
        color: #ff6079 !important;

        border: 3px solid #ff6079 !important;
        border-radius: 12px !important;

        font-family: Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        box-shadow: 0 5px 0 #542c39 !important;
    }

    #log-acciones.modo-periodico #contador-acciones {
        box-sizing: border-box !important;

        min-width: 78px !important;
        min-height: 42px !important;

        padding: 4px 12px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #29262d !important;
        color: #fff0e4 !important;

        border: 2px solid #86505e !important;
        border-radius: 12px !important;

        font-family: Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        font-style: normal !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums !important;
    }
}

/* RUINITO — AJUSTES DEL PERIÓDICO SOLO DESKTOP */
@media (min-width: 701px) {

    #log-acciones.modo-periodico #navegacion-acciones {
        gap: 25px !important;
        bottom: 48px !important;
    }

}

/* RUINITO — FONDO CARBÓN CON TINTE DE CATEGORÍA */

#log-acciones:not(.modo-periodico) {
    --tinte-evento: #202026;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--tinte-evento) 12%, #202026) 0%,
            color-mix(in srgb, var(--tinte-evento) 6%, #202026) 100%
        ) !important;
}

#log-acciones.evento-busqueda {
    --tinte-evento: #3da9ff;
}

#log-acciones.evento-hallazgo {
    --tinte-evento: #38e0d0;
}

#log-acciones.evento-infortunio {
    --tinte-evento: #ff9d3d;
}

#log-acciones.evento-enfrentamiento {
    --tinte-evento: #ff525d;
}

#log-acciones.evento-interaccion {
    --tinte-evento: #8d8cff;
}

#log-acciones.evento-romance,
#log-acciones.evento-enamoramiento {
    --tinte-evento: #ff62b0;
}

#log-acciones.evento-apoyo {
    --tinte-evento: #ffd54f;
}

#log-acciones.evento-arma-usada {
    --tinte-evento: #f79400;
}

/* RUINITO — TINTES DE CATEGORÍAS FALTANTES */

#log-acciones.evento-curacion {
    --tinte-evento: #4cffc9;
}

#log-acciones.evento-abundancia {
    --tinte-evento: #46d26e;
}

#log-acciones.evento-peligro {
    --tinte-evento: #ff4646;
}

#log-acciones.evento-social {
    --tinte-evento: #41afff;
}

#log-acciones.evento-enamoramiento {
    --tinte-evento: #ff46b4;
}

/* ==========================================
   RUINITO — BOTONES INFERIORES MINIMALISTAS
   ========================================== */

/* VER EVENTOS — botón secundario */
#abrir-log {
    background: #302d34 !important;
    color: #fff0e4 !important;

    border: 1px solid #86505e !important;
    border-radius: 12px !important;

    box-shadow:
    0 3px 0 #40313b,
    0 5px 8px rgba(0, 0, 0, 0.35) !important;

    font-weight: 700 !important;
}

/* SIGUIENTE DÍA — botón principal */
#siguiente-dia {
    background: #ff6079 !important;
    color: #24151b !important;

    border: 1px solid #ff6079 !important;
    border-radius: 12px !important;

    box-shadow: 0 3px 0 #8e2945 !important;

    font-weight: 700 !important;
}

/* Efecto al presionar */
#abrir-log:active:not(:disabled),
#siguiente-dia:active:not(:disabled) {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 #17151a !important;
}

/* ==========================================
   RUINITO — NAVEGACIÓN NEUTRA DE EVENTOS
   No afecta al periódico
   ========================================== */

/* Flechas en reposo */
#log-acciones:not(.modo-periodico)
#navegacion-acciones button {
    background: #302d34 !important;
    color: #ff6079 !important;
    border-color: #86505e !important;
    box-shadow: none !important;
}

/* Rosa al pasar el cursor (solo dispositivos con hover) */
@media (hover: hover) {
    #log-acciones:not(.modo-periodico)
    #navegacion-acciones button:hover:not(:disabled) {
        color: #ff6079 !important;
        border-color: #ff6079 !important;
    }
}

/* Rosa al presionar */
#log-acciones:not(.modo-periodico)
#navegacion-acciones button:active:not(:disabled) {
    color: #ff6079 !important;
    border-color: #ff6079 !important;
    transform: translateY(2px);
    box-shadow: none !important;
}

/* ==========================================
   RUINITO — NAVEGACIÓN DEL PERIÓDICO
   Solo colores y relieve
   ========================================== */

#log-acciones.modo-periodico
#navegacion-acciones button {
    background: #302d34 !important;
    color: #ff6079 !important;
    border-color: #86505e !important;
    box-shadow: none !important;
}

/* Cápsula numérica */
#log-acciones.modo-periodico
#contador-acciones {
    background: #302d34 !important;
    color: #fff0e4 !important;
    border-color: #86505e !important;
    box-shadow: none !important;
}

/* Interacción */
@media (hover: hover) {
    #log-acciones.modo-periodico
    #navegacion-acciones button:hover:not(:disabled) {
        border-color: #ff6079 !important;
    }
}

#log-acciones.modo-periodico
#navegacion-acciones button:active:not(:disabled) {
    background: #302d34 !important;
    border-color: #ff6079 !important;
    box-shadow: none !important;
}

/* RUINITO — TIPOGRAFÍA CONTADOR PERIÓDICO MÓVIL */
@media (max-width: 700px) {
    #log-acciones.modo-periodico #contador-acciones {
        font-family: Arial, Helvetica, sans-serif !important;
        font-weight: 800 !important;
        font-style: normal !important;
        letter-spacing: normal !important;
    }
}

/* PERIÓDICO — ACERCAR PIE DE FOTO Y AUTOR EN MÓVIL */
@media (max-width: 700px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        margin-bottom: 8px;
    }
}

/* RUINITO — FILTRO DE EVENTOS MINIMALISTA */
#filtro-eventos-alternar {
    background: #2b272f;
    color: #fff0e4;

    border: 2px solid #86505e;
    border-radius: 12px;

    box-shadow: none;

    font-weight: 700;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

#filtro-eventos-alternar:hover {
    background: #38303b;
    border-color: #b16a80;
}

#filtro-eventos-alternar:active {
    background: #201d25;
}

/* ==========================================
   RUINITO — TEXTO Y NOTIFICACIONES DE EVENTOS
   MÓVIL Y ESCRITORIO
========================================== */

/* Caja negra */
#log-acciones:not(.modo-periodico) #texto-accion {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

/* Texto principal */
#log-acciones:not(.modo-periodico)
#texto-accion .texto-principal-evento {
    width: 100%;
    flex: 1 0 auto;

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

    text-align: center;
}

/* Notificaciones debajo del texto */
#log-acciones:not(.modo-periodico)
#texto-accion .consecuencias-evento {
    flex: 0 0 auto;
    margin-top: 12px;
}

/* Eventos con notificaciones */
#log-acciones:not(.modo-periodico)
#texto-accion:has(.consecuencias-evento) {
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Móvil */
/* Móvil — texto completo con scroll interno */
@media (max-width: 700px) {

    #log-acciones:not(.modo-periodico) #texto-accion {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    #log-acciones:not(.modo-periodico)
    #texto-accion:has(.consecuencias-evento) {
        height: auto;
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;

        justify-content: flex-start;
        align-items: stretch;
        gap: 12px;
    }

    #log-acciones:not(.modo-periodico)
    #texto-accion .texto-principal-evento {
        flex: 0 0 auto;
        min-height: auto;
        height: auto;
        width: 100%;

        display: block;
        line-height: 1.35;
        text-align: center;
    }

    #log-acciones:not(.modo-periodico)
    #texto-accion .consecuencias-evento {
        flex: 0 0 auto;
        margin-top: 0;
    }

    #log-acciones:not(.modo-periodico)
    #texto-accion .consecuencia-evento {
        flex: 0 0 auto;
        line-height: 1.4;
    }

}

/* Escritorio */
@media (min-width: 701px) {
    #log-acciones:not(.modo-periodico)
    #texto-accion:has(.consecuencias-evento) {
        min-height: 170px;
        max-height: 240px;
    }
}

/* ==========================================
   VENGANZA — ORQUÍDEA OSCURA
========================================== */

#log-acciones.evento-venganza {
    --tinte-evento: #b58bd8;

    border-color: #b58bd8 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(181, 139, 216, 0.60),
        0 0 28px rgba(181, 139, 216, 0.25);
}

#log-acciones.evento-venganza:not(.modo-periodico) {
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0.12) 65%,
            rgba(0, 0, 0, 0.42) 100%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, #684c80 22%, #202026) 0%,
            color-mix(in srgb, #211d2c 30%, #202026) 100%
        ) !important;
}

/* ==========================================
   RANKING MÓVIL — BLOQUEAR SCROLL EXTERIOR
========================================== */

@media (max-width: 700px) {

    html:has(body.ruinito-ranking-movil-activo) {
        height: 100%;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.ruinito-ranking-movil-activo {
        height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    body.ruinito-ranking-movil-activo
    #ranking-supervivencia {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* Evitar selección y resaltado táctil en avatares */

.avatar-accion,
.participante-accion,
.imagen-avatar-accion,
.personaje-mapa {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.avatar-accion img,
.imagen-avatar-accion img {
    -webkit-user-drag: none;
    user-select: none;
}

/* ==========================================
   SUMINISTROS INICIALES — MÓVIL COMPACTO
========================================== */

@media (max-width: 700px) {

    /* Ventana más alta */
    #suministros-iniciales.suministros-ruinito-prueba:not(
        :has(#apuestas-iniciales:not(.oculto))
    ) {
        max-height: 94dvh;
        height: 94dvh;
        padding: 14px 14px 18px;
    }

   

    /* Acercar título y descripción */
    .suministros-ruinito-prueba .suministros-encabezado h2 {
        font-size: 23px;
        line-height: 1.15;
    }

    .suministros-ruinito-prueba .suministros-encabezado p {
        margin: 8px 0 12px;
        font-size: 13px;
        line-height: 1.35;
    }

    /* Acercar línea rosa a los controles */
    .suministros-ruinito-prueba
    .suministros-encabezado::after {
        margin-bottom: 8px;
    }

    .suministros-ruinito-prueba .controles-suministros {
        margin-bottom: 2px;
    }

    /* Dar espacio real al área desplazable */
    .suministros-ruinito-prueba #lista-suministros-iniciales {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Acercar el botón inferior a la tabla */
    .suministros-ruinito-prueba #continuar-suministros {
        margin-top: 12px;
    }
}

 /* Eliminar el renglón exclusivo de la caja */
    .suministros-ruinito-prueba .suministros-icono {
        display: none;
    }

    /* ==========================================
   PIE DE FOTO DEL PERIÓDICO
========================================== */

/* Desktop */
#log-acciones.modo-periodico .periodico-pie-foto {
    font-size: 13px;
    line-height: 1.3;
}

/* Móvil */
@media (max-width: 700px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        font-size: 10px;
        line-height: 1.2;
    }
}
/* ==========================================
   PERIÓDICO — PIE DE FOTO POR DISPOSITIVO
========================================== */

/* Móvil */
@media (max-width: 768px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Desktop */
@media (min-width: 769px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================
   PERIÓDICO — PIE DE FOTO POR DISPOSITIVO
========================================== */

/* Móvil */
@media (max-width: 768px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }
}

/* Desktop */
@media (min-width: 769px) {
    #log-acciones.modo-periodico .periodico-pie-foto {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================
   ZONAS CERRADAS
========================================== */

.zona.zona-cerrada {
    opacity: 0.3;
    filter: grayscale(1);
    border-color: #555 !important;
    box-shadow: none !important;
    animation: none !important;
    cursor: default !important;
}

.zona.zona-cerrada:hover {
    filter: grayscale(1);
}

/* ==========================================
   SECRETO — VERDE LIMA ÁCIDO
========================================== */

#log-acciones.evento-secreto {
    --tinte-evento: #b7f34b;

    border-color: #b7f34b !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(183, 243, 75, 0.60),
        0 0 28px rgba(183, 243, 75, 0.25);
}

#log-acciones.evento-secreto:not(.modo-periodico) {
    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, 0.12) 65%,
            rgba(0, 0, 0, 0.42) 100%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, #536b23 22%, #202026) 0%,
            color-mix(in srgb, #20271b 30%, #202026) 100%
        ) !important;
}

/* ==========================================
   RUINITO — EVENTOS DE SECRETOS Y TESTIGOS
   ========================================== */

.evento-secreto {
    border-color: #C18C69 !important;
    box-shadow: 0 0 22px rgba(193, 140, 105, 0.30) !important;
    background: linear-gradient(
        180deg,
        #382C27 0%,
        #242125 100%
    ) !important;
}
/* ==========================================
   RUINITO — EVENTOS DE CÁRCEL
   ESTILO: ACERO PENITENCIARIO
========================================== */

#log-acciones.evento-carcel {

    --tinte-evento: #a3b4c8;

    border: 3px solid #8797ab !important;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.75),
        0 0 12px rgba(160, 183, 211, 0.55),
        0 0 30px rgba(122, 150, 184, 0.24),
        inset 0 1px 0 rgba(235, 242, 255, 0.18) !important;
}


/* FONDO METÁLICO Y SOMBRAS DE BARROTES */

#log-acciones.evento-carcel:not(.modo-periodico) {

    background:
        repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 43px,
    rgba(0, 0, 0, 0.11) 44px,
    rgba(0, 0, 0, 0.11) 51px,
    transparent 52px,
    transparent 95px

),


        radial-gradient(
            ellipse at 50% 0%,
            rgba(137, 163, 196, 0.25) 0%,
            transparent 65%
        ),
        linear-gradient(
            160deg,
            #343e4c 0%,
            #252c36 42%,
            #14181f 100%
        ) !important;

}


/* ==========================================
   RUINITO — JUICIOS (PRUEBA VISUAL)
========================================== */

#juicio-prueba-fondo {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.85);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

#juicio-prueba-fondo.oculto {
    display: none;
}

#juicio-prueba-ventana {
    width: 100%;
    max-width: 760px;
    height: min(650px, 90dvh);
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 16px;

    background: #202020;
    border: 1px solid #555;
    border-radius: 14px;
    padding: 20px;
    color: #fff;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
}

.juicio-prueba-cabecera {
    height: auto;
    min-height: 0;
    flex-shrink: 0;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 0;
    background: transparent;
    border: none;
}

.juicio-prueba-cabecera small {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
    color: #aaa;
}

.juicio-prueba-cabecera h2 {
    margin: 6px 0;
    font-size: 23px;
}

#juicio-prueba-progreso {
    margin: 0;
    color: #aaa;
    font-size: 13px;
}

#juicio-prueba-cerrar {
    background: #333;
    color: white;
    border: 1px solid #555;
    border-radius: 7px;
    padding: 8px 12px;
    cursor: pointer;
}

.juicio-prueba-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;

    flex: 1;
    min-height: 0;
}

.juicio-prueba-bando {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 0;

    padding: 12px 8px;
    border-radius: 10px;
}

.juicio-prueba-bando.inocente {
    background: rgba(35, 145, 92, 0.12);
    border: 1px solid #287b51;
}

.juicio-prueba-bando.culpable {
    background: rgba(195, 58, 58, 0.12);
    border: 1px solid #9c3737;
}

.juicio-prueba-bando h3 {
    margin: 0;
    font-size: 13px;
    letter-spacing: 1px;
}

.juicio-prueba-bando.inocente h3,
.juicio-prueba-bando.inocente strong {
    color: #55d993;
}

.juicio-prueba-bando.culpable h3,
.juicio-prueba-bando.culpable strong {
    color: #ff7474;
}

.juicio-prueba-bando strong {
    font-size: 34px;
    margin: 5px 0 12px;
}

.juicio-prueba-lista {
    width: 100%;
    flex: 1;
    min-height: 0;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    gap: 8px;

    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;

    padding: 4px;
    scrollbar-width: thin;
}

/* Cada avatar será generado desde JavaScript */

.juicio-prueba-votante {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    cursor: pointer;
    animation: juicioAparecerVoto 0.15s ease-out;
}

.juicio-prueba-avatar {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: #444;

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

    background-size: cover;
    background-position: center;

    font-weight: bold;
    font-size: 16px;
    overflow: hidden;
}

.juicio-prueba-nombre {
    max-width: 100%;
    font-size: 10px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.juicio-prueba-etiqueta {
    max-width: 100%;
    font-size: 9px;
    text-align: center;
    color: #f5cc78;
    overflow-wrap: anywhere;
}

@keyframes juicioAparecerVoto {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.juicio-prueba-controles {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.juicio-prueba-controles button {
    padding: 11px 16px;
    border: 1px solid #666;
    border-radius: 8px;
    background: #353535;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

#juicio-prueba-saltar {
    background: #e5e5e5;
    color: #111;
    border-color: #e5e5e5;
}

@media (max-width: 600px) {
    #juicio-prueba-ventana {
        padding: 12px;
        gap: 12px;
    }

    .juicio-prueba-columnas {
        gap: 7px;
    }

    .juicio-prueba-bando {
        padding: 10px 4px;
    }

    .juicio-prueba-lista {
        grid-template-columns: repeat(auto-fill, minmax(43px, 1fr));
        gap: 6px;
    }

    .juicio-prueba-avatar {
        width: 36px;
        height: 36px;
    }

    .juicio-prueba-cabecera h2 {
        font-size: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .juicio-prueba-votante {
        animation: none;
    }
}


/* ==========================================
   JUICIO INTEGRADO EN EL REGISTRO DIARIO
========================================== */

/* El registro se organiza verticalmente
   cuando muestra un juicio. */
#log-acciones.mostrando-juicio {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Ocultar únicamente el contenido del evento
   normal, no la navegación. */
#log-acciones.mostrando-juicio #contenido-accion {
    display: none;
}

/* Espacio del tribunal dentro del registro. */
#juicio-integrado {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

#log-acciones.mostrando-juicio #juicio-integrado {
    display: flex;
    flex-direction: column;
}

/* Reutilizamos el tribunal existente,
   eliminando su comportamiento de popup. */
#juicio-integrado #juicio-prueba-ventana {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Las columnas ocupan el espacio disponible. */
#juicio-integrado .juicio-prueba-columnas {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 700px) {
    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-columnas {
        flex: 1 1 0;
        min-height: 0;
        margin-bottom: 55px;
    }
}

/* Cada bando conserva su scroll independiente. */
#juicio-integrado .juicio-prueba-lista {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Los controles especiales van sobre
   las flechas del registro. */
#juicio-integrado .juicio-prueba-controles {
    flex: 0 0 auto;
    margin-top: 8px;
    padding: 0;
}

/* Flechas y contador siempre abajo. */
#log-acciones.mostrando-juicio #navegacion-acciones {
    flex: 0 0 auto;
    margin-top: 12px;
}

/* El botón X del tribunal ya no es necesario:
   se utiliza el X del registro diario. */
#juicio-integrado #juicio-prueba-cerrar {
    display: none;
}

/* Adaptación a pantallas pequeñas. */
@media (max-width: 700px) {

    #log-acciones.mostrando-juicio {
        height: 90dvh;
        max-height: 90dvh;
        padding: 14px;
    }

    

    #juicio-integrado .juicio-prueba-cabecera {
        flex: 0 0 auto;
    }

    #juicio-integrado .juicio-prueba-columnas {
        gap: 8px;
    }

    #juicio-integrado .juicio-prueba-controles {
        gap: 8px;
    }

    #juicio-integrado .juicio-prueba-controles button {
        min-width: 0;
        font-size: 12px;
        padding: 9px 10px;
    }
}

/* ==========================================
   JUICIO — AVATARES E INDICADORES
   ========================================== */

.juicio-prueba-avatar {
    position: relative;
    overflow: visible;
    border-radius: 12px;
}

.juicio-prueba-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.juicio-relaciones {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
    transform: translate(30%, -30%);
}

.juicio-relacion-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    background: #252525;
    border: 1px solid #777;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

/* ==========================================
   BONUS DE APOYO — DESKTOP
   ========================================== */

@media (min-width: 701px) {

    .avatar-accion > #sello-bonus-apoyo {
        top: 10px;
        right: 15px;
        left: auto;

        font-size: 19px;
        padding: 7px 12px;

        transform: translate(10%, -20%) rotate(20deg);
        transform-origin: center;
    }

}


/* ==========================================
   BONUS DE APOYO — MÓVIL
   ========================================== */

@media (max-width: 700px) {

    .avatar-accion > #sello-bonus-apoyo {
        top: 0;
        right: 0;
        left: auto;

        font-size: 9px;
        padding: 2px 4px;

        transform: translate(20%, -20%) rotate(25deg);
        transform-origin: center;
    }

}


/* ==========================================
   RUINITO — MEJORAS EXCLUSIVAS DESKTOP
========================================== */

@media (min-width: 1024px) {

    /* ======================================
       1. VENTANA ENVIAR APOYO
    ====================================== */

        #menu-apoyo .ventana-apoyo {
        width: min(760px, 88vw);
        max-height: 94vh;
        overflow-y: auto;
        padding: 22px 30px;
        border-radius: 18px;
    }

    #menu-apoyo .cabecera-apoyo {
        gap: 18px;
        margin-bottom: 14px;
    }

    #menu-apoyo .foto-apoyo {
        width: 100px;
        height: 100px;
        flex: 0 0 100px;
    }

    #menu-apoyo .datos-apoyo h2 {
        font-size: 28px;
        margin-bottom: 6px;
    }

    #menu-apoyo .apoyo-info .apoyo-destinatario,
    #menu-apoyo .apoyo-info .apoyo-dinero {
        font-size: 20px;
    }

    #menu-apoyo .apoyo-stats {
        font-size: 16px;
        gap: 12px;
        margin-top: 8px;
    }

    #menu-apoyo .opciones-apoyo {
        gap: 8px;
        margin-top: 14px;
    }

    #menu-apoyo .opcion-apoyo {
        font-size: 17px;
        padding: 10px 16px;
    }

    #menu-apoyo .mensaje-apoyo {
        margin-top: 10px;
    }

    #menu-apoyo .input-mensaje-apoyo {
        font-size: 16px;
        padding: 10px 14px;
    }

    #menu-apoyo .confirmar-apoyo {
        font-size: 17px;
        padding: 11px 16px;
        margin-top: 12px;
    }

    #menu-apoyo .cabecera-apoyo {
        gap: 26px;
        margin-bottom: 30px;
    }

    #menu-apoyo .foto-apoyo {
        width: 150px;
        height: 150px;
        flex: 0 0 150px;
        border-radius: 14px;
    }

    #menu-apoyo .datos-apoyo h2 {
        font-size: 38px;
        margin-bottom: 12px;
    }

    #menu-apoyo .apoyo-info {
        gap: 14px;
        flex-wrap: wrap;
    }

    #menu-apoyo .apoyo-info .apoyo-destinatario,
    #menu-apoyo .apoyo-info .apoyo-dinero {
        font-size: 26px;
    }

    #menu-apoyo .apoyo-stats {
        font-size: 20px;
        gap: 18px;
        flex-wrap: wrap;
        white-space: normal;
        margin-top: 14px;
    }

    #menu-apoyo .opciones-apoyo {
        gap: 14px;
        margin-top: 28px;
    }

    #menu-apoyo .opcion-apoyo {
        font-size: 23px;
        padding: 18px 24px;
        border-radius: 12px;
    }

    #menu-apoyo .input-mensaje-apoyo {
        font-size: 20px;
        padding: 18px 22px;
    }

    #menu-apoyo .confirmar-apoyo {
        font-size: 22px;
        padding: 18px 24px;
        margin-top: 22px;
    }

    #menu-apoyo .cerrar-apoyo {
        font-size: 34px;
        top: 15px;
        right: 20px;
    }


    /* ======================================
       2. JUICIO — CONTENIDO MÁS GRANDE
    ====================================== */

    #log-acciones.mostrando-juicio {
        width: min(1450px, 94vw);
        max-width: none;
        height: 90vh;
        max-height: none;
        padding: 36px 42px;
    }

    #juicio-integrado .juicio-prueba-ventana {
        gap: 24px;
    }

    #juicio-integrado .juicio-prueba-cabecera small {
        font-size: 16px;
    }

    #juicio-integrado .juicio-prueba-cabecera h2 {
        font-size: 36px;
    }

    #juicio-integrado #juicio-prueba-progreso {
        font-size: 20px;
    }

    #juicio-integrado .juicio-prueba-columnas {
        gap: 22px;
    }

    #juicio-integrado .juicio-prueba-bando {
        padding: 24px 18px;
        border-radius: 16px;
    }

    #juicio-integrado .juicio-prueba-bando h3 {
        font-size: 20px;
    }

    #juicio-integrado .juicio-prueba-bando strong {
        font-size: 52px;
        margin: 12px 0 20px;
    }

    #juicio-integrado .juicio-prueba-lista {
        grid-template-columns:
            repeat(auto-fill, minmax(100px, 1fr));
        gap: 20px 12px;
        padding: 10px;
        overflow-y: auto;
    }

    #juicio-integrado .juicio-prueba-avatar {
        width: 88px;
        height: 88px;
        border-radius: 14px;
        font-size: 30px;
    }

    #juicio-integrado .juicio-prueba-votante {
        gap: 8px;
    }

    #juicio-integrado .juicio-prueba-nombre {
        font-size: 15px;
    }

    #juicio-integrado .juicio-prueba-etiqueta {
        font-size: 13px;
    }

    #juicio-integrado .juicio-prueba-controles button {
        font-size: 19px;
        padding: 14px 22px;
    }


    /* ======================================
       3. MAPA — AMPLIACIÓN PROPORCIONAL
    ====================================== */

    #mapa {
        min-width: 0;
        overflow: hidden;
    }

           #mapa .mapa-contenido {
        width: 520px;
        height: 750px;
        left: 50%;
        top: 70px;

        transform: translateX(-50%) scale(1.30);
        transform-origin: top center;
    }

    /* Ensanchar zonas únicamente en escritorio */
    #mapa .zona {
        width: 310px !important;
    }

    /* Columna izquierda: crecer hacia la izquierda */
    #mapa .planta-agua,
    #mapa .fabrica,
    #mapa .hospital {
        left: -60px !important;
    }

    /* Columna derecha: crecer hacia la derecha */
    #mapa .comisaria,
    #mapa .centro,
    #mapa .templo {
        left: 270px !important;
    }

}



/* ==========================================
   JUICIO — AJUSTES DESKTOP
========================================== */

@media (min-width: 1024px) {

    /* Eliminar "Registro del día" solo en juicios */
    #log-acciones.mostrando-juicio #cabecera-log h2 {
        display: none;
    }

    /* Conservar la X de cierre */
    #log-acciones.mostrando-juicio #cabecera-log {
        justify-content: flex-end;
        margin-bottom: 0;
        min-height: 30px;
    }

    /* Compactar el encabezado del tribunal */
    #juicio-integrado .juicio-prueba-cabecera {
        flex: 0 0 auto;
        margin-top: -20px;
        margin-bottom: 4px;
    }

    /* Tribunal de supervivientes */
    #juicio-integrado .juicio-prueba-cabecera small {
        font-size: 14px;
    }

    /* Título principal */
    #juicio-integrado .juicio-prueba-cabecera h2 {
        font-size: 32px;
        margin: 4px 0;
    }

    /* Acusado y número de votos */
    #juicio-integrado #juicio-prueba-progreso {
        font-size: 19px;
    }

    /* Reducir el espacio entre encabezado y bandos */
    #juicio-integrado #juicio-prueba-ventana {
        gap: 12px;
    }

    /* Títulos de los bandos */
    #juicio-integrado .juicio-prueba-bando h3 {
        font-size: 18px;
    }

    /* Número de votos */
    #juicio-integrado .juicio-prueba-bando strong {
        font-size: 40px;
        margin: 5px 0 12px;
    }

    /* Dar más espacio a las fotografías */
    #juicio-integrado .juicio-prueba-bando {
        padding: 16px 18px;
    }

}

/* ==========================================
   RUINITO — EVENTOS JUDICIALES
   AZUL PETRÓLEO
========================================== */

#log-acciones.evento-juicio,
#log-acciones.mostrando-juicio {
    --tinte-evento: #315F73;

    border-color: #315F73 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.70),
        0 0 12px rgba(49, 95, 115, 0.55),
        0 0 28px rgba(49, 95, 115, 0.25);
}

/* Fondo oscuro con tinte judicial */

#log-acciones.evento-juicio,
#log-acciones.mostrando-juicio {
    background:
        linear-gradient(
            180deg,
            #243038 0%,
            #20262B 100%
        ) !important;
}

/* Cabecera del tribunal integrado */

#log-acciones.mostrando-juicio
.juicio-prueba-cabecera {
    border-bottom: 1px solid
        rgba(100, 157, 180, 0.35);
}

/* ==========================================
   RANKING — PERSONAJE SELECCIONADO
========================================== */

.ranking-fila-clicable.ranking-fila-seleccionada,
.ranking-fila-clicable.ranking-fila-seleccionada:hover {
    background: rgba(255, 255, 255, 0.065);
}

/* ANCHO DE FICHA DE RANKING — MÓVIL */
@media (max-width: 700px) {

    #informacion-mapa #ficha-personaje.ficha-desde-ranking {
        left: 2% !important;
        right: 2% !important;
        width: 96% !important;
        max-width: none !important;
    }

}

@media (min-width: 1024px) {

  #menu-apoyo .ventana-apoyo {
    width: min(850px, 88vw);
    height: auto;
    min-height: 0;
    max-height: 94vh;
    overflow-y: auto;
    padding: 36px 36px;
    border-radius: 18px;
    box-sizing: border-box;
}

#menu-apoyo .opciones-apoyo {
    gap: 12px;
    margin-top: 18px;
}

#menu-apoyo .opcion-apoyo {
    font-size: 18px;
    padding: 16px 18px;
}

#menu-apoyo .mensaje-apoyo {
    margin-top: 14px;
}

#menu-apoyo .confirmar-apoyo {
    font-size: 18px;
    padding: 14px 18px;
    margin-top: 16px;
}

#menu-apoyo .cabecera-apoyo {
    gap: 18px;
    margin-bottom: 14px;
}

#menu-apoyo .foto-apoyo {
    width: 125px;
    height: 125px;
    flex: 0 0 125px;
}

#menu-apoyo .datos-apoyo h2 {
    font-size: 28px;
    margin-bottom: 6px;
}

#menu-apoyo .apoyo-info .apoyo-destinatario,
#menu-apoyo .apoyo-info .apoyo-dinero {
    font-size: 20px;
}

#menu-apoyo .apoyo-stats {
    font-size: 16px;
    gap: 12px;
    margin-top: 8px;
}

#menu-apoyo .opciones-apoyo {
    gap: 10px;
    margin-top: 14px;
}

#menu-apoyo .opcion-apoyo {
    font-size: 17px;
    padding: 13px 18px;
}

#menu-apoyo .mensaje-apoyo {
    margin-top: 10px;
}

#menu-apoyo .input-mensaje-apoyo {
    font-size: 16px;
    padding: 10px 14px;
}

#menu-apoyo .confirmar-apoyo {
    font-size: 17px;
    padding: 11px 16px;
    margin-top: 12px;
}
}

/* MÓVIL — FILTRO DE EVENTOS DEBAJO DE LA VENTANA */
@media (max-width: 700px) {

    #filtro-eventos-alternar {
        position: fixed !important;

        top: auto !important;
        bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;

        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%) !important;
        z-index: 10001 !important;

        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }

}

/* MÓVIL — CONTROLES Y BOTÓN DE APOYO EN PANTALLAS BAJAS */
@media (max-width: 700px) {

    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

}

/* MAPA — OCULTAR APOYO SOLO EN PANTALLAS COMPACTAS */
@media (max-width: 375px) and (max-height: 700px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa:not(.ficha-desde-ranking)
    .boton-enviar-apoyo {
        display: none !important;
    }

}

/* APUESTAS — CONTROLES COMPACTOS EN TODOS LOS MÓVILES */
@media (max-width: 700px) {

    .fila-apuesta {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            38px
            91px;

        column-gap: 5px;
        row-gap: 3px;
        min-height: 58px;
        padding: 5px 2px;
    }

    .foto-apuesta {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .nombre-apuesta {
        font-size: 13px;
    }

    .cuota-apuesta {
        font-size: 12px;
    }

    .cuota-apuesta-larga {
        font-size: 11px;
    }

    .stats-apuesta {
        font-size: 10px;
        gap: 5px;
    }

    .controles-apuesta {
        grid-template-columns: 26px 33px 26px;
        grid-template-rows: 28px 17px;
        gap: 3px;
    }

    .boton-apuesta {
        width: 26px;
        height: 28px;
        font-size: 16px;
        border-radius: 6px;
    }

    .cantidad-apuesta {
        min-width: 0;
        font-size: 11px;
    }

    .premio-potencial {
        font-size: 9px;
        line-height: 1.1;
    }
}

/* ANUNCIO FICTICIO SOBRE LA VENTANA DE EVENTOS */
#anuncio-prueba-eventos {
    display: none;
}

@media (max-width: 700px) {

    body:has(#log-acciones:not(.oculto))
    #anuncio-prueba-eventos {
        display: flex;
        position: fixed;

        width: min(320px, calc(100vw - 20px));
        height: 50px;

        left: 50%;
        top: calc(13dvh - 50px - 8px);

        transform: translateX(-50%);

        align-items: center;
        justify-content: center;

        background: #303030;
        border: 1px dashed #aaa;
        border-radius: 4px;

        color: #ddd;
        font-size: 11px;
        font-weight: bold;

        z-index: 1000;
        pointer-events: none;
    }
}


/* ==========================================
   JUICIOS — PRIORIDAD A LOS VOTANTES
========================================== */

@media (max-width: 700px) {

    #log-acciones.mostrando-juicio #juicio-integrado {
        position: relative;
        z-index: 51;
        pointer-events: none;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-votante {
        position: relative;
        z-index: 1;
        pointer-events: auto;
    }
}
/* Navegación táctil adicional — móvil */
#navegacion-tactil-extra {
    display: none;
}

@media (max-width: 700px) {
    #log-acciones.modo-periodico #navegacion-tactil-extra,
    #log-acciones.mostrando-juicio #navegacion-tactil-extra {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 50;
    }

    #navegacion-tactil-extra button {
        position: absolute;
        width: 76px;
        height: 76px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        transform: translate(-50%, -50%);
    }

    #tactil-anterior {
    left: var(--flecha-normal-izquierda, 34%);
    top: calc(var(--flecha-normal-altura, 76%) + 35px);
}

#tactil-siguiente {
    left: var(--flecha-normal-derecha, 66%);
    top: calc(var(--flecha-normal-altura, 76%) + 35px);
}}

/* ==========================================
   E039 — SCROLL HORIZONTAL SIN REDIMENSIONAR
   ========================================== */

#log-acciones:not(.modo-periodico)
#participantes-accion.participantes-compactos.participantes-scroll-movil {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    overscroll-behavior-x: contain;

    
}

#log-acciones:not(.modo-periodico)
#participantes-accion.participantes-compactos.participantes-scroll-movil
.participante-accion {
    flex-shrink: 0 !important;
}
/* ==========================================
   DESASTRE — ALERTA DE CATÁSTROFE
   ========================================== */

#log-acciones.evento-desastre:not(.modo-periodico) {
    border: 3px solid #a88a35;

    background:
        repeating-linear-gradient(
            135deg,
            #111111 0px 12px,
            #f2c526 12px 24px
        ) top / 100% 9px no-repeat,

        repeating-linear-gradient(
            135deg,
            #111111 0px 12px,
            #f2c526 12px 24px
        ) bottom / 100% 9px no-repeat,

        radial-gradient(
            ellipse at center,
            #1c1719 0%,
            #271315 45%,
            #421013 100%
        ) !important;

    box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(210, 20, 20, 0.3),
    inset 0 0 25px rgba(180, 0, 0, 0.12);

animation:
    aparecerPopup var(--duracion-apertura-eventos) ease-out,
    pulsoDesastre 3s ease-in-out infinite;
}

@keyframes pulsoDesastre {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.8),
            0 0 18px 5px rgba(255, 45, 35, 0.45),
            0 0 45px 12px rgba(255, 20, 20, 0.15),
            inset 0 0 20px rgba(180, 0, 0, 0.1);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.8),
            0 0 28px 9px rgba(255, 65, 45, 0.85),
            0 0 65px 20px rgba(255, 25, 20, 0.35),
            inset 0 0 25px rgba(200, 0, 0, 0.15);
    }
}

/* ==========================================
   DESKTOP — ELEVAR SCROLL DE AVATARES
   ========================================== */

@media (min-width: 701px) {

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil {
        padding-bottom: 0;
        margin-bottom: 0;
        scrollbar-width: thin;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil::-webkit-scrollbar {
        height: 6px;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil::-webkit-scrollbar-track {
        background: transparent;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil::-webkit-scrollbar-thumb {
        background: #777;
        border-radius: 10px;
    }
}

/* Ocultar barra nativa de avatares SOLO en desktop */
@media (min-width: 701px) {

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil {
        scrollbar-width: none !important;
    }

    #log-acciones:not(.modo-periodico)
    #participantes-accion.participantes-compactos.participantes-scroll-movil::-webkit-scrollbar {
        display: none !important;
    }
}
/* Integración editor v16: aislado para no interferir con el CSS del juego */
#ruinito-editor-overlay[hidden]{display:none!important}
#ruinito-editor-overlay{position:fixed;inset:0;z-index:100000;background:#101015}
#ruinito-editor-frame{display:block;width:100%;height:100%;border:0;background:#101015}
body.ruinito-editando{overflow:hidden}

/* RUINITO: muertos con scroll independiente, sin invadir controles.
   Limitado a escritorio; la interfaz movil conserva sus reglas. */
@media (min-width: 769px) {
    #informacion-mapa.informacion-ruinito-prueba {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #informacion-mapa #registro-muertos {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: calc(100% - 150px);
        overflow: hidden;
    }
    #informacion-mapa #lista-muertos {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        align-content: start;
        overscroll-behavior: contain;
    }
    #controles-desktop {
        right: max(35px, calc((100vw - 1400px) / 2 + 35px));
        width: 270px;
    }
}

/* RUINITO — escala de prueba: equivalente aproximado a Chrome 80 %,
   solo en la interfaz de partida de escritorio. */
@media (min-width: 769px) {
  body:not(.ruinito-editando) main {
    zoom: .8;
    width: 125%;
  }
}

/* ==========================================================
   RUINITO — AJUSTE DE ESCRITORIO COMPACTO (prueba v2)
   Sin modificar portada/editor ni reglas móviles <=700px.
   ========================================================== */
@media (min-width: 769px) {
  /* Controles ligados al borde del panel en la maqueta escalada.
     El margen compensa el centrado del bloque principal. */
  #controles-desktop {
    right: max(20px, calc((100vw - min(100vw, 1400px)) / 2 + 20px)) !important;
    width: min(270px, 27vw) !important;
    bottom: 22px !important;
    gap: 10px !important;
  }
  #informacion-mapa #ficha-personaje.ficha-activa .boton-enviar-apoyo {
    position: fixed !important;
    right: max(20px, calc((100vw - min(100vw, 1400px)) / 2 + 20px)) !important;
    bottom: 144px !important;
    width: min(270px, 27vw) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    left: auto !important;
    transform: none !important;
  }
  #informacion-mapa #registro-muertos {
    flex: 1 1 auto;
    max-height: calc(100% - 170px);
    min-height: 0;
  }
  #informacion-mapa #lista-muertos {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Ventanas independientes del zoom aplicado a main. */
  #log-acciones:not(.modo-periodico) {
    width: min(850px, 88vw);
    height: min(660px, 82dvh);
    max-height: 82dvh;
    padding: 24px;
  }
  #log-acciones:not(.modo-periodico) #contenido-accion {
    height: calc(100% - 85px);
    min-height: 0;
    gap: 12px;
  }
  #log-acciones:not(.modo-periodico) #participantes-accion {
    flex: 1 1 auto;
    min-height: 0;
    gap: 32px;
  }
  #log-acciones:not(.modo-periodico) .avatar-accion {
    width: clamp(85px, 12vh, 145px);
    height: clamp(85px, 12vh, 145px);
  }
  #log-acciones:not(.modo-periodico) #texto-accion {
    position: relative;
    flex: 0 1 auto;
    width: 86%;
    min-height: 90px;
    max-height: 35%;
    overflow-y: auto;
    padding: 14px 22px;
    font-size: 18px;
    line-height: 1.35;
  }
  #log-acciones:not(.modo-periodico) #navegacion-acciones {
    flex-shrink: 0;
    margin-top: 4px;
  }
  #suministros-iniciales {
    width: min(620px, 90vw);
    max-height: 80dvh;
    padding: 20px;
  }
}

/* ============================================================
   RUINITO — PRUEBA V3: modales compactos y controles alineados
   ============================================================ */
@media (min-width: 769px) {
  /* El zoom del contenedor main hace que los fixed internos
     calculen su posición en un sistema distinto. Ubicarlos
     respecto al panel lateral, no al borde físico del viewport. */
  #informacion-mapa { position: relative !important; }
  #controles-desktop {
    position: absolute !important;
    left: auto !important;
    right: 14px !important;
    bottom: 16px !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    gap: 8px !important;
  }
  #controles-desktop #abrir-log,
  #controles-desktop #siguiente-dia {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }
  #informacion-mapa #ficha-personaje.ficha-activa .boton-enviar-apoyo {
    position: absolute !important;
    right: 14px !important;
    left: auto !important;
    bottom: 124px !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    height: 44px !important;
  }
  #informacion-mapa #registro-muertos { max-height: calc(100% - 135px) !important; }

  /* Ventana de eventos: tres franjas independientes.
     Nunca dejar que el texto invada los avatares o la navegación. */
  #log-acciones:not(.modo-periodico) {
    width: min(790px, 86vw) !important;
    height: min(590px, 80dvh) !important;
    max-height: 80dvh !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #log-acciones:not(.modo-periodico) #cabecera-log {
    flex: 0 0 auto !important;
    margin-bottom: 8px !important;
  }
  #log-acciones:not(.modo-periodico) #contenido-accion {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(90px, 1fr) minmax(100px, auto) 52px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  #log-acciones:not(.modo-periodico) #participantes-accion {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    align-self: center !important;
    gap: 24px !important;
  }
  #log-acciones:not(.modo-periodico) .avatar-accion {
    width: clamp(72px, 15dvh, 128px) !important;
    height: clamp(72px, 15dvh, 128px) !important;
    flex-shrink: 0 !important;
  }
  #log-acciones:not(.modo-periodico) #texto-accion {
    width: 88% !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: 190px !important;
    margin: 0 auto !important;
    overflow-y: auto !important;
    padding: 12px 20px !important;
    font-size: 17px !important;
  }
  #log-acciones:not(.modo-periodico) #navegacion-acciones {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    align-self: center !important;
    padding-bottom: 2px !important;
  }
  #log-acciones:not(.modo-periodico) #navegacion-acciones button {
    height: 44px !important;
    width: 44px !important;
    font-size: 20px !important;
  }
  #log-acciones:not(.modo-periodico) #contador-acciones {font-size: 18px !important;}

  /* Los dos modales usan el mismo contenedor: la vista de apuestas
     tiene reglas previas de 94vh y 1200px que hay que sobreescribir. */
  #suministros-iniciales.suministros-ruinito-prueba,
  #suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) {
    width: min(900px, 88vw) !important;
    height: min(680px, 84dvh) !important;
    max-height: 84dvh !important;
    padding: 18px 26px !important;
  }
  #suministros-iniciales .suministros-encabezado h2 {font-size: 23px !important;}
  #suministros-iniciales .suministros-encabezado p {font-size: 13px !important; margin: 6px 0 10px !important;}
  #suministros-iniciales .suministros-encabezado::after {margin-bottom: 8px !important;}
  #suministros-iniciales .fila-suministros {min-height: 40px !important; padding-top: 3px !important; padding-bottom: 3px !important; font-size: 14px !important;}
  #suministros-iniciales #continuar-suministros {margin-top: 12px !important; padding: 9px 16px !important;}
  #suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) .fila-apuesta {min-height: 68px !important;}
}

/* Editor de personajes */
#ruinito-editor-overlay[hidden] {
    display: none !important;
}

#ruinito-editor-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 2147483000;
    background: #101015;
    overflow: hidden;
}

#ruinito-editor-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

body.ruinito-editando {
    overflow: hidden;
}


/* RESPETAR EL ESTADO OCULTO DEL REGISTRO */
#log-acciones.oculto,
#fondo-log.oculto {
    display: none !important;
}

/* DESKTOP: CONTROLES ANCLADOS A LA COLUMNA DERECHA */
@media (min-width: 769px) {

    #informacion-mapa {
        anchor-name: --columna-ruinito;
    }

    #controles-desktop {
        position: fixed !important;
        position-anchor: --columna-ruinito;

        left: anchor(left) !important;
        right: auto !important;
        top: anchor(bottom) !important;
        bottom: auto !important;

        width: anchor-size(width) !important;
        max-width: none !important;

        translate: 0 -100%;

        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;

        padding: 12px 16px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;

        z-index: 900 !important;
    }

    #controles-desktop #abrir-log,
    #controles-desktop #siguiente-dia {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* DESKTOP: SUBIR ÚNICAMENTE ENVIAR APOYO */
@media (min-width: 769px) {
    #informacion-mapa #ficha-personaje.ficha-activa .boton-enviar-apoyo {
        bottom: 132px !important;
    }
}

/* DESKTOP — SUMINISTROS MÁS ANGOSTO */
@media (min-width: 769px) {
    #suministros-iniciales.suministros-ruinito-prueba:not(
        :has(#apuestas-iniciales:not(.oculto))
    ) {
        width: min(700px, 88vw) !important;
        height: 88dvh !important;
        max-height: 88dvh !important;
    }
   
}
/* APUESTAS COMPACTAS — SOLO DESKTOP */
@media (min-width: 769px) {

    #apuestas-iniciales.apuestas-retro-prueba .fila-apuesta {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 80px 160px !important;
        grid-template-areas:
            "foto principal cuota controles"
            "foto stats cuota controles" !important;
        grid-template-rows: 26px 24px !important;
        column-gap: 12px !important;
        row-gap: 2px !important;
        height: 76px !important;
        min-height: 76px !important;
        padding: 5px 8px !important;
        align-items: center !important;
        align-content: center !important;
    }

    #apuestas-iniciales .foto-apuesta {
        grid-area: foto !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54  px !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: center !important;
        overflow: hidden !important;
    }

    #apuestas-iniciales .foto-apuesta img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #apuestas-iniciales .identidad-apuesta {
        grid-area: principal !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    #apuestas-iniciales .linea-nombre-apuesta {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
    }

    #apuestas-iniciales .nombre-apuesta {
        font-size: 20px !important;
        line-height: 1.1 !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    #apuestas-iniciales .zona-etiqueta-apuesta {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #apuestas-iniciales .etiqueta-apuesta {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        font-size: 10px !important;
        padding: 4px 7px !important;
        white-space: nowrap !important;
    }

    #apuestas-iniciales .stats-apuesta {
        grid-area: stats !important;
        display: flex !important;
        align-items: center !important;
        align-self: end !important;
        font-size: 16px !important;
        line-height: 1.1 !important;
        gap: 10px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    #apuestas-iniciales .cuota-apuesta {
        grid-area: cuota !important;
        font-size: 19px !important;
        line-height: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
    }

    #apuestas-iniciales .controles-apuesta {
        grid-area: controles !important;
        display: grid !important;
        grid-template-columns: 36px 72px 36px !important;
        grid-template-rows: 36px 18px !important;
        gap: 4px 8px !important;
        width: 160px !important;
        align-items: center !important;
        justify-items: center !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        align-content: center !important;
    }

    #apuestas-iniciales .boton-apuesta {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        font-size: 21px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #apuestas-iniciales .cantidad-apuesta {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 16px !important;
        min-width: 0 !important;
        justify-self: center !important;
    }

    #apuestas-iniciales .premio-potencial {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        font-size: 12px !important;
    }
}

/* MINIFICHA DE EVENTOS — SOLO DESKTOP */
@media (min-width: 701px) {

    #ficha-evento-movil:not(.oculto) {
        font-size: 14px !important;
    }

    #ficha-evento-movil:not(.oculto) > * {
        line-height: 1.35;
    }
}



/* DESKTOP — ENVIAR APOYO, ALINEADO CON LOS CONTROLES */
@media (min-width: 769px) {

    #informacion-mapa
    #ficha-personaje.ficha-activa
    .boton-enviar-apoyo {

        position: fixed !important;
        position-anchor: --columna-ruinito !important;

        left: calc(anchor(left) + 16px) !important;
        top: anchor(bottom) !important;
        right: auto !important;
        bottom: auto !important;

        width: calc(anchor-size(width) - 32px) !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 48px !important;
        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 12px !important;

        translate: 0 -100% !important;
        transform: translateY(-144px) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        z-index: 950 !important;
    }
}

/* APOYO DENTRO DE LOS CONTROLES — DESKTOP */
@media (min-width: 769px) {

    #controles-desktop .boton-enviar-apoyo {
        position: static !important;

        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        position-anchor: auto !important;
        transform: none !important;
        translate: none !important;

        width: 100% !important;
        height: 48px !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 12px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    body:not(:has(#ficha-personaje.ficha-activa))
    #controles-desktop .boton-enviar-apoyo {
        display: none !important;
    }
}

/* ==========================================
   RUINITO — GANADOR VERTICAL DESKTOP
   ========================================== */

@media (min-width: 769px) {

    #final-partida {
        width: min(480px, calc(100vw - 40px)) !important;
        max-width: 480px !important;
        max-height: 96dvh !important;

        padding: 20px 30px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        gap: 0 !important;
    }

    #final-partida .final-partida-trofeo {
        font-size: 42px !important;
        margin-bottom: 5px !important;
    }

    #final-partida .final-partida-titulo {
        font-size: 35px !important;
        margin-bottom: 12px !important;
    }

    #final-partida .final-partida-foto {
        width: min(195px, 23dvh) !important;
        height: min(195px, 23dvh) !important;
        flex-shrink: 0 !important;
    }

    #final-partida .final-partida-nombre {
        font-size: 38px !important;
        margin-top: 12px !important;
    }

    #final-partida .final-partida-dia {
        font-size: 19px !important;
        margin-top: 6px !important;
    }

    #final-partida .final-partida-ranking {
        font-size: 19px !important;
        margin-top: 12px !important;
        line-height: 1.3 !important;
    }

    #final-partida .final-partida-cuota {
        font-size: 24px !important;
        margin-top: 6px !important;
    }

    #final-partida .final-partida-hazana {
        margin-top: 14px !important;
        padding-top: 12px !important;
    }

    #final-partida .final-partida-hazana-titulo {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    #final-partida .final-partida-hazana-texto {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================
   RUINITO — JERARQUÍA VISUAL DEL GANADOR
   MÓVIL Y DESKTOP
   ========================================== */

/* APUESTA GANADORA: etiqueta secundaria */

#final-partida .final-partida-apuesta {
    margin-top: 14px;
    padding-top: 14px;
}

#final-partida .final-partida-apuesta-titulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b8b8b8;
}

/* Información de cuánto se apostó */

#final-partida .final-partida-apuesta-detalle {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 400;
    color: #b8b8b8;
}

/* El cobro es el protagonista */

#final-partida .final-partida-apuesta-cobro {
    margin-top: 10px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 900;
    color: #ffd34f;

    text-shadow:
        0 0 12px rgba(255, 211, 79, 0.20);
}

/* Ranking inicial: información secundaria */

#final-partida .final-partida-ranking {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: #b8b8b8;
}

/* Hazaña: cierre narrativo */

#final-partida .final-partida-hazana {
    margin-top: 14px;
    padding-top: 12px;
}

#final-partida .final-partida-hazana-titulo {
    font-weight: 800;
    color: #ffffff;
}

#final-partida .final-partida-hazana-texto {
    margin-top: 6px;
    color: #b8b8b8;
    line-height: 1.4;
}

/* ==========================================
   AJUSTES INTERIORES PARA MÓVIL
   No modificamos la ventana
   ========================================== */

@media (max-width: 700px) {

    #final-partida .final-partida-apuesta {
        margin-top: 12px;
        padding-top: 12px;
    }

    #final-partida .final-partida-apuesta-titulo {
        font-size: 13px;
    }

    #final-partida .final-partida-apuesta-detalle {
        font-size: 12px;
    }

    #final-partida .final-partida-apuesta-cobro {
        font-size: 28px;
    }

    #final-partida .final-partida-ranking {
        font-size: 13px;
        margin-top: 8px;
    }

    #final-partida .final-partida-hazana {
        margin-top: 12px;
        padding-top: 10px;
    }

    #final-partida .final-partida-hazana-texto {
        font-size: 13px;
    }
}

/* ==========================================
   AJUSTES INTERIORES PARA DESKTOP
   ========================================== */

@media (min-width: 769px) {

    #final-partida .final-partida-apuesta-cobro {
        font-size: 34px;
    }

    #final-partida .final-partida-hazana-texto {
        font-size: 16px !important;
    }

    #final-partida .final-partida-ranking {
        font-size: 15px !important;
        margin-top: 10px !important;
    }
}

/* ==========================================
   RUINITO — JERARQUÍA FINAL DEL GANADOR
   MÓVIL Y DESKTOP
   ========================================== */

/* Ranking como dato secundario del campeón */

#final-partida .final-partida-ranking {
    margin-top: 5px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #b8b8b8 !important;
}

/* Encabezado de apuesta */

#final-partida.final-con-apuesta
.final-partida-apuesta-titulo {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px;
    color: #b8b8b8;
}

/* Premio principal */

#final-partida.final-con-apuesta
.final-partida-apuesta-cobro {
    margin-top: 8px !important;
    font-size: 32px !important;
    line-height: 1.15 !important;
    color: #ffd34f !important;
}

/* Explicación debajo del premio */

#final-partida.final-con-apuesta
.final-partida-apuesta-detalle {
    margin-top: 6px !important;
    font-size: 14px !important;
    color: #b8b8b8;
}

/* Reducir ligeramente el título principal
   solo cuando hay apuesta ganadora */

#final-partida.final-con-apuesta
.final-partida-titulo {
    font-size: 27px !important;
}

/* ==========================================
   DESKTOP
   ========================================== */

@media (min-width: 769px) {

    #final-partida.final-con-apuesta
    .final-partida-foto {
        width: min(205px, 23dvh) !important;
        height: min(205px, 23dvh) !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-apuesta {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-apuesta-cobro {
        font-size: 34px !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-hazana {
        margin-top: 12px !important;
        padding-top: 10px !important;
    }
}

/* ==========================================
   MÓVIL — SOLO CONTENIDO INTERIOR
   ========================================== */

@media (max-width: 700px) {

    #final-partida.final-con-apuesta
    .final-partida-titulo {
        font-size: 25px !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-apuesta {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-apuesta-cobro {
        font-size: 28px !important;
    }

    #final-partida.final-con-apuesta
    .final-partida-apuesta-detalle {
        font-size: 12px !important;
    }
}

/* ==========================================
   FINAL — JERARQUÍA TIPOGRÁFICA
   MÓVIL Y DESKTOP
   ========================================== */

/* Datos del campeón */

#final-partida .final-partida-dia {
    font-size: 17px !important;
    line-height: 1.3;
}

#final-partida .final-partida-ranking {
    font-size: 14px !important;
    line-height: 1.3;
}

/* Hazaña: reducir título y descripción */

#final-partida .final-partida-hazana-titulo {
    font-size: 16px !important;
    line-height: 1.25;
}

#final-partida .final-partida-hazana-texto {
    font-size: 13px !important;
    line-height: 1.4;
}

/* Desktop */

@media (min-width: 769px) {

    #final-partida .final-partida-dia {
        font-size: 19px !important;
    }

    #final-partida .final-partida-ranking {
        font-size: 15px !important;
    }

    #final-partida .final-partida-hazana-titulo {
        font-size: 18px !important;
    }

    #final-partida .final-partida-hazana-texto {
        font-size: 15px !important;
    }
}

/* ==========================================
   GANADOR — POSICIÓN INICIAL SECUNDARIA
   ========================================== */

/* Móvil y base */
#final-partida .final-partida-ranking {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #b8b8b8 !important;
}

/* Desktop */
@media (min-width: 769px) {
    #final-partida .final-partida-ranking {
        font-size: 13px !important;
    }
}

/* MÓVIL — Botón Solo muertes */
@media (max-width: 700px) {
    #filtro-eventos-alternar {
        bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 40px !important;
        box-sizing: border-box;
        width: 160px !important;
    }
}

/* Ocultar el evento anterior mientras se muestra un juicio */
#log-acciones.mostrando-juicio #contenido-accion {
    display: none !important;
}

/* DESKTOP — Tribunal integrado compacto */
@media (min-width: 1024px) {

    /* Encabezado */
    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-cabecera small {
        font-size: 11px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-cabecera h2 {
        font-size: 25px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado #juicio-prueba-progreso {
        font-size: 15px;
    }

    /* Bandos */
    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-bando {
        padding: 12px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-bando h3 {
        font-size: 14px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-bando strong {
        font-size: 30px;
        margin: 4px 0 10px;
    }

    /* Votantes más pequeños y agrupados */
    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-lista {
        grid-template-columns: repeat(auto-fill, 70px);
        justify-content: center;
        gap: 12px 8px;
        padding: 8px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-avatar {
        width: 54px;
        height: 54px;
        border-radius: 9px;
        font-size: 18px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-votante {
        gap: 4px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-nombre {
        font-size: 11px;
    }

    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-etiqueta {
        font-size: 10px;
    }

    /* Botones */
    #log-acciones.mostrando-juicio
    #juicio-integrado .juicio-prueba-controles button {
        font-size: 14px;
        padding: 9px 15px;
    }
}

/* DESKTOP — Más espacio para votantes en juicios */
@media (min-width: 1024px) {
    #log-acciones.mostrando-juicio {
        height: min(94vh, 1050px) !important;
        max-height: 94vh !important;
    }
}

/* Nombre de la víctima en testigos y juicios */
.nombre-victima-asesinato {
    color: #ffd54f !important;
    font-weight: 800 !important;
}

/* ==========================================
   DESKTOP — PERIÓDICO DE MUERTES COMPACTO
   ========================================== */

@media (min-width: 1024px) {

    /* Nombre del periódico */
    #log-acciones.modo-periodico::before {
        font-size: 42px !important;
    }

    /* Titular */
    #log-acciones.modo-periodico
    h2.periodico-titular {
        font-size: 36px !important;
        line-height: 1.15 !important;
        min-height: 0 !important;
        max-width: 900px;
        margin-top: 20px !important;
        margin-bottom: 22px !important;
    }

    /* Titulares largos */
    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-largo {
        font-size: 27px !important;
    }

    #log-acciones.modo-periodico
    h2.periodico-titular.periodico-titular-muy-largo {
        font-size: 24px !important;
    }

    /* Fotografía */
    #log-acciones.modo-periodico
    .periodico-foto {
        width: 260px !important;
        height: 190px !important;
    }

    /* Pie de foto */
    #log-acciones.modo-periodico
    .periodico-pie-foto {
        width: 260px !important;
        font-size: 10px !important;
    }

    /* Autor */
    #log-acciones.modo-periodico
    .periodico-autor {
        font-size: 13px !important;
        max-width: 600px;
        margin-top: 10px;
        margin-bottom: 6px;
    }

    /* Cuerpo de la noticia */
    #log-acciones.modo-periodico
    .periodico-cuerpo {
        font-size: 18px !important;
        line-height: 1.35 !important;
        max-width: 600px;
    }
}

/* ==========================================
   DESKTOP — EVENTOS NORMALES
========================================== */

@media (min-width: 769px) {

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #contenido-accion {
        display: grid !important;
        grid-template-rows:
        minmax(285px, 1fr)
        minmax(0, auto)
        52px !important;
        gap: 14px !important;
        row-gap: 14px !important;
        min-height: 0 !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        justify-content: center !important;
        align-items: flex-start !important;
        align-self: start !important;
        gap: 0 !important;
        padding: 8px 0 0 !important;
        overflow: visible !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion > .participante-accion {
        position: relative !important;
        flex: 0 0 170px !important;
        width: 170px !important;
        min-width: 0 !important;
        max-width: 170px !important;
        margin: 0 !important;
        gap: 6px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion .avatar-accion {
        width: 170px !important;
        height: 170px !important;
        min-width: 170px !important;
        min-height: 170px !important;
        max-width: 170px !important;
        max-height: 170px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    /* PNG transparentes: fondo blanco */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion .avatar-accion img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        background-color: #fff !important;
        border-radius: 50% !important;
    }

    /* 1 PERSONAJE */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:only-child)
    > .participante-accion {
        flex: 0 0 210px !important;
        width: 210px !important;
        max-width: 210px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:only-child)
    .avatar-accion {
        width: 210px !important;
        height: 210px !important;
        min-width: 210px !important;
        min-height: 210px !important;
        max-width: 210px !important;
        max-height: 210px !important;
    }

    /* 2 PERSONAJES */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(2):last-child)
    > .participante-accion {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(2):last-child)
    .avatar-accion {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(2):last-child) {
        gap: 30px !important;
    }

    /* 3 Y 4 PERSONAJES */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(3))
    > .participante-accion + .participante-accion {
        margin-left: -12px !important;
    }

  /* Exactamente 3 personajes */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(3):last-child) {
        gap: 22px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(3):last-child)
    > .participante-accion {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        margin-left: 0 !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(3):last-child)
    .avatar-accion {
        width: 200px !important;
        height: 200px !important;
        min-width: 200px !important;
        min-height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
    }

    /* 5 O MÁS PERSONAJES */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    > .participante-accion {
        flex: 0 1 135px !important;
        width: 135px !important;
        max-width: 135px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    .avatar-accion {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 135px !important;
        max-height: 135px !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    > .participante-accion + .participante-accion {
        margin-left: -10px !important;
    }

    /* TEXTO */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #texto-accion {
        width: 88% !important;
        height: auto !important;
        min-height: 115px !important;
        max-height: 190px !important;
        margin: 0 auto !important;
        padding: 12px 20px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        align-self: start !important;
    }

}

/* DESKTOP: bajar ligeramente las fotos de eventos con 4 personajes */
@media (min-width: 769px) {
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(4):last-child) {
        transform: translateY(24px) !important;
    }
}


/* ==========================================
   DESKTOP — EVENTOS CON 5+ PERSONAJES
   ========================================== */

@media (min-width: 769px) {

    /* La fila nunca puede ensanchar el contenido */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #contenido-accion {
        min-width: 0 !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5)) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;

        gap: 0 !important;
        overflow: hidden !important;
        padding: 12px 8px 0 !important;
        transform: translateY(30px) !important;
    }

    /* 5+ participantes: reparto proporcional del espacio */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    > .participante-accion {
        flex: 0 1 155px !important;
        width: 155px !important;
        min-width: 0 !important;
        max-width: 155px !important;
        margin-left: -8px !important;
        box-sizing: border-box !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    > .participante-accion:first-child {
        margin-left: 0 !important;
    }

    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    .avatar-accion {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 155px !important;
        max-height: 155px !important;
    }

    /* Los nombres también deben poder encogerse */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #participantes-accion:has(> .participante-accion:nth-child(5))
    .nombre-participante {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(12px, 1.4vw, 18px) !important;
    }

    /* El texto permanece dentro de la ventana */
    #log-acciones:not(.modo-periodico):not(.mostrando-juicio)
    #texto-accion {
        min-width: 0 !important;
        max-width: 88% !important;
        box-sizing: border-box !important;
    }
}

/* APUESTAS MÁS COMPACTAS — DESKTOP */
@media (min-width: 769px) {

    #apuestas-iniciales.apuestas-retro-prueba .fila-apuesta {
        height: 58px !important;
        min-height: 58px !important;
        padding: 3px 8px !important;
        grid-template-rows: 23px 19px !important;
        row-gap: 1px !important;
    }

    #apuestas-iniciales .foto-apuesta {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #apuestas-iniciales .nombre-apuesta {
        font-size: 17px !important;
    }

    #apuestas-iniciales .stats-apuesta {
        font-size: 13px !important;
        gap: 8px !important;
    }

    #apuestas-iniciales .cuota-apuesta {
        font-size: 17px !important;
    }

    #apuestas-iniciales .controles-apuesta {
        grid-template-columns: 32px 64px 32px !important;
        grid-template-rows: 32px 15px !important;
        width: 144px !important;
        gap: 2px 8px !important;
    }

    #apuestas-iniciales .boton-apuesta {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 19px !important;
    }

    #apuestas-iniciales .cantidad-apuesta {
        font-size: 14px !important;
    }

    #apuestas-iniciales .premio-potencial {
        font-size: 11px !important;
    }
}

/* ==========================================
   APUESTAS — CABECERA DEFINITIVA
========================================== */

#apuestas-iniciales .apuestas-encabezado {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-bottom: 12px !important;
    min-width: 0 !important;
}

#apuestas-iniciales .apuestas-cabecera-izquierda {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

#apuestas-iniciales .apuestas-titulo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#apuestas-iniciales #subtitulo-apuestas {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
}

#apuestas-iniciales .apuestas-cabecera-derecha {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#apuestas-iniciales .apuestas-dinero {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 24px !important;
}

#apuestas-iniciales .saldo-apuestas,
#apuestas-iniciales .resumen-apuestas {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#apuestas-iniciales .resumen-apuestas > div:not(.reserva-apoyo-oculta) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    white-space: nowrap !important;
}

#apuestas-iniciales .reserva-apoyo-oculta {
    display: none !important;
}



#apuestas-iniciales .resumen-apuestas span:not(#total-apostado) {
    color: #aaa !important;
}

#apuestas-iniciales .apuestas-cabecera-derecha .reiniciar-apuestas {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    align-self: flex-end !important;
    margin: 0 !important;
}

/* DESKTOP */
@media (min-width: 769px) {

    #apuestas-iniciales .apuestas-encabezado {
        align-items: flex-start !important;
        padding-bottom: 4px !important;
        gap: 12px !important;
    }

    #apuestas-iniciales .apuestas-cabecera-izquierda {
        gap: 0 !important;
    }

    #apuestas-iniciales #subtitulo-apuestas {
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }

    #apuestas-iniciales .apuestas-cabecera-derecha {
        gap: 4px !important;
    }

    #apuestas-iniciales .apuestas-dinero {
        gap: 20px !important;
    }

    #apuestas-iniciales .saldo-apuestas,
    #apuestas-iniciales .resumen-apuestas {
        gap: 0 !important;
    }

    #apuestas-iniciales .saldo-apuestas strong,
    #apuestas-iniciales .resumen-apuestas strong {
        font-size: 24px !important;
    }
}

/* MÓVIL */
@media (max-width: 768px) {

    #apuestas-iniciales .apuestas-encabezado {
        gap: 8px !important;
    }

    #apuestas-iniciales .apuestas-cabecera-izquierda {
        flex: 1 1 auto !important;
    }

    #apuestas-iniciales .apuestas-cabecera-derecha {
        flex: 0 0 auto !important;
        gap: 8px !important;
    }

    #apuestas-iniciales .apuestas-dinero {
        gap: 10px !important;
    }

    #apuestas-iniciales .saldo-apuestas > span,
    #apuestas-iniciales .resumen-apuestas > div > span {
        font-size: 10px !important;
    }

    #apuestas-iniciales .saldo-apuestas strong {
        font-size: 22px !important;
    }

    #apuestas-iniciales .resumen-apuestas strong {
        font-size: 15px !important;
    }

    #apuestas-iniciales .apuestas-cabecera-derecha .reiniciar-apuestas {
        font-size: 10px !important;
        padding: 5px 7px !important;
    }

    #apuestas-iniciales #subtitulo-apuestas {
        font-size: 13px !important;
    }
}

#suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) {
    width: min(1050px, 88vw) !important;
    height: 94dvh !important;
    max-height: 94dvh !important;
}

@media (min-width: 769px) {
    #suministros-iniciales:has(#apuestas-iniciales:not(.oculto)) {
        width: min(1050px, 88vw) !important;
        height: 94dvh !important;
        max-height: 94dvh !important;
    }
}

/* ==========================================
   APUESTAS — IGUALAR DISPONIBLE Y APOSTADO
========================================== */

#apuestas-iniciales .saldo-apuestas > span,
#apuestas-iniciales .resumen-apuestas > div > span:not(#total-apostado) {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #aaa !important;
    line-height: 1.2 !important;
}

#apuestas-iniciales .saldo-apuestas strong,
#apuestas-iniciales .resumen-apuestas strong {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}

/* MÓVIL */
@media (max-width: 768px) {

    #apuestas-iniciales .saldo-apuestas > span,
    #apuestas-iniciales .resumen-apuestas > div > span:not(#total-apostado) {
        font-size: 12px !important;
    }

    #apuestas-iniciales .saldo-apuestas strong,
    #apuestas-iniciales .resumen-apuestas strong {
        font-size: 19px !important;
    }
}

/* APUESTAS — SEPARAR PREMIO DE BOTONES EN MÓVIL */
@media (max-width: 768px) {

    #apuestas-iniciales .premio-potencial {
        position: relative !important;
        top: 6px !important;
    }
}

/* APUESTAS — IGUALAR SALDOS EN DESKTOP */
@media (min-width: 769px) {

    #apuestas-iniciales .apuestas-dinero
    .saldo-apuestas > span,

    #apuestas-iniciales .apuestas-dinero
    .resumen-apuestas > div > span {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        color: #aaa !important;
    }

    #apuestas-iniciales .apuestas-dinero
    .saldo-apuestas > strong,

    #apuestas-iniciales .apuestas-dinero
    .resumen-apuestas > div > strong {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        color: #fff !important;
    }
}


/* IGUALAR TAMAÑO REAL DE LOS SALDOS */

/* Desktop */
@media (min-width: 769px) {
    #apuestas-iniciales #saldo-apuestas,
    #apuestas-iniciales #total-apostado {
        font-size: 24px !important;
        font-weight: 700 !important;
    }
}

/* Móvil */
@media (max-width: 768px) {
    #apuestas-iniciales #saldo-apuestas,
    #apuestas-iniciales #total-apostado {
        font-size: 19px !important;
        font-weight: 700 !important;
    }
}

/* APUESTAS — ALINEACIÓN DE SALDOS EN DESKTOP */
@media (min-width: 769px) {

    #apuestas-iniciales .apuestas-dinero .saldo-apuestas,
    #apuestas-iniciales .apuestas-dinero .resumen-apuestas,
    #apuestas-iniciales .apuestas-dinero .resumen-apuestas > div:not(.reserva-apoyo-oculta) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #apuestas-iniciales .apuestas-dinero .saldo-apuestas > span,
    #apuestas-iniciales .apuestas-dinero .resumen-apuestas > div > span {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #apuestas-iniciales .apuestas-dinero .saldo-apuestas > strong,
    #apuestas-iniciales .apuestas-dinero .resumen-apuestas > div > strong {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #apuestas-iniciales #saldo-apuestas,
    #apuestas-iniciales #total-apostado {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: inherit !important;
    }
}

/* ==========================================
   PORTADA — SELECTOR DE IDIOMA
========================================== */

.portada-idiomas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
}

.portada-idiomas button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 6px;
    font-size: 26px;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0.45;
    filter: grayscale(60%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.portada-idiomas button:hover {
    opacity: 1;
    filter: none;
}

.portada-idiomas button.activo {
    opacity: 1;
    filter: none;
    border-bottom: 2px solid #ff3b83;
}