/* ============================================
   CSS: logros.css — Olemurcia
   Componente: Logros modulo
   ============================================ */

    /* ---------- Logros module ---------- */

    .logros-tabs{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:20px;
        container-type:inline-size;
        container-name:logros-tabs;
    }

    .logros-tab{
        flex:1 1 auto;
        min-width:104px;
        padding:10px;
        text-align:center;
        background:rgba(255,255,255,.04);
        border:1px solid var(--borde);
        border-radius:var(--radio);
        color:var(--texto);
        cursor:pointer;
        font-size:13px;
        transition:.2s;
    }

    .logros-tab-ico{
        white-space:nowrap;
    }

    .logros-tab-nombre{
        margin-left:4px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }

    .logros-tab:hover{
        background:rgba(255,255,255,.08);
    }

    .logros-tab.activo{
        background:rgba(125,217,255,.10);
        border-color:rgba(125,217,255,.35);
        color:#7dd9ff;
    }

    .logros-dashboard{
        max-width:500px;
        container-type:inline-size;
        container-name:logros-dashboard;
    }

    /* Modo compacto: cuando el ancho real de las pestañas no alcanza
       para los nombres, se ocultan los nombres (salvo el de la activa)
       y se vuelve a una sola fila de iconos. */
    @container logros-tabs (max-width: 430px){
        .logros-tabs{
            flex-wrap:nowrap;
        }
        .logros-tab-nombre{
            display:none;
        }
        .logros-tab.activo .logros-tab-nombre{
            display:inline;
        }
        .logros-tab{
            min-width:0;
            padding-left:6px;
            padding-right:6px;
        }
        .tema-minecraft .logros-tab{
            padding-left:8px !important;
            padding-right:8px !important;
        }
    }

    /* Apilado del contenido cuando el panel Logros está muy estrecho */
    @container logros-dashboard (max-width: 380px){
        .logros-header{
            flex-direction:column;
            text-align:center;
            gap:10px;
        }
        .logros-personaje,
        .logros-logro{
            flex-wrap:wrap;
        }
        .logros-claim div[style*="display:flex"],
        .logros-seccion > div[style*="display:flex"]{
            flex-direction:column !important;
            align-items:stretch !important;
        }
        .logros-claim div[style*="display:flex"] input,
        .logros-claim div[style*="display:flex"] button,
        .logros-seccion > div[style*="display:flex"] input,
        .logros-seccion > div[style*="display:flex"] button{
            width:100% !important;
        }
        .logros-dashboard{
            padding:12px;
        }
    }

    .logros-header{
        display:flex;
        align-items:center;
        gap:16px;
        margin-bottom:20px;
        padding:20px;
        background:var(--superficie);
        border:1px solid var(--borde);
        border-radius:var(--radio);
    }

    .logros-avatar{
        width:52px; height:52px;
        border-radius:14px;
        background:rgba(255,255,255,.08);
        display:flex; align-items:center; justify-content:center;
        font-size:24px;
    }

    .logros-seccion{
        margin-bottom:20px;
        padding:18px;
        background:var(--superficie);
        border:1px solid var(--borde);
        border-radius:var(--radio);
    }

    .logros-seccion h3{
        margin-bottom:12px;
        font-size:15px;
    }

    .logros-personaje{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px;
        border-bottom:1px solid var(--borde);
    }

    .logros-personaje:last-child{
        border-bottom:none;
    }

    .logros-pj-nick{
        font-weight:bold;
    }

    .logros-pj-votos{
        color:var(--difuso);
        font-size:12px;
        margin-left:auto;
    }

    .logros-claim{
        padding:12px;
        background:rgba(255,200,50,.06);
        border:1px solid rgba(255,200,50,.2);
        border-radius:var(--radio);
        margin-bottom:8px;
    }

    .logros-sugerencia{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px;
        background:rgba(74,222,128,.05);
        border:1px solid rgba(74,222,128,.15);
        border-radius:var(--radio);
        margin-bottom:8px;
    }

    .logros-logout{
        width:100%;
        margin-top:16px;
        padding:12px;
        background:rgba(239,68,68,.1);
        border:1px solid rgba(239,68,68,.25);
        border-radius:var(--radio);
        color:#ef4444;
        cursor:pointer;
        font-size:14px;
        transition:.2s;
    }

    .logros-logout:hover{
        background:rgba(239,68,68,.18);
    }

    .logros-logro{
        display:flex;
        align-items:center;
        gap:10px;
        padding:12px;
        border-bottom:1px solid var(--borde);
    }

    .logros-logro:last-child{
        border-bottom:none;
    }

    .logros-logro.completado{
        background:rgba(74,222,128,.04);
    }

    .logros-logro.completado-reclamado{
        opacity:.6;
    }

    .logros-logro.pendiente{
        opacity:.5;
    }

    .logros-countdown{
        font-size:12px;
        font-family:Consolas,monospace;
    }