/*
 * Sunshine Liquid Glass - acabado del tema
 * ---------------------------------------------------------------------------
 * Esta hoja no dibuja las superficies (eso es glassliquid-integration.css);
 * aqui esta el "look" del tema a nivel de componentes, siguiendo las recetas
 * de la guia Kyant / AndroidLiquidGlass (new-repos/AndroidLiquidGlass):
 *
 *   - contenedor de pestañas: capa translucida (#FAFAFA 40%) con borde suave
 *   - indicador de pestaña activa: píldora clara sobre el vidrio
 *   - botones: capsula, con highlight interior 45 grados (white .38-.5) y
 *     sombra suave exterior; el botón primario conserva su color de marca,
 *     que pasa a ser el "tinte acento"
 *   - inputs y buscador: vidrio, nunca el gris plano #F2F2F2 de Sunshine
 *   - fondo aurora sutil a pantalla completa, para que las capas de
 *     refracción del motor tengan gradiente sobre el que doblar la luz
 *
 * Si no te gusta el fondo aurora, borra el bloque "fondo" (solo afecta a
 * body.liquidglass-on::after). El resto del tema no depende de el.
 * El aurora vive en ::after a proposito: el fondo administrable del sitio
 * (Change Site Design) usa body::before, y ::before pinta debajo de ::after,
 * asi la foto queda bajo los destellos de luz.
 * ======================================================================== */

:root {
    --lg-accent: var(--main-color, #409eff);
    --lg-radius-card: 28px; /* como la card de referencia (#play-glass) */
    --lg-radius-field: 12px;
    /* Resplandor Blanco (receta 7.css .title-bar-text: 8x 0 0 10px).
       Letra oscura -> aura blanca; letra blanca -> aura oscura. */
    --lg-glow-white:
        0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,
        0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    --lg-glow-dark:
        0 0 10px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.85),
        0 0 10px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.85);
}

/* --- Fondo aurora (sutil, opcional) ------------------------------------------ */
body.liquidglass-on::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 12% -8%, rgba(255, 196, 122, 0.20), transparent 60%),
        radial-gradient(900px 620px at 92% 4%, rgba(120, 176, 255, 0.18), transparent 62%),
        radial-gradient(1000px 800px at 78% 96%, rgba(255, 138, 176, 0.14), transparent 64%);
}

/* --- Botones: capsula liquid-glass ------------------------------------------- */
body.liquidglass-on .btn-main,
body.liquidglass-on .btn-active,
body.liquidglass-on .btn-login,
body.liquidglass-on .btn-register,
body.liquidglass-on .wo_following_btn {
    border-radius: 999px;
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -6px 12px rgba(0, 0, 0, 0.10);
    transition:
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

body.liquidglass-on .btn-main:hover,
body.liquidglass-on .btn-active:hover,
body.liquidglass-on .btn-login:hover,
body.liquidglass-on .btn-register:hover,
body.liquidglass-on .wo_following_btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px -8px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -6px 12px rgba(0, 0, 0, 0.12);
}

body.liquidglass-on .btn-default:not(.btn-main),
body.liquidglass-on .btn-mat:not(.btn-main) {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    border-color: var(--lg-glass-border);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--lg-glass-highlight);
}

/* --- Legibilidad: boton claro => texto azul oscuro ---------------------------
   En este tema hay botones que quedan con fondo claro (los neutros de vidrio
   de arriba y el Compartir del publisher, que Sunshine pinta lavado cuando el
   textarea esta vacio). El texto blanco de marca sobre fondo claro no se lee,
   asi que estos llevan tipografia azul oscura siempre, tambien en :hover.
   Los .btn-main de marca (Inicio, Seguir...) NO se tocan: fondo azul solido
   con texto blanco, salvo deshabilitados, que tambien se lavan. */
body.liquidglass-on .btn-default:not(.btn-main),
body.liquidglass-on .btn-mat:not(.btn-main),
body.liquidglass-on .btn-main[disabled],
body.liquidglass-on .btn-main:disabled {
    color: #14365f;
}

