/* ============================================================================
   Ajwebx — Menú de aplicaciones v1.2 (overlay del catálogo de apps)
   Archivo: css/class/menu-apps-v-1.2.css
   Creado:  2026-11-01
   Requiere: css/tokens/aj-tokens-v-1.0.css
   Origen:  estilos de #cont-menu-apps en base-{plataforma}-v-2.x.css
   Alcance: SOLO el overlay #main-app-menu y sus tarjetas.

   Nota de especificidad: en la BASE estos estilos están anidados dentro de
   `main { … }`, así que todas las reglas de este archivo se prefijan con
   `#main-app-menu` para poder sobrescribirlos sin !important.

   Nota de rendimiento: el overlay ocupa casi toda el área de trabajo, así que
   NO usa backdrop-filter (sería un desenfoque de pantalla completa). El vidrio
   se consigue con superficie casi opaca + borde + sombra.

   DOM que genera base-{plataforma}.js (clase menu):

   <div class="main-app" id="main-app-menu">
       <div id="cont-menu-apps">
           <div class="cabecera-menu-apps">
               <p class="textoBold tCen">Menú aplicaciones</p>
               <button class="btn-null">…cerrar…</button>
           </div>
           <div id="cont-lista-categorias-apps">
               <div class="cont-categoria-apps">
                   <p>Categoría</p>
                   <div class="cont-lista-menu-apps">
                       <button class="btn-app"><svg…/><span>Nombre</span></button>
                       <div class="cont-comodin-apps-1"></div> …
                   </div>
               </div>
           </div>
       </div>
   </div>
   ============================================================================ */

#main-app-menu
{
    padding: 8px;
    background-color: rgba(244, 247, 251, .10);
}

/* Tarjeta flotante que contiene todo el menú */
#main-app-menu #cont-menu-apps
{
    inset: 0;
    width: auto;
    height: auto;
    max-width: 980px;
    margin-inline: auto;

    background-color: rgba(255, 255, 255, .32);
    background-image:
        /* más opaco arriba (cabecera y buscador), más transparente en el cuerpo */
        linear-gradient(180deg, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, .15) 150px, rgba(255, 255, 255, 0) 230px),
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(1, 116, 223, .045), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(133, 193, 233, .10), transparent 60%);
    -webkit-backdrop-filter: blur(10px) saturate(var(--aj-sat, 140%));
    backdrop-filter:         blur(10px) saturate(var(--aj-sat, 140%));
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-xl, 18px);
    box-shadow:
        0 24px 64px rgba(2, 32, 71, .14),
        0 2px 6px rgba(2, 32, 71, .06),
        var(--aj-edge, inset 0 1px 0 rgba(255, 255, 255, .75));

    padding: 14px 18px;
}

/* Cabecera */
#main-app-menu .cabecera-menu-apps
{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 12px 10px;
    border-bottom: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    position: relative;
}
#main-app-menu .cabecera-menu-apps > p
{
    font-family: textoB, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    color: var(--aj-ink, #1B2735);
}
#main-app-menu .cabecera-menu-apps > button
{
    position: absolute;
    right: 8px;
    top: 0;
}

/* Contenedor con scroll */
#main-app-menu #cont-lista-categorias-apps
{
    width: 100%;
    height: calc(100% - 100px);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, .18) transparent;
}

/* Categoría */
#main-app-menu .cont-categoria-apps
{
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#main-app-menu .cont-categoria-apps > p
{
    padding-left: 4px;
    font-family: textoB, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aj-ink-2, #4A5A6E);
}

#main-app-menu .cont-lista-menu-apps
{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    overflow: hidden;
    padding-bottom: 4px;
}

/* Tarjeta de aplicación */
#main-app-menu .btn-app
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    width: 100px;
    height: auto;
    min-height: 100px;
    padding: 12px 6px 10px;

    background: #FFFFFF;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-lg, 14px);
    box-shadow: var(--aj-sh1, 0 1px 2px rgba(2, 32, 71, .06));

    cursor: pointer;
    transition: transform var(--aj-t1, 120ms) var(--aj-ease, ease),
                box-shadow var(--aj-t1, 120ms) var(--aj-ease, ease),
                background-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}

#main-app-menu .btn-app svg
{
    width: 40px;
    height: 40px;
    fill: var(--aj-accent, #0174DF);
    transition: fill var(--aj-t1, 120ms) var(--aj-ease, ease);
}

/* Etiqueta: dos líneas como máximo, sin cortar a la primera palabra */
#main-app-menu .btn-app span
{
    position: static;
    width: 100%;
    top: auto;

    font-family: textoL, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    color: var(--aj-ink, #1B2735);
    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#main-app-menu .btn-app:hover
{
    transform: translateY(-2px);
    background-color: #FFFFFF;
    box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08));
}
#main-app-menu .btn-app:hover svg {fill: var(--aj-link, #0B4F9E);}

#main-app-menu .btn-app:focus-visible
{
    outline: none;
    box-shadow: var(--aj-focus, 0 0 0 2px #FFF, 0 0 0 4px #0B4F9E);
}

/* Los comodines alinean la última fila; conservan el ancho de la tarjeta */
#main-app-menu .cont-comodin-apps-1,
#main-app-menu .cont-comodin-apps-2,
#main-app-menu .cont-comodin-apps-3,
#main-app-menu .cont-comodin-apps-4,
#main-app-menu .cont-comodin-apps-5,
#main-app-menu .cont-comodin-apps-6
{
    width: 100px;
}

/* ----------------------------------------------------------------------------
   Buscador de aplicaciones
   ---------------------------------------------------------------------------- */
#main-app-menu .cont-buscador-apps
{
    width: 100%;
    max-width: 560px;
    padding: 10px 12px 2px;
}

#main-app-menu .buscador-apps
{
    position: relative;
    display: flex;
    align-items: center;
}

#main-app-menu .buscador-apps .icono-busqueda
{
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    fill: var(--aj-ink-2, #4A5A6E);
    pointer-events: none;
}

#main-app-menu #input-buscar-apps
{
    width: 100%;
    height: 38px;
    padding: 0 40px;
    border: 1px solid var(--aj-line-strong, rgba(15, 23, 42, .14));
    border-radius: var(--aj-r-md, 10px);
    background-color: #FFFFFF;
    font-family: textoR, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 13.5px;
    color: var(--aj-ink, #1B2735);
}
#main-app-menu #input-buscar-apps::placeholder
{
    color: var(--aj-ink-3, #5E7085);
}
#main-app-menu #input-buscar-apps:focus
{
    outline: none;
    border-color: var(--aj-link, #0B4F9E);
    box-shadow: var(--aj-focus, 0 0 0 2px #FFF, 0 0 0 4px #0B4F9E);
    background-color: #FFFFFF;
}

#main-app-menu #btn-limpiar-busqueda
{
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--aj-r-pill, 999px);
}
#main-app-menu #btn-limpiar-busqueda:hover
{
    background-color: rgba(15, 23, 42, .06);
}
#main-app-menu #btn-limpiar-busqueda svg
{
    width: 16px;
    height: 16px;
}

/* ----------------------------------------------------------------------------
   Resultados
   ---------------------------------------------------------------------------- */
#main-app-menu .cont-resultados-apps
{
    display: none;
    flex-direction: column;
    gap: 6px;

    width: 100%;
    max-width: 700px;
    height: calc(100% - 100px);
    padding: 8px 12px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, .18) transparent;
}

#main-app-menu #cont-menu-apps.buscando .cont-resultados-apps {display: flex;}
#main-app-menu #cont-menu-apps.buscando #cont-lista-categorias-apps {display: none;}

#main-app-menu .resumen-busqueda
{
    margin: 2px 4px 6px;
    font-family: textoL, system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aj-ink-3, #5E7085);
}

#main-app-menu .resumen-busqueda.vacio
{
    padding: 28px 0 10px;
    text-align: center;
    letter-spacing: .05em;
}

#main-app-menu .resultado-app
{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;

    background-color: #FFFFFF;
    border: 1px solid var(--aj-line, rgba(15, 23, 42, .08));
    border-radius: var(--aj-r-md, 12px);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--aj-t1, 120ms) var(--aj-ease, ease),
                border-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}
#main-app-menu .resultado-app:hover
{
    background-color: var(--aj-accent-soft, #E3F0FC);
    border-color: rgba(1, 116, 223, .25);
}
#main-app-menu .resultado-app:focus-visible
{
    outline: none;
    box-shadow: var(--aj-focus, 0 0 0 2px #FFF, 0 0 0 4px #0B4F9E);
}

#main-app-menu .resultado-icono
{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
#main-app-menu .resultado-icono svg
{
    width: 24px;
    height: 24px;
    fill: var(--aj-accent, #0174DF);
}

#main-app-menu .resultado-nombre
{
    flex: 1;
    min-width: 0;
    font-family: textoR, system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--aj-ink, #1B2735);
}

#main-app-menu .resultado-categoria
{
    flex: none;
    font-family: textoL, system-ui, sans-serif;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--aj-ink-3, #5E7085);
}

@media screen and (max-width: 900px)
{
    #main-app-menu #cont-menu-apps
    {
        background-color: rgba(255, 255, 255, .90);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}