/* ============================================================================
   TRRANU · apps.css  ·  Pop de APPS y pop de INFO
   ----------------------------------------------------------------------------
   Ventana flotante con tarjetas (icono + nombre) que sustituye:
     · a las 8 opciones que antes colgaban del menu de la foto de perfil
     · a la gaveta que salia al tocar el boton Info

   Se carga la ULTIMA de todas las hojas, asi que no puede pisar nada de las
   anteriores. Todas las clases empiezan por "apps" para que no choquen con
   ninguna regla existente del proyecto.
   ============================================================================ */

/* ---------- Fondo oscurecido ---------- */
.appsOv{
    position:fixed; inset:0; z-index:100000;
    background:rgba(15,23,42,.45);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; padding:18px;
}
.appsOv.show{ display:flex; }

/* ---------- Panel blanco ---------- */
.appsPanel{
    background:#fff; border-radius:22px; width:100%; max-width:470px;
    max-height:86vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 24px 60px rgba(15,23,42,.28);
    animation:appsIn .18s cubic-bezier(.2,.8,.2,1);
    font-family:'Poppins','Segoe UI',Arial,sans-serif;
}
@keyframes appsIn{ from{opacity:0;transform:translateY(14px) scale(.97);} to{opacity:1;transform:none;} }

/* ---------- Cabecera ---------- */
.appsHead{
    display:flex; align-items:center; justify-content:space-between;
    padding:19px 20px 13px; position:sticky; top:0; background:#fff; z-index:2;
    border-radius:22px 22px 0 0;
}
.appsHead h3{
    margin:0; font-size:12.5px; font-weight:800; letter-spacing:1.6px; color:#0f172a;
}
.appsX{
    background:none; border:none; cursor:pointer; padding:0;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    color:#60a5fa; border-radius:50%; transition:background .15s,color .15s;
}
.appsX:hover{ background:#eff6ff; color:#2563eb; }
.appsX svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; }

/* ---------- Separador de seccion ---------- */
.appsSecT{
    text-align:center; font-size:10px; font-weight:800; letter-spacing:1.5px;
    color:#94a3b8; margin:6px 0 12px; position:relative;
}
.appsSecT::before,.appsSecT::after{
    content:''; position:absolute; top:50%; height:1px; background:#e8ecf3; width:calc(50% - 46px);
}
.appsSecT::before{ left:16px; }
.appsSecT::after{ right:16px; }

/* ---------- Rejilla de tarjetas ---------- */
.appsGrid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    padding:0 16px 16px;
}
.appsCard{
    /* Fondo morado claro, tomado del mismo malva del fondo de pantalla
       (--fondo-malva: #FBFAFF -> #EDE8FC -> #CFC3F2), para que las tarjetas
       pertenezcan visualmente a la app y no parezcan pegadas encima. */
    background:#F3EFFD; border:1px solid #DDD3F6; border-radius:15px;
    padding:15px 6px 12px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    transition:border-color .15s, box-shadow .15s, transform .12s;
    font-family:inherit; text-align:center;
}
.appsCard:hover{
    background:#EAE3FB; border-color:#C4B5F0;
    box-shadow:0 6px 18px rgba(79,70,229,.12); transform:translateY(-2px);
}
.appsCard:active{ transform:scale(.96); }
.appsCard svg{ width:30px; height:30px; display:block; flex-shrink:0; }
.appsCard span{
    font-size:11.5px; font-weight:700; color:#334155; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ---------- Pantallas estrechas ---------- */
@media (max-width:400px){
    .appsGrid{ gap:8px; padding:0 12px 14px; }
    .appsCard{ padding:13px 4px 10px; border-radius:13px; }
    .appsCard svg{ width:27px; height:27px; }
    .appsCard span{ font-size:10.5px; }
    .appsHead{ padding:16px 16px 11px; }
}