body.liquidglass-on .wo_pub_txtara_combo .btn.btn-main,
body.liquidglass-on .wo_pub_txtara_combo .btn.btn-main:hover,
body.liquidglass-on .wo_pub_txtara_combo .btn.btn-main:focus {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    border: 1px solid var(--lg-glass-border);
    color: #14365f;
    box-shadow:
        0 6px 18px -6px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Pestañas: contenedor de vidrio + píldora activa ------------------------- */
body.liquidglass-on .nav-tabs {
    border-bottom: 1px solid var(--lg-glass-border);
}

body.liquidglass-on .nav-tabs > li > a {
    border-radius: 999px;
    border: none;
    margin: 2px;
    padding: 8px 16px;
}

body.liquidglass-on .nav-tabs > li.active > a,
body.liquidglass-on .nav-tabs > li.active > a:hover,
body.liquidglass-on .nav-tabs > li.active > a:focus {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    border: none;
    border-radius: 999px;
    box-shadow:
        0 4px 14px -6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Campos de texto: vidrio, sin el gris plano ------------------------------ */
body.liquidglass-on .search-container .search-input {
    background: rgba(255, 255, 255, 0.55) !important;
    color: #222 !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid var(--lg-glass-border);
    border-radius: var(--lg-radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.liquidglass-on .search-container .search-input:focus {
    border-color: var(--lg-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--lg-accent) 22%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.liquidglass-on .form-control {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--lg-glass-border);
    border-radius: var(--lg-radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.liquidglass-on .form-control:focus {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--lg-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--lg-accent) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Acciones del publisher: Resplandor Blanco, sin frost ----------------------
   Las etiquetas (subir imagen, gif, grabar voz...) van transparentes sobre
   el fondo: la legibilidad la da el aura, no un scrim esmerilado. */
body.liquidglass-on .sun_pub_mid_foot {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 20px;
    padding: 10px 8px 14px;
}

body.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    color: #14365f;
    font-weight: 500;
    text-shadow: var(--lg-glow-white);
}

body.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn:hover {
    color: #0f2a4d;
}

body.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn svg {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}

/* --- Resplandor Blanco (Text Glow estilo Aero/7.css) -----------------------------
   En lugar de esmerilar (frost) detras del texto, se dibuja un aura
   difuminada detras de los vectores de la fuente (sombreado inverso, como
   las barras de titulo de Windows 7 con Aero): letra oscura/gris -> aura
   blanca; letra blanca -> aura oscura. El aura es text-shadow puro (sin
   backdrop-filter): no muestrea el fondo, no gasta GPU como el blur y no
   deforma glifos. Utilidades .lg-glow-light/.lg-glow-dark para reusar. */
body.liquidglass-on .lg-glow-light {
    text-shadow: var(--lg-glow-white);
}

body.liquidglass-on .lg-glow-dark {
    text-shadow: var(--lg-glow-dark);
}

/* Glow por herencia (text-shadow se hereda): cubre nombre, verbo de
   actividad, hora, cuerpo, enlaces, stats, titulos de evento y fila de
   stats del perfil, sin enumerar cada micro-selector. */
body.liquidglass-on .post .post-heading .meta,
body.liquidglass-on .post .post-description,
body.liquidglass-on .profile-container .info,
body.liquidglass-on .footer-wrapper {
    text-shadow: var(--lg-glow-white);
}

/* De noche el texto es claro (dark.css): el aura se vuelve oscura. */
body.lg-night.liquidglass-on .post .post-heading .meta,
body.lg-night.liquidglass-on .post .post-description,
body.lg-night.liquidglass-on .profile-container .info,
body.lg-night.liquidglass-on .footer-wrapper {
    text-shadow: var(--lg-glow-dark);
}

/* Menus desplegables: vuelven al vidrio base del tema (transparente); con
   el fix de apilado de glassliquid-integration.css ya no quedan tras las
   cards, y el aura en sus textos los mantiene legibles sobre foto. */
body.liquidglass-on .dropdown-menu {
    text-shadow: var(--lg-glow-white);
}

body.lg-night.liquidglass-on .dropdown-menu {
    text-shadow: var(--lg-glow-dark);
}

/* Reacciones: sin aura en etiquetas ni tooltip (el pill oscuro ya da el
   contraste) y sin halo en los emojis. */
body.liquidglass-on .reactions-box,
body.liquidglass-on .reactions-box *,
body.liquidglass-on .reaction::before {
    text-shadow: none;
}

/* --- Modales en vidrio -------------------------------------------------------- */
body.liquidglass-on .modal-content {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(26px) saturate(1.7);
    backdrop-filter: blur(26px) saturate(1.7);
    border: 1px solid var(--lg-glass-border);
    border-radius: var(--lg-radius-card);
    box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.45);
}

/* --- Barra de escritura del chat --------------------------------------------- */
body.liquidglass-on .chat-tab .chat-textarea,
body.liquidglass-on .chat-tab .chat-textarea textarea {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--lg-glass-border);
    border-radius: var(--lg-radius-field);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* --- Modo nocturno de los componentes ---------------------------------------- */
body.lg-night.liquidglass-on .btn-default:not(.btn-main),
body.lg-night.liquidglass-on .btn-mat:not(.btn-main) {
    background: rgba(36, 41, 47, 0.7);
    border-color: rgba(255, 255, 255, 0.14);
}

/* De noche los fondos de vidrio son oscuros: el texto vuelve a claro. */
body.lg-night.liquidglass-on .btn-default:not(.btn-main),
body.lg-night.liquidglass-on .btn-mat:not(.btn-main),
body.lg-night.liquidglass-on .btn-main[disabled],
body.lg-night.liquidglass-on .btn-main:disabled {
    color: #e8f0f8;
}

body.lg-night.liquidglass-on .wo_pub_txtara_combo .btn.btn-main,
body.lg-night.liquidglass-on .wo_pub_txtara_combo .btn.btn-main:hover,
body.lg-night.liquidglass-on .wo_pub_txtara_combo .btn.btn-main:focus {
    background: rgba(44, 51, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8f0f8;
}

body.lg-night.liquidglass-on .nav-tabs > li.active > a,
body.lg-night.liquidglass-on .nav-tabs > li.active > a:hover,
body.lg-night.liquidglass-on .nav-tabs > li.active > a:focus {
    background: rgba(60, 68, 78, 0.8);
}

body.lg-night.liquidglass-on .search-container .search-input,
body.lg-night.liquidglass-on .form-control,
body.lg-night.liquidglass-on .chat-tab .chat-textarea,
body.lg-night.liquidglass-on .chat-tab .chat-textarea textarea {
    background: rgba(36, 41, 47, 0.72);
    color: #dbe4ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.lg-night.liquidglass-on .modal-content {
    background: rgba(30, 37, 43, 0.86);
    color: #c1d4e3;
}

body.lg-night.liquidglass-on .form-control:focus,
body.lg-night.liquidglass-on .search-container .search-input:focus {
    background: rgba(44, 51, 59, 0.85);
    color: #eaf1f7;
}

body.lg-night.liquidglass-on .sun_pub_mid_foot {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.lg-night.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #e8f0f8;
    text-shadow: var(--lg-glow-dark);
}

body.lg-night.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn:hover {
    color: #ffffff;
}

/* --- Frost de accesibilidad ----------------------------------------------------
   Equivalente web al "Reducir transparencia" del sistema: si el usuario lo
   pide (o exige mas contraste), el vidrio se vuelve casi opaco y el blur
   cae al minimo. El texto queda sobre panel plano esmerilado, no sobre el
   fondo vivo. Incluye a .lg-host (anfitriones con motor montado): con fondo
   opaco la refraccion del hijo queda tapada y solo aporta un leve brillo,
   que es justo el efecto buscado. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body.liquidglass-on .navbar-fixed-top.navbar-default,
    body.liquidglass-on .wow_content,
    body.liquidglass-on .post .panel,
    body.liquidglass-on .rightcol .list-group,
    body.liquidglass-on .dropdown-menu,
    body.liquidglass-on .modal-content,
    body.liquidglass-on .sun_pub_mid_foot,
    body.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn,
    body.liquidglass-on .btn-default:not(.btn-main),
    body.liquidglass-on .btn-mat:not(.btn-main),
    body.liquidglass-on .form-control,
    body.liquidglass-on .search-container .search-input,
    body.liquidglass-on .lg-host {
        background: rgba(255, 255, 255, 0.93) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        backdrop-filter: blur(4px) !important;
        color: #16283c;
    }

    body.lg-night.liquidglass-on .navbar-fixed-top.navbar-default,
    body.lg-night.liquidglass-on .wow_content,
    body.lg-night.liquidglass-on .post .panel,
    body.lg-night.liquidglass-on .rightcol .list-group,
    body.lg-night.liquidglass-on .dropdown-menu,
    body.lg-night.liquidglass-on .modal-content,
    body.lg-night.liquidglass-on .sun_pub_mid_foot,
    body.lg-night.liquidglass-on .sun_pub_mid_foot .poster-left-buttons .btn,
    body.lg-night.liquidglass-on .btn-default:not(.btn-main),
    body.lg-night.liquidglass-on .btn-mat:not(.btn-main),
    body.lg-night.liquidglass-on .form-control,
    body.lg-night.liquidglass-on .search-container .search-input,
    body.lg-night.liquidglass-on .lg-host {
        background: rgba(24, 30, 36, 0.95) !important;
        color: #eef4fa;
    }
}