﻿/* ============================================
   CSS: theme-minecraft.css — Olemurcia
   Componente: Tema Minecraft completo
   ============================================ */

    /* === TEMA MINECRAFT (clon menú juego) === */
    @font-face{
        font-family:'Minecraft';
        src:url('../fonts/Minecraft-font.otf');
    }
    @font-face{
        font-family:'Regular';
        src:url('../fonts/Acumin.otf');
    }
    @font-face{
        font-family:'Bold';
        src:url('../fonts/Acumin-Bold.otf');
    }

    .tema-minecraft{
        --fondo:#000;
        --superficie:rgba(0,0,0,.7);
        --borde:rgba(255,255,255,.15);
        --texto:#fff;
        --difuso:#aaa;
        --mc-btn-w:clamp(280px, 45vw, 500px);
    }

    /* ── Fondo: panorama cubemap WebGL.
           Sustituye al antiguo paneado (mainbg.png + animación mmb-anim).
           El <canvas> lo crea e inyecta el JS, únicamente si body.tema-minecraft.
           Negro mientras el panorama carga / si WebGL no está disponible. ── */
    .tema-minecraft .fondo{
        background:#000;
        inset:0;
        width:100vw;
    }
    .tema-minecraft .fondo canvas.olemurcia-panorama{
        position:fixed;
        inset:0;
        width:100%;
        height:100%;
        z-index:0;
        pointer-events:none;
        display:block;
    }

    /* Mobile: sin bordes laterales */
    .tema-minecraft .contenedor{
        border:none;
        padding:0;
    }

    /* ── Capa: blur fijo sobre el fondo, 100% viewport ── */
    .tema-minecraft .mcsplashscreen{
        position:fixed;
        inset:0;
        width:100vw;
        height:100vh;
        font-family:'Minecraft' !important;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        align-items:center;
        backdrop-filter:blur(4px);
        -webkit-backdrop-filter:blur(4px);
        background:transparent;
        z-index:2;
    }

    /* ── Ventana oscura: fondo a todo el ancho (hasta los bordes).
           Alto fijo: ocupa todo el alto libre de pantalla (entre título y footer),
           por lo que el hueco inferior es el mismo en todas las páginas.
           El contenido sobrante hace scroll DENTRO de la ventana. ── */
    .tema-minecraft .mcsplashscreen .content{
        width:100%;
        flex:1;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        background:rgba(0,0,0,.75);
        text-align:center;
        color:#ccc;
        padding:clamp(16px, 4vw, 30px) clamp(12px, 3vw, 20px);
        box-sizing:border-box;
        border-radius:0;
        position:relative;
        z-index:1;
    }

    /* ── Contenido interior: max 800px centrados.
           El fondo (.content) se queda a ancho completo tocando los bordes.
           Solo el primer nivel se centra con margen; el resto hereda el ancho. ── */
    .tema-minecraft .mcsplashscreen .content > *{
        max-width:800px;
        margin-left:auto;
        margin-right:auto;
    }
    .tema-minecraft .mcsplashscreen .content *{
        max-width:800px;
    }

    /* ── Footer: franja translúcida con borde sutil ── */
    .tema-minecraft .mcsplashscreen footer{
        position:relative;
        z-index:1;
        width:100%;
        max-width:800px;
        box-sizing:border-box;
        text-align:center;
        border-top:1px solid rgba(255,255,255,.08);
        padding:16px 0;
        margin:0 auto;
    }

    /* Botón "← Volver": bloque de ancho contenido, centrado dentro del footer */
    .tema-minecraft .mcsplashscreen footer .mc-lonely{
        margin:0 auto;
    }

    /* Modales: backdrop 100% viewport, contenido max-width 800px centrado */
    body.tema-minecraft .login-tarjeta,
    body.tema-minecraft .registro-tarjeta{
        max-width:800px !important;
        width:100% !important;
    }
    body.tema-minecraft .recurso-modal{
        backdrop-filter:blur(4px) !important;
        -webkit-backdrop-filter:blur(4px) !important;
        background:rgba(0,0,0,.75) !important;
    }
    body.tema-minecraft .recurso-modal-caja{
        max-width:800px !important;
        width:100% !important;
    }

    @keyframes mmb-anim{
        0%{background-position-x:left;}
        50%{background-position-x:right;}
        100%{background-position-x:left;}
    }

    @keyframes mcmy-scale{
        0%{transform:translateY(var(--mc-ty, -50%)) scale(1);}
        50%{transform:translateY(var(--mc-ty, -50%)) scale(1.26);}
        100%{transform:translateY(var(--mc-ty, -50%)) scale(1);}
    }

    .tema-minecraft .mcm-titlebar{
        text-align:center;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:clamp(20px, 6vw, 70px) 0 clamp(10px, 3vw, 30px);
        position:relative; /* anclar el splash (subtítulo) al titlebar, no al banner */
    }

    .tema-minecraft .mcm-titlebar .gametitle{
        pointer-events:none;
        display:block;
        width:auto;
        height:clamp(50px, 12vw, 100px);
        /* Si se inyecta un style inline (ancho del banner), width/height
           inline anulan estas reglas para mostrar el banner a su tamaño. */
    }

    /* Envoltorio: posiciona el splash sobre el banner. No se anima.
       El tamaño del texto lo fija JS como % de la altura del banner. */
    .tema-minecraft .mcm-titlebar .mcm-splash-wrap{
        position:absolute;
        top:50%;
        right:max(4vw, 20px);
        transform:translateY(-50%);
        --mc-ty:-50%;
        animation:mcmy-scale 2.5s ease-in-out infinite;
        z-index:2;
        pointer-events:none;
    }

    .tema-minecraft .mcm-titlebar .yellow{
        display:inline-block; /* transform no aplica sobre inline */
        font-family:'Minecraft';
        color:yellow;
        text-shadow:2px 2px 0 black;
        font-size:clamp(11px, 2.6vw, 26px);
        white-space:nowrap;
        transform:rotate(-20deg);
    }

    .tema-minecraft .mc-menu{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0;
        padding:clamp(30px, 8vw, 70px) 20px;
    }

    .tema-minecraft .mc-btn{
        display:block;
        width:var(--mc-btn-w);
        max-width:90vw;
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        color:white;
        text-decoration:none;
        padding:8px 24px;
        border:black 1px solid;
        font-family:'Minecraft';
        font-weight:lighter;
        text-shadow:1.5px 1.5px 0 black;
        text-transform:uppercase;
        font-size:16px;
        line-height:1.1;
        text-align:center;
        box-sizing:border-box;
        margin:3px 0;
    }

    .tema-minecraft .mc-btn:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    /* Normaliza <button> (p.ej. SALIR) para que se vea idéntico a los <a> del
       menú: los navegadores aplican estilos propios a los botones por defecto. */
    .tema-minecraft button.mc-btn{
        appearance:none;
        -webkit-appearance:none;
        -moz-appearance:none;
        border:black 1px solid;
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        font-family:'Minecraft';
        font-weight:lighter;
        font-size:16px;
        text-transform:uppercase;
        text-shadow:1.5px 1.5px 0 black;
        line-height:normal;
        color:white;
        cursor:pointer;
        box-sizing:border-box;
    }

    /* Centra el contenido del botón SALIR (button.mc-half) como los <a>. */
    .tema-minecraft button.mc-half{
        flex:1;
        width:auto;
        max-width:none;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .tema-minecraft .hc{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:0;
        width:var(--mc-btn-w);
        max-width:90vw;
        margin:20px 0 4px;
        position:relative;
    }

    .tema-minecraft .mc-half{
        flex:1;
        width:auto;
        max-width:none;
        margin:0;
        padding:8px 24px;
    }

    .tema-minecraft .mc-mute{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:42px !important;
        height:42px;
        max-width:none !important;
        padding:0 !important;
        font-size:16px;
        line-height:1;
        flex-shrink:0;
        z-index:1;
        display:flex;
        align-items:center;
        justify-content:center;
        border:black 1px solid;
        box-sizing:border-box;
    }

    .tema-minecraft .mc-mute:first-child{
        right:calc(100% + 8px);
    }

    .tema-minecraft .mc-mute:last-child{
        left:calc(100% + 8px);
    }

    .tema-minecraft .mc-mcopy{
        color:white;
        opacity:0.7;
        font-family:'Minecraft';
        /* Fijo al pie del viewport, centrado en horizontal, para que no se
           eleve ni se desplace al reducir el tamaño de la pantalla. */
        position:fixed;
        bottom:6px;
        left:50%;
        transform:translateX(-50%);
        text-align:center;
        white-space:normal;
        max-width:96vw;
        font-size:14px;
        line-height:1.3;
        pointer-events:none;
        z-index:3;
    }

    /* El enlace "Acerca de.." del pie debe ser cliqueable (heredado de
       pointer-events:none del padre) y destacar sin romper el estilo. */
    .tema-minecraft .mc-mcopy .mc-credit-link{
        pointer-events:auto;
        color:#ffff62;
        text-decoration:underline;
    }

    .tema-minecraft .mcsplashscreen h1{
        font-family:'Minecraft';
        color:white;
        font-weight:lighter;
        text-shadow:3px 3px 0 #555;
        text-align:center;
        margin:0 auto;
        margin-top:40px;
        max-width:800px;
        width:100%;
        box-sizing:border-box;
        padding:0 12px;
    }


    .tema-minecraft .mcsplashscreen p{
        font-family:'Minecraft';
        font-weight:100;
        padding:0 20px;
        color:#ccc;
    }

    .tema-minecraft .mcsplashscreen strong{
        color:white;
    }

    .tema-minecraft .mcsplashscreen label{
        color:#aaa;
        text-align:left !important;
        width:100%;
        max-width:min(400px, 100%);
        display:block;
        margin:0 auto;
        position:relative;
        left:0;
    }

    .tema-minecraft .mcsplashscreen input{
        border:3px solid #bbb;
        padding:10px 15px 12px 15px;
        margin:5px 0;
        background-color:black;
        color:white;
        font-family:'Minecraft';
        font-size:16px;
        width:100%;
        box-sizing:border-box;
    }

    .tema-minecraft .mcsplashscreen .whitelist-card{
        background:transparent;
        border:none;
        border-radius:0;
        padding:0;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        box-shadow:none;
    }

    .tema-minecraft .mcsplashscreen .whitelist-card:hover{
        border-color:transparent;
    }

    .tema-minecraft .mcsplashscreen .whitelist-header{
        margin-bottom:16px;
    }

    .tema-minecraft .mcsplashscreen .whitelist-logo{
        display:none;
    }

    .tema-minecraft .mcsplashscreen .whitelist-header h2{
        font-family:'Minecraft';
        color:white;
        font-size:18px;
        text-shadow:1.5px 1.5px 0 #555;
    }

    .tema-minecraft .mcsplashscreen .whitelist-sub{
        color:#aaa;
        font-family:'Minecraft';
        font-size:13px;
    }

    .tema-minecraft .mcsplashscreen .whitelist-label span{
        font-family:'Minecraft';
        color:#ccc;
        font-size:12px;
    }

    .tema-minecraft .mcsplashscreen .whitelist-label input,
    .tema-minecraft .mcsplashscreen .whitelist-input{
        width:100%;
        padding:10px 14px;
        border:3px solid #bbb;
        background-color:black;
        color:white;
        font-family:'Minecraft';
        font-size:14px;
        border-radius:0;
        box-sizing:border-box;
        margin-bottom:10px;
        outline:none;
    }

    .tema-minecraft .mcsplashscreen .whitelist-label input:focus{
        box-shadow:none;
        border-color:#fff;
    }

    .tema-minecraft .mcsplashscreen .whitelist-btn{
        width:100%;
        max-width:min(400px, 100%);
        margin:4px auto 0;
        display:block;
        padding:14px 20px;
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        color:white;
        border:black 3px solid;
        font-family:'Minecraft';
        font-weight:lighter;
        text-shadow:1.5px 1.5px 0 black;
        text-transform:uppercase;
        font-size:16px;
        cursor:pointer;
        margin-top:4px;
    }

    .tema-minecraft .mcsplashscreen .whitelist-btn:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    .tema-minecraft .mcsplashscreen .whitelist-info{
        margin-top:16px;
    }

    .tema-minecraft .mcsplashscreen .whitelist-info ul{
        list-style:none;
        padding:0;
    }

    .tema-minecraft .mcsplashscreen .whitelist-info li{
        font-family:'Minecraft';
        font-size:12px;
        color:#aaa;
        padding:4px 0;
    }

    .tema-minecraft .mcsplashscreen .whitelist-resultado,
    .tema-minecraft .mcsplashscreen .whitelist-proceso{
        font-family:'Minecraft';
        font-size:13px;
        margin-top:10px;
        padding:10px;
        border-radius:0;
    }

    .tema-minecraft .mc-lonely{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        color:white;
        text-decoration:none;
        display:block;
        padding:12px;
        width:max-content;
        border:black 3px solid;
        font-family:'Minecraft';
        font-weight:lighter;
        text-shadow:1.5px 1.5px 0 black;
        text-align:center;
        cursor:pointer;
    }

    .tema-minecraft .mc-lonely:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    .tema-minecraft .grid-servidores{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .tema-minecraft .servidor-mc .btn-conectar{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        color:white;
        text-decoration:none;
        display:inline-block;
        padding:8px 14px;
        border:black 3px solid;
        font-family:'Minecraft';
        font-weight:lighter;
        text-shadow:1.5px 1.5px 0 black;
        text-transform:uppercase;
        font-size:12px;
        text-align:center;
        box-sizing:border-box;
    }

    .tema-minecraft .servidor-mc .btn-conectar:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    /* === BOTONES GENÉRICOS MINECRAFT === */
    .tema-minecraft .logros-tab{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        border:3px solid black;
        font-family:'Minecraft' !important;
        color:white;
        text-shadow:1.5px 1.5px 0 black;
        padding:10px 20px;
        cursor:pointer;
        border-radius:0;
    }
    .tema-minecraft .logros-tab:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }
    .tema-minecraft .logros-tab.activo{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    .tema-minecraft .btn-mini{
        background-image:url('../assets/minecraft/button-texture.png') !important;
        background-repeat:repeat-x !important;
        border:3px solid black !important;
        border-radius:0 !important;
        font-family:'Minecraft' !important;
        color:white !important;
        text-shadow:1.5px 1.5px 0 black !important;
        padding:8px 16px !important;
        cursor:pointer;
    }
    .tema-minecraft .btn-mini:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png') !important;
        color:#ffff9b !important;
    }

    .tema-minecraft .chip-recurso{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        border:3px solid black;
        font-family:'Minecraft';
        color:white;
        text-shadow:1.5px 1.5px 0 black;
        padding:8px 16px;
        cursor:pointer;
        border-radius:0;
    }
    .tema-minecraft .chip-recurso:hover,
    .tema-minecraft .chip-recurso.activo{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    .tema-minecraft .btn-pagina{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        border:3px solid black;
        font-family:'Minecraft';
        color:white;
        text-shadow:1.5px 1.5px 0 black;
        padding:8px 16px;
        cursor:pointer;
        border-radius:0;
    }
    .tema-minecraft .btn-pagina:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    .tema-minecraft .btn-descargar,
    .tema-minecraft .btn-descargar-ico{
        background-image:url('../assets/minecraft/button-texture.png') !important;
        background-repeat:repeat-x !important;
        border:3px solid black !important;
        border-radius:0 !important;
        font-family:'Minecraft' !important;
        color:white !important;
        text-shadow:1.5px 1.5px 0 black !important;
        padding:8px 16px !important;
        cursor:pointer;
    }
    .tema-minecraft .btn-descargar:hover,
    .tema-minecraft .btn-descargar-ico:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png') !important;
        color:#ffff9b !important;
    }

    .tema-minecraft .accion{
        background-image:url('../assets/minecraft/button-texture.png');
        background-repeat:repeat-x;
        border:3px solid black;
        font-family:'Minecraft';
        color:white;
        text-shadow:1.5px 1.5px 0 black;
        padding:6px 14px;
        cursor:pointer;
        border-radius:0;

        /* Botón alargado horizontal (como el menú principal del juego). */
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:8px;
        min-height:34px;
        min-width:0;
        width:100%;
        box-sizing:border-box;
    }
    .tema-minecraft .accion:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png');
        color:#ffff9b;
    }

    /* Grid de la sección de opciones: 2 columnas, ancho contenido centrado
       a la altura del portal (solo tema minecraft). */
    .tema-minecraft .acciones{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
        width:100%;
        max-width:480px;
        margin-left:auto;
        margin-right:auto;
    }

    /* En los botones alargados: icono y nombre en línea, sin el fondo de
       cuadro del genérico de actions.css. */
    .tema-minecraft .accion h3{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:8px;
        font-size:14px;
        margin:0;
    }
    .tema-minecraft .accion-icono{
        flex:none;
        width:auto;
        height:auto;
        background:none;
        border-radius:0;
        font-size:16px;
        line-height:1;
        padding:0;
        margin:0;
        overflow:visible;
    }
    .tema-minecraft .accion-icono img{
        width:16px;
        height:16px;
        object-fit:contain;
    }
    .tema-minecraft .accion-nombre{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:100%;
    }

    .tema-minecraft .btn.principal{
        background-image:url('../assets/minecraft/button-texture.png') !important;
        background-repeat:repeat-x !important;
        border:3px solid black !important;
        border-radius:0 !important;
        font-family:'Minecraft' !important;
        color:white !important;
        text-shadow:1.5px 1.5px 0 black !important;
        padding:12px 24px !important;
        cursor:pointer;
    }
    .tema-minecraft .btn.principal:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png') !important;
        color:#ffff9b !important;
    }

    .tema-minecraft .btn.rojo{
        background-image:url('../assets/minecraft/button-texture.png') !important;
        background-repeat:repeat-x !important;
        border:3px solid black !important;
        border-radius:0 !important;
        font-family:'Minecraft' !important;
        color:white !important;
        text-shadow:1.5px 1.5px 0 black !important;
        padding:12px 24px !important;
        cursor:pointer;
    }
    .tema-minecraft .btn.rojo:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png') !important;
        color:#ffff9b !important;
    }

    .tema-minecraft .btn.ancho{
        width:100%;
        box-sizing:border-box;
    }

    .tema-minecraft .mc-action{
        background-image:url('../assets/minecraft/button-texture.png') !important;
        background-repeat:repeat-x !important;
        border:3px solid black !important;
        border-radius:0 !important;
        font-family:'Minecraft' !important;
        color:white !important;
        text-shadow:1.5px 1.5px 0 black !important;
        padding:8px 16px !important;
        cursor:pointer;
    }
    .tema-minecraft .mc-action:hover{
        background-image:url('../assets/minecraft/button-texture-hover.png') !important;
        color:#ffff9b !important;
    }

    /* Ocultar sidebar desktop y hamburguesa en tema minecraft */
    .tema-minecraft .btn-hamburguesa{
        display:none !important;
    }
    @media(min-width:861px){
        .tema-minecraft .sidebar{
            display:none;
        }
    }

    /* Móvil: el splash (subtítulo) flota SOBRE el banner, en la esquina
       superior derecha y con tamaño reducido, para imitar el "Edition" del
       launcher de Minecraft sin tapar del todo el logo. */
      @media(max-width:700px){
          .tema-minecraft .mcm-titlebar .mcm-splash-wrap{
              top:50%;
              right:6px;
              transform:none;
              --mc-ty:0%;
          }
      }

      /* ── Marca de agua del panorama (Fase P7) ── */
      .tema-minecraft .fondo .olemurcia-panorama-marca{
          position:fixed;
          top:14px;
          right:16px;
          z-index:1;
          pointer-events:none;
          font-family:'Minecraft', monospace;
          font-size:13px;
          letter-spacing:1px;
          color:rgba(255,255,255,.85);
          text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,.9);
          background:rgba(0,0,0,.35);
          padding:4px 10px;
          border-radius:3px;
          opacity:0;
          transform:translateY(-6px);
          transition:opacity .5s ease, transform .5s ease;
      }
      .tema-minecraft .fondo .olemurcia-panorama-marca.olemurcia-panorama-marca-visible{
          opacity:1;
          transform:translateY(0);
      }
