/*
 * social-template.css — hoja del tema «Verbena» (módulo social_template).
 *
 * Vive DENTRO del módulo y el core la publica en public/assets/mod/social_template/
 * con el hash de su contenido al instalar o actualizar el módulo. Se declara en el
 * manifest como 'social_template::css/social-template.css' (docs/ESTILOS.md §4).
 *
 * El layout del core la carga DESPUÉS de app.css y ANTES del CSS de cada pantalla.
 * Ese orden lo fija Core\View\Renderer::stylesBlock() y no se decide desde aquí.
 *
 * ── La idea ──────────────────────────────────────────────────────────────────
 * La hora violeta de una verbena: cuando cae el sol y se encienden las bombillas.
 *
 * Es el reverso de «Grafito» en personalidad y el mismo sistema por debajo. Donde
 * Grafito quita —color, sombra, radio— para que la única cosa viva de la pantalla
 * sea la cara de una persona, Verbena **pone atmósfera en el marco**: papel lila,
 * cantos redondos, botones de píldora y una elevación blanda y teñida.
 * Lo que NO hace es subir la saturación: la foto sigue siendo lo más saturado de la
 * pantalla, que es el principio de docs/DISENO.md §11.1 y no se negocia. El lienzo
 * va a 5-7 % de croma; el acento, a 60 %.
 *
 * El acento es una violeta de verbena: la misma banda de tono que la paleta por
 * defecto —la única libre entre verde=ok, ámbar=aviso, azul=info y el rojo/rosa
 * vetado por §2.6.1— pero más clara, más viva y más caliente que el ciruela del
 * core (6,89:1 sobre blanco frente a 8,61:1). Elegir la banda no es una decisión
 * estética: es la que evita re-huear un semántico.
 *
 * ── Por qué el lienzo dejó de ser melocotón (2026-08-20) ─────────────────────
 * Hasta esta versión los neutros eran melocotón (#FFF7F2 / #F8EAE1, tono ~23°) con
 * el mismo acento violeta (288°). Tres motivos para retirarlo, ninguno de gusto:
 *
 *   1. 23° y 288° son casi complementarios. Dos familias de tono en la misma
 *      pantalla obligan al ojo a arbitrar, y el que pierde es el contenido: el
 *      marco se hacía notar por encima de la foto (§11.1). Con una sola familia
 *      —lienzo y acento comparten banda— el marco se calla y la foto manda.
 *   2. El melocotón es un salmón desaturado, o sea la vecindad de --error
 *      (#B02418, ~5°). No incumplía el veto de §2.6.1 —que va sobre el color de
 *      MARCA— pero teñía el lienzo entero con la temperatura de la única banda
 *      que el sistema necesita despejada para que «esto ha ido mal» se lea solo.
 *   3. Crema sobre blanco daba un escalón fondo→superficie de 1,06:1, tan corto
 *      que las tarjetas dependían por completo del borde. El lila lo lleva a
 *      1,09:1 —dentro del rango sutil de §2.1, que cita 1,07-1,08— sin subir
 *      croma ni oscurecer --superficie, que es lo que §2.1 prohíbe.
 *
 * La dirección completa, con su tabla de contrastes y su pareja más débil
 * declarada, está en apps/SocialTemplate/README.md.
 *
 * ── Por qué se redefine TODO, incluso lo que no cambia ───────────────────────
 * Un tema se SUPERPONE a app.css, no lo sustituye: un token de color que se olvide
 * se queda con el valor por defecto y no da ningún error — sale una pantalla
 * mestiza. Así que aquí está el contrato completo de docs/DISENO.md §5.a, y los
 * cuatro semánticos se repiten con su valor de siempre a propósito: un error tiene
 * que verse igual en toda la app, cambie el tema que cambie. Lo comprueba
 * tests/e2e/design.spec.js.
 *
 * ── El marco: cabecera y pie oscuros (0.3.0) ────────────────────────────────
 * Hasta 0.2.0 la cabecera y el pie eran papel blanco con un filete gris: la
 * forma de una web, no la de una app. Desde 0.3.0 son una banda violeta
 * profunda que enmarca el lienzo lila por arriba y por abajo, en LOS DOS
 * esquemas, con seis tokens propios (--marco-*) que no están en el contrato de
 * §5.a porque el sistema no le había puesto nombre a esa pieza. El porqué, con
 * su tabla de contrastes, está en README.md.
 *
 * Presupuesto: ≤9 KB efectivos para un tema que además reescribe componentes
 * (docs/DISENO.md §13). Va por 8,5 KB (8.716 B), medidos con el comando de §13
 * —eran 5,4 KB antes del marco—, o sea **menos de 0,5 KB de margen**.
 * **El techo está tocado.** Lo siguiente que entre en esta hoja obliga a sacar
 * antes el bloque de escritorio de la portada social, que es deuda declarada y
 * cuyo sitio natural es apps/Social/assets/css/social.css (ver README.md,
 * «Condición de salida»). No es una advertencia de estilo: el siguiente
 * componente no cabe.
 */

/* ═══ TOKENS · ESQUEMA CLARO ══════════════════════════════════════════════════ */

:root {
    /* ── Superficies ──────────────────────────────────────────────────────────
       Papel lila muy claro, no blanco roto neutro: es de donde sale la atmósfera
       del tema, y comparte banda de tono con el acento (≈270° frente a 288°) para
       que la pantalla tenga una sola familia de color.
       El salto fondo→superficie es de 1,09:1: sutil como manda §2.1 —las
       superficies se separan por borde y por sombra, no por relleno— pero ya no
       imperceptible como el 1,06:1 del melocotón. Y se consigue bajando el fondo,
       nunca oscureciendo --superficie, que es justo lo que §2.1 veta.
       La hundida es lila más denso: el hueco de una foto que carga tiene que
       leerse como parte del mismo papel, no como un agujero gris. */
    --fondo:               #F8F4FD;
    --superficie:          #FFFFFF;
    --superficie-alta:     #FFFFFF;
    --superficie-hundida:  #EEE6F7;

    /* ── Texto ────────────────────────────────────────────────────────────────
       Tinta con una gota de violeta, nunca negro puro: sobre papel lila el negro
       neutro se ve duro y sucio. Es la misma familia que el lienzo y que el
       acento, un paso más oscuro que cualquiera de los dos.
       texto/fondo = 15,22:1 (AAA) · texto-suave/fondo = 6,11:1 (AA) */
    --texto:               #261A2F;
    --texto-suave:         #665771;
    --texto-inverso:       #F8F4FD;

    /* ── Líneas ───────────────────────────────────────────────────────────────
       linea es decorativa (1,32:1) y NUNCA vale como borde de un control.
       linea-fuerte se lleva a 4,59:1 sobre superficie, muy por encima del 3:1 de
       1.4.11, y esa holgura es deliberada: es lo que sostiene el borde de un
       campo sobre la superficie hundida (3,78:1), que es el peor sitio donde va
       a caer. */
    --linea:               #E6DCF2;
    --linea-fuerte:        #7E708A;

    /* ── Acento: violeta de verbena ───────────────────────────────────────────
       Sube de luminosidad y de croma respecto al ciruela del core para que el
       botón principal se lea como una invitación y no como un trámite, sin salir
       de la única banda de tono libre. Los tres primeros no se han tocado nunca:
       son la identidad del tema.

       acento/fondo = 6,35:1 · acento-texto/acento = 6,89:1 (los dos AA)

       El paso a acento-intenso es de 1,97:1 y eso es lo que importa de verdad:
       es la ÚNICA realimentación del botón principal cuando el usuario tiene
       prefers-reduced-motion activo, porque esa preferencia quita el
       transform: scale(.98) (app.css:862). En «Grafito» ese mismo paso era de
       1,39:1 y el botón se quedaba mudo al pulsar. Aquí no, y además pierde la
       sombra: ver COMPONENTES.

       --acento-suave y --acento-borde SÍ se reafinaron con el lienzo nuevo: el
       tinte pierde la deriva rosada que tenía sobre papel melocotón (#FAEBF8) y
       el borde se oscurece un punto. Eso sube el par --acento-borde sobre
       --acento-suave —el borde del chip seleccionado, y una de las tres parejas
       que §2.4 avisa que siempre se olvidan— de 3,71:1 a 3,92:1. */
    --acento:              #8E2AA8;
    --acento-fuerte:       #7A1E92;
    --acento-intenso:      #4E0F5D;
    --acento-texto:        #FFFFFF;
    --acento-suave:        #F5EAFB;
    --acento-borde:        #A356BA;

    /* ── Semánticos: LOS MISMOS de la paleta por defecto ──────────────────────
       Se repiten para que la hoja sea autocontenida, no porque cambien. Y no
       cambian por una razón de producto: el aspecto del sitio puede cambiar de
       tema, pero «esto ha ido mal» tiene que verse idéntico siempre. El acento
       violeta no invade ninguna de las cuatro bandas, así que no hay nada que
       re-huear (docs/DISENO.md §1, «cómo se elige una dirección», punto 3). */
    --ok:                  #17663D;
    --ok-suave:            #E4F3EA;
    --error:               #B02418;
    --error-suave:         #FCEAE7;
    --aviso:               #7A5300;
    --aviso-suave:         #FBF0DC;
    --info:                #16558C;
    --info-suave:          #E7F0FA;

    /* ── Velos ────────────────────────────────────────────────────────────────
       --velo-foto NO se toca ni se «templa» con un tinte de marca: tintar la cara
       de alguien es faltarle al respeto (§11.1), y a 0,62 de alfa el peor caso
       —foto blanca bajo el texto— da 5,71:1 con --texto-inverso. A 0,55 caería
       por debajo de AA. El velo del modal sí toma la tinta del texto, para que
       el fondo oscurecido no se vuelva gris frío. */
    --velo-foto:           linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%);
    --velo-modal:          rgba(38,26,47,.55);

    /* ── El MARCO: cabecera y pie ─────────────────────────────────────────────
       Seis tokens NUEVOS, fuera del contrato de docs/DISENO.md §5.a — como ya
       lo estaba --ancho-lateral, y por el mismo motivo: el contrato cubre el
       LIENZO (fondo, superficie, hundida) y no tenía nombre para «la banda
       oscura que enmarca el sitio arriba y abajo».

       Por qué hacen falta y no valen los que ya hay: la cabecera y el pie de
       este tema son oscuros EN LOS DOS ESQUEMAS. Con --superficie (blanco en
       claro) no hay forma de pintarlos, y con --acento tampoco: en oscuro
       --acento es un lila CLARO (#E3A9F0) y la cabecera saldría luminosa justo
       en el esquema donde se usa la app de noche. Un token de marco es lo que
       permite que la banda sea la misma pieza en los dos esquemas y solo baje
       un punto de luz en el oscuro.

       Se nombran por su PAPEL —marco, no violeta— para que otro tema pueda
       tener un marco claro sin renombrar nada. --marco es el extremo oscuro del
       degradado y --marco-alto el claro: son los dos únicos sitios donde el ojo
       puede encontrar el texto de la cabecera, así que TODO contraste se mide
       contra --marco-alto, que es el peor caso.

       Contrastes (WCAG 2.1, calculados sobre los hex de esta lista):
         --marco-texto        sobre --marco-alto   8,65:1 · sobre --marco 16,31:1
         --marco-texto-suave  sobre --marco-alto   5,59:1 · sobre --marco 10,54:1
         --marco-texto        sobre --marco-realce 6,29:1
         --marco-realce-borde sobre --marco-alto   3,72:1 · sobre --marco  7,02:1
       Los dos primeros son texto normal (mínimo 4,5:1) y el último es borde de
       control (mínimo 3:1 por 1.4.11). Ninguno va justo.

       --marco-realce NO comunica por sí solo el límite de la pastilla activa:
       queda a 1,38:1 de --marco-alto y a 2,60:1 de --marco (1,32:1 y 1,91:1 en
       el esquema oscuro, ver README.md). Eso es deliberado y
       está cubierto: la entrada activa lo dice además con aria-current="page",
       con peso 600 (app.css) y con el filete --marco-realce-borde, que sí
       cumple 1.4.11. Mismo razonamiento que la hamburguesa del core. */
    --marco:               #2E1147;
    --marco-alto:          #7A1E92;
    --marco-texto:         #FFFFFF;
    --marco-texto-suave:   #D9CAE8;
    --marco-realce:        #9333B0;
    --marco-realce-borde:  #C79AD8;

    /* ── Elevación: blanda y teñida ───────────────────────────────────────────
       El opuesto exacto de Grafito, que las apagaba las tres. Aquí una tarjeta
       flota un poco, y por eso --superficie-alta puede ser igual que --superficie
       en claro sin que nada se pierda: quien flota lo dice con la sombra.
       Sombras teñidas con la tinta del texto (38,26,47) y no con negro: el negro
       sobre papel lila produce un halo sucio y grisáceo.
       Ninguna entra en una lista de transition: una sombra no se anima (§4.3). */
    --sombra-1: 0 1px 2px rgba(38,26,47,.05), 0 2px 6px rgba(38,26,47,.05);
    --sombra-2: 0 4px 14px rgba(38,26,47,.10), 0 2px 4px rgba(38,26,47,.06);
    --sombra-3: 0 16px 40px rgba(38,26,47,.16), 0 4px 10px rgba(38,26,47,.08);

    /* ── Tipografía: redonda donde el sistema la tenga, y 0 KB ────────────────
       ui-rounded resuelve a SF Pro Rounded en iOS y macOS —el gesto tipográfico
       más «app amigable» que existe— y cae al resto de la pila en Android
       (Roboto) y Windows (Segoe UI), donde no hay redondeada de sistema. Ni una
       descarga: la política de seguridad bloquea recursos externos y el
       presupuesto de arranque de la PWA se gasta mejor en las fotos (§3.1).

       Cuerpo y titular comparten voz a propósito: la diferencia la hacen el
       tamaño y el peso, no dos tipografías. --fuente-titulo se declara igual y
       explícito para que un cambio futuro en el core no reparta la voz sin que
       nadie lo decida. --fuente-mono se queda con la del core: el código es
       código y no hay monoespaciada redondeada de sistema. */
    --fuente: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, "Noto Sans", sans-serif,
              "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --fuente-titulo: var(--fuente);

    /* ── Escala tipográfica: reescalada, sin pasos nuevos (§5.a) ──────────────
       Dos ajustes, y los dos con motivo:
       · --tipo-sm sube de 14 a 15 px. Es el tamaño del texto de los botones
         secundarios, de las etiquetas de campo y del menú: a 14 px una app se
         lee como un panel de administración.
       · Los cuatro de titular crecen un paso. Un titular grande y redondo es
         acogedor; uno pequeño es un formulario.
       --tipo-base NO se toca: 16 px es el mínimo de cualquier input o iOS hace
       zoom al enfocarlo (§3.3), y --tipo-xs/--tipo-s tampoco, que ya están en el
       suelo de legibilidad. */
    --tipo-sm:   0.9375rem;
    --tipo-l:    1.3125rem;
    --tipo-xl:   1.625rem;
    --tipo-2xl:  2rem;
    --tipo-3xl:  clamp(2.25rem, 7vw, 3rem);

    /* ── Radios generosos ─────────────────────────────────────────────────────
       El otro extremo de los 2-8 px de Grafito. Cuadra con la regla «hijo = padre
       − padding» (§4.2) sin aproximar: una tarjeta a --radio-l (24) con
       --espacio-4 (16) de padding pide exactamente --radio-xs (8) en la foto de
       dentro. --radio-redondo no se toca: no es un radio, es una forma —avatares
       y botones de icono— y §5.a lo deja fuera del alcance de un tema. */
    --radio-xs:  8px;
    --radio-s:  14px;
    --radio-m:  18px;
    --radio-l:  24px;
    --radio-xl: 32px;

    /* ── Ancho de una columna de navegación lateral ───────────────────────────
       Token NUEVO, no está en el contrato de docs/DISENO.md §5.a: la familia
       --ancho-* del core cubre columnas de CONTENIDO (app 30rem, texto 38rem,
       contenido 62rem, amplio 75rem) y no tenía nombre para «la columna
       estrecha que sostiene una navegación al lado del contenido», que es lo
       que necesita la portada social en escritorio (ver el último bloque de
       esta hoja).

       Se nombra por su PAPEL, no por su medida ni por la pantalla que lo
       estrena: cualquier otra pantalla de dos columnas de este tema usa este
       mismo ancho, y así la app no acaba con tres barras laterales de tres
       anchos distintos.

       12,5rem = 200 px es el ancho al que «Conversaciones» —el rótulo más
       largo de las tres pestañas, a --tipo-sm (15 px) y peso 700— cabe en una
       línea junto a su icono (1,25em ≈ 19 px) y los 28 px de relleno lateral:
       ≈171 px de contenido y ~29 px de holgura. Con el texto del sistema al
       130 % ya no cabe y el rótulo parte en dos líneas, que es exactamente lo
       que §3.1 espera — por eso .pestanas__boton lleva `min-height` y no
       `height`, y por eso este token NO se acompaña de ninguna altura fija.

       Sin valor propio en oscuro, como --radio-* y --tipo-*: una medida no
       depende del esquema. Lo que se declara en los dos esquemas siempre son
       los COLORES (§5.a). */
    --ancho-lateral: 12.5rem;
}

/* ═══ TOKENS · ESQUEMA OSCURO ═════════════════════════════════════════════════
   Paleta propia, no la clara invertida, y de primera clase: este es el esquema en
   el que de verdad se usa una app de citas —de noche, en la cama, con una mano—.
   Se declara en un @media aparte y NUNCA como única definición: un token que solo
   exista aquí deja el tema claro con el valor del core, y es un fallo que no se ve
   si quien revisa tiene el sistema en oscuro. */

@media (prefers-color-scheme: dark) {
    :root {
        /* Noche violeta, no negro ni gris azulado: la misma banda de tono que el
           esquema claro y que el acento, que es lo que hace que ninguno de los
           dos esquemas parezca la versión pobre del otro. Aquí la elevación SÍ es
           color (§4.3): fondo → superficie → superficie-alta suben de verdad,
           porque una sombra negra sobre violeta oscuro no se ve.
           La hundida baja un punto más que en la versión berenjena (1,06:1 sobre
           el fondo frente a 1,04:1): un esqueleto de carga tiene que leerse como
           hueco, y a 1,04 no se distinguía del lienzo. */
        --fondo:               #18111F;
        --superficie:          #241B2D;
        --superficie-alta:     #2F2439;
        --superficie-hundida:  #0F0A15;

        /* Nunca #FFFFFF: sobre fondo oscuro produce halo y cansa.
           texto/fondo = 15,58:1 · texto-suave/fondo = 7,94:1 (los dos AAA) */
        --texto:               #F1E9F7;
        --texto-suave:         #B3A5BE;
        --texto-inverso:       #211829;

        /* linea-fuerte/superficie-alta = 3,77:1, que es el caso peor y el que
           manda: superficie-alta es la hoja inferior donde caen los campos de un
           formulario. Si esa superficie sube, el borde deja de cumplir 1.4.11. */
        --linea:               #3B2E47;
        --linea-fuerte:        #8A7C96;

        /* En oscuro el acento se aclara para poder ser texto, y el botón
           principal pasa a ser violeta claro con texto oscuro. Es deliberado y no
           hay que «arreglarlo» (§2.3). Y va desaturado respecto al claro: un
           acento saturado sobre superficie oscura vibra (§2.6.7).
           acento/fondo = 9,83:1 · acento-texto/acento = 9,63:1 (AAA)
           Como en claro, los cuatro primeros no se tocan y solo se reafinan el
           tinte y el borde: --acento-borde sobre --acento-suave pasa de 3,75:1 a
           4,09:1. */
        --acento:              #E3A9F0;
        --acento-fuerte:       #F0C8F9;
        --acento-intenso:      #B26CC4;
        --acento-texto:        #250B2C;
        --acento-suave:        #3B2745;
        --acento-borde:        #A183B0;

        /* Los de la paleta por defecto, otra vez sin cambios. */
        --ok:                  #6FD196;
        --ok-suave:            #16281E;
        --error:               #FF9C8B;
        --error-suave:         #2E1815;
        --aviso:               #E3B663;
        --aviso-suave:         #2B2113;
        --info:                #8FC5F7;
        --info-suave:          #152431;

        --velo-foto:           linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 62%);
        --velo-modal:          rgba(0,0,0,.72);

        /* El marco baja un punto de luz respecto al claro: sobre un lienzo ya
           oscuro (--fondo #18111F) la banda del claro se leería como una
           lámpara encendida en mitad de la pantalla. Sigue siendo la MISMA
           pieza —violeta profundo a violeta medio—, no un marco distinto.

           Contrastes en este esquema, medidos igual que en claro y siempre
           contra el peor caso (--marco-alto, el extremo claro del degradado):
             --marco-texto        sobre --marco-alto  10,93:1 · --marco 15,80:1
             --marco-texto-suave  sobre --marco-alto   6,45:1 · --marco  9,32:1
             --marco-texto        sobre --marco-realce 8,30:1
             --marco-realce-borde sobre --marco-alto   3,80:1 · --marco  5,49:1

           --marco-texto NO es #FFFFFF aquí: sobre una banda oscura el blanco
           puro produce halo y cansa (§2.3), igual que --texto. Es el mismo
           #F1E9F7 del texto del lienzo, y eso además hace que la cabecera y el
           contenido hablen con la misma tinta. */
        --marco:               #1A0B28;
        --marco-alto:          #4E126B;
        --marco-texto:         #F1E9F7;
        --marco-texto-suave:   #C3B0D2;
        --marco-realce:        #63238A;
        --marco-realce-borde:  #A879C0;

        /* La 1 se apaga —una sombra bajo una tarjeta sobre violeta oscuro es
           suciedad, y el escalón de superficie ya la separa—, y las otras dos se
           quedan para lo que flota de verdad: submenú, hoja inferior y modal. */
        --sombra-1: none;
        --sombra-2: 0 4px 16px rgba(0,0,0,.55);
        --sombra-3: 0 18px 44px rgba(0,0,0,.68);
    }
}

/* ═══ COMPONENTES: LA FORMA DE UNA APP, NO LA DE UNA WEB ══════════════════════
 *
 * Seis reglas. Es poco a propósito: con esta paleta **ninguna regla de app.css
 * baja de AA**, así que aquí no hay ni un solo arreglo de contraste —al revés que
 * en Grafito, donde el acento monocromo dejaba enlaces y estados a 1,00:1—. Lo
 * que hay es forma: la píldora y la elevación, que son las dos señales que
 * separan «esto es una app» de «esto es una web».
 *
 * Dos reglas de oficio, las mismas que en Grafito:
 *   - Ninguna cambia una altura ni un ancho. Un border-radius no toca la caja y
 *     una box-shadow tampoco entra en el layout, así que no pueden romper el test
 *     de los ≥44 px ni el de desbordamiento a 320 px.
 *   - Ninguna entra en las listas de `transition` de .boton ni de .menu__enlace:
 *     la sombra cambia de golpe, nunca animada (§4.3, §10).
 */

/* ── Píldoras ─────────────────────────────────────────────────────────────────
   app.css:417 y app.css:785 — el gesto de forma más barato y más reconocible de
   una app social. Solo alcanza a lo pulsable de navegación y acción: los campos
   se quedan en --radio-s (14 px) porque una píldora con texto dentro descoloca el
   punto de inicio de la línea y complica el cursor.
   .boton--icono y .etiqueta ya eran --radio-redondo en el core: no cambian. */
.boton,
.menu__enlace { border-radius: var(--radio-redondo); }

/* ── Elevación del botón principal ────────────────────────────────────────────
   La acción principal es lo único de la pantalla que flota, y es lo que la separa
   del resto sin necesidad de más color. Va con --sombra-2 y no con --sombra-1
   porque a 1px de desenfoque sobre papel lila no se ve nada. */
.boton--principal { box-shadow: var(--sombra-2); }

/* Al pulsar, el botón se HUNDE: pierde la sombra. Es pintura, no movimiento, así
   que sobrevive a prefers-reduced-motion —que quita el transform: scale(.98)— y
   se suma al paso de relleno de 1,97:1 (1,92:1 en oscuro) hacia --acento-intenso.
   Ése fue el fallo grave de la auditoría de Grafito y aquí está cubierto dos
   veces. Sin transición: una sombra no se anima. */
.boton--principal:active { box-shadow: none; }

/* La combinación de los dos estados hay que declararla o se pierde el anillo:
   .boton--principal:active (0,2,0) va en esta hoja, o sea DESPUÉS de
   .boton--principal:focus-visible de app.css:455, y con la misma especificidad le
   ganaría. Con teclado, el anillo manda sobre el hundido. */
.boton--principal:focus-visible:active { box-shadow: 0 0 0 2px var(--superficie); }

/* Y lo que la elevación se trae de regalo: un botón deshabilitado NO puede
   flotar. app.css:477 le cambia el relleno y el color, pero no tenía por qué
   tocar una sombra que hasta ahora no existía. El selector con atributo (0,2,0)
   gana a .boton--principal (0,1,0) por especificidad, no por orden. */
.boton[disabled],
.boton[aria-disabled="true"] { box-shadow: none; }

/* ═══ EL MARCO: CABECERA Y PIE ════════════════════════════════════════════════
 *
 * app.css pinta las dos bandas con --superficie y un filete --linea: una
 * cabecera de sitio web, correcta y anónima. Aquí pasan a ser una banda violeta
 * profunda que enmarca el lienzo lila por arriba y por abajo.
 *
 * Por qué, y no es gusto: en la portada social el contenido son CARAS sobre
 * tarjetas blancas. Una cabecera blanca con filete gris se funde con esas
 * tarjetas y la pantalla pierde el borde — no se sabe dónde acaba el shell de la
 * app y dónde empieza el contenido, que es justo lo que una TWA sin barra de
 * navegador necesita dejar claro (§9, «la única orientación es la que dé la
 * interfaz»). Un marco oscuro lo dice sin una sola palabra, y de paso el
 * contenido se lleva TODA la luz de la pantalla, que es el principio de §11.1.
 *
 * Ni un color literal: los seis tokens --marco-* están arriba, con sus ratios.
 * Y ni una medida nueva: alto, relleno y radios siguen siendo los del core.
 *
 * MOVIMIENTO: nada de este bloque se desplaza ni entra en un `transition` que
 * app.css no tuviera ya (`.menu__enlace` interpola relleno y color, que es
 * pintura). `prefers-reduced-motion` no tiene nada que apagar aquí.
 */

/* La banda de arriba. El degradado va del extremo oscuro al claro en diagonal,
   así que la marca (a la izquierda) cae sobre --marco y la navegación (a la
   derecha) sobre --marco-alto: por eso TODOS los contrastes de los tokens están
   medidos contra --marco-alto, que es donde de verdad vive el texto.

   `border-bottom` en --marco-alto y no en --linea: sobre la banda oscura el
   filete claro del core se ve como una raya blanca suelta. Aquí el filete solo
   remata el degradado.

   `color-scheme: dark` en la propia banda para que un `<select>` o un control
   nativo que caiga dentro se pinte oscuro y no blanco. Hoy no hay ninguno; el
   día que la cabecera lleve un buscador, ya está resuelto. */
.cabecera {
    background: linear-gradient(115deg, var(--marco), var(--marco-alto));
    border-bottom-color: var(--marco-alto);
    color: var(--marco-texto);
    color-scheme: dark;
}

/* La marca, en blanco sobre la banda (16,31:1 sobre --marco). */
.marca { color: var(--marco-texto); }

/* Distintivo de marca: un cuadrado redondeado de acento delante del nombre.
   Es `content: ''` —sin letra— a propósito y por dos motivos: el nombre de la
   app sale de la configuración (`app_name`) y una inicial fijada en el CSS
   mentiría en cuanto alguien lo cambie; y un pseudoelemento con texto se cuela
   en el árbol de accesibilidad, donde ya está el nombre completo al lado.
   Decoración pura, así que no le aplica ningún mínimo de contraste (1.4.11
   habla de objetos gráficos que TRANSMITEN información).

   Degradado de --acento-borde a --acento, o sea la misma banda de tono del
   resto del tema: NO se usa el oro de la maqueta de referencia porque un
   segundo color de marca rompe el primero de los vetos permanentes
   (docs/DISENO.md §1). En oscuro los dos tokens son lilas claros, así que el
   distintivo sigue leyéndose sobre la banda sin una regla aparte.

   Medidas de la escala: --toque-min sería demasiado (esto no se pulsa por sí
   solo, el enlace entero sí), así que va a 2rem = --espacio-6, y el radio es
   --radio-s, que es el que le toca a un hijo de --radio-m menos relleno (§4.2). */
.marca::before {
    content: '';
    display: inline-block;
    vertical-align: -0.35em;
    width: var(--espacio-6);
    height: var(--espacio-6);
    margin-inline-end: var(--espacio-2);
    border-radius: var(--radio-s);
    background: linear-gradient(135deg, var(--acento-borde), var(--acento));
}

/* ── La navegación, cuando está SOBRE la banda ────────────────────────────────
   Píldora: `.menu__enlace` ya es --radio-redondo por el bloque de píldoras de
   más arriba, así que aquí solo cambia el color.

   ESTAS REGLAS NO VAN DENTRO DE UNA MEDIA QUERY DE ESCRITORIO, y el motivo es
   la degradación sin JavaScript. El colapso del panel en móvil depende de la
   clase `--colapsable`, que la pone `app.js` (app.css: «Sin JS no hay clase, no
   hay colapso, y las dos listas se ven en la cabecera como en escritorio»). O
   sea que en móvil y sin JS los enlaces también caen sobre la banda oscura: con
   estas reglas acotadas a ≥64rem se quedarían en --texto-suave sobre violeta
   profundo, ~1,7:1, y la navegación entera sería ilegible justo en el escenario
   en el que ya ha fallado algo. Sobre la banda siempre, por defecto.

   Lo que sí se acota es el caso contrario: cuando el panel se despliega como
   tarjeta flotante sobre --superficie-alta, ahí el blanco sería blanco sobre
   blanco. Se devuelven los colores del core justo debajo. */
.cabecera__panel .menu__enlace { color: var(--marco-texto-suave); }

@media (hover: hover) {
    .cabecera__panel .menu__enlace:hover {
        background: var(--marco-realce);
        color: var(--marco-texto);
    }
}

/* La entrada activa. TRES señales y ninguna exclusiva del color, que es lo que
   pide §2.6.3: `aria-current="page"` en el marcado, peso 600 frente a 500
   (app.css) y el filete, que es lo único que de verdad dibuja el límite de la
   pastilla —el relleno --marco-realce se queda en 1,38:1 sobre el extremo claro
   de la banda (1,32:1 en oscuro) y no comunica nada por sí solo. El filete sí:
   3,72:1 en claro y 3,80:1 en oscuro, por encima del 3:1 de 1.4.11.

   `border` y no `outline`: un outline se dibujaría por fuera de la caja y
   acercaría dos pastillas adyacentes por debajo de los 8 px de §4.6. El borde
   va por dentro y no toca el layout, porque `.menu__enlace` es `border-box`
   como todo (app.css §01) y su alto real lo fija `min-height: --toque-min`. */
.cabecera__panel .menu__enlace--activo {
    background: var(--marco-realce);
    border: 1px solid var(--marco-realce-borde);
    color: var(--marco-texto);
}

/* El anillo de foco del core es --acento, que sobre la banda oscura queda a
   1,26:1 del extremo claro y 2,37:1 del oscuro (en claro; en oscuro el acento
   es un lila claro y sí se vería, pero un anillo que solo funciona en un
   esquema no es un anillo). Se cambia por --marco-texto: 8,65:1 sobre
   --marco-alto y 16,31:1 sobre --marco, o sea visible en los dos extremos de la
   banda y en los dos esquemas. No se quita el outline, se SUSTITUYE (§6). */
.cabecera__panel .menu__enlace:focus-visible { outline-color: var(--marco-texto); }

/* ── …y cuando el panel se despliega, que ya no está sobre la banda ───────────
   `.cabecera__panel--desplegado` es una tarjeta flotante sobre --superficie-alta
   (app.css), o sea papel, así que aquí los enlaces vuelven exactamente a los
   colores del core: --texto-suave en reposo (6,63:1 sobre --superficie-alta en
   claro, 6,31:1 en oscuro), tinte --acento-suave con texto --acento en el
   activo (5,92:1 / 7,17:1). Sin filete: sobre papel el tinte y el peso 600 ya
   separan la entrada, y el borde de la versión de banda dejaría un aro violeta
   dentro de una tarjeta blanca.

   Mismo número de clases que las reglas de arriba (0,2,0) — mandan por ORDEN,
   no por especificidad, así que este bloque tiene que quedarse detrás de aquél.
   Se acota a móvil porque la clase `--desplegado` solo existe ahí, pero la
   media query no es lo que hace el trabajo: el selector sí. */
@media (max-width: 63.999rem) {
    .cabecera__panel--desplegado .menu__enlace { color: var(--texto-suave); }

    @media (hover: hover) {
        .cabecera__panel--desplegado .menu__enlace:hover {
            background: var(--superficie-hundida);
            color: var(--texto);
        }
    }

    .cabecera__panel--desplegado .menu__enlace--activo {
        background: var(--acento-suave);
        border: 0;
        color: var(--acento);
    }

    .cabecera__panel--desplegado .menu__enlace:focus-visible { outline-color: var(--acento); }
}

/* ── Hamburguesa de la cabecera: sobre la banda, no sobre papel ───────────────
   app.css:1042 — el botón nace neutro: superficie de la cabecera + filete
   --linea-fuerte. Hasta 0.2.0 este tema lo vestía de chip de acento
   (--acento-suave + --acento-borde) porque la cabecera era papel lila. Con la
   cabecera oscura ese chip claro sería el objeto más luminoso de la banda, y
   este botón no es la acción principal de nada: es la puerta del menú.

   Así que se viste con los tokens del propio marco. Icono --marco-texto sobre
   --marco-realce = 6,29:1 en claro y 8,30:1 en oscuro, muy por encima del 3:1
   que pide 1.4.11 para un objeto gráfico. El relleno --marco-realce NO comunica
   el límite del control (1,38:1 en claro y 1,32:1 en oscuro sobre el extremo
   claro de la banda): lo sostiene
   el filete --marco-realce-borde, 3,72:1 claro y 3,80:1 oscuro.

   Sin sombra en reposo, a propósito: en Verbena lo único que flota es la acción
   principal, y este botón no lo es. */
.cabecera__hamburguesa {
    background: var(--marco-realce);
    border-color: var(--marco-realce-borde);
    color: var(--marco-texto);
}

/* Abierto: se invierte. El botón pasa a ser la pestaña clara del panel claro que
   acaba de abrir —el panel es --superficie-alta— y deja de formar parte de la
   banda. Es la señal más fuerte posible sin mover nada, y no depende del color:
   siguen estando la equis del icono y el aria-label «Cerrar menú».
   --marco sobre --marco-texto = 16,31:1 en claro y 15,80:1 en oscuro. */
.cabecera__hamburguesa[aria-expanded="true"] {
    background: var(--marco-texto);
    border-color: var(--marco-texto);
    color: var(--marco);
}

/* El anillo de foco del botón, por el mismo motivo que el de los enlaces. */
.cabecera__hamburguesa:focus-visible { outline-color: var(--marco-texto); }

/* El enlace de salto («Saltar al contenido», app.css:364) aparece sobre la
   cabecera al tabular: si se queda con --superficie/--texto es una tarjeta
   blanca sobre la banda, que se ve, pero se lee como un error de pintado.
   Con los tokens del marco es parte de la banda. 16,31:1 en claro. */
.salto-contenido:focus {
    background: var(--marco);
    color: var(--marco-texto);
}

/* ── Selección de texto ───────────────────────────────────────────────────────
   app.css:218 — el tinte --acento-suave está a 1,16:1 de la superficie: se apoya
   solo en el tono, y en una captura en gris o con deuteranopia no queda nada que
   diga qué hay seleccionado. Invertido son 6,89:1, y además es lo que hace el
   navegador de serie, que es lo que la gente espera. */
::selection { background: var(--acento); color: var(--acento-texto); }

/* ── Pie de página: centrado y con la marca en negrita ────────────────────────
   app.css:317 — el pie nace alineado a la izquierda, que es la forma de un pie
   de sitio web con columnas de enlaces. Este producto tiene dos líneas: el
   nombre de la app y dos enlaces legales. Centradas se leen como el cierre de
   una app; a la izquierda, como el arranque de un mapa del sitio que no existe.

   docs/DISENO.md no fija nada sobre el pie —no hay ni una mención—, así que
   esto es dirección estética del tema y no una excepción a ninguna regla.

   Ni un color nuevo: `.pie__texto` ya trae --texto-suave y --tipo-sm del core
   (6,63:1 sobre --superficie en claro, 7,12:1 en oscuro, los dos AA holgados).
   El peso 700 de la marca es jerarquía, no estado, así que no necesita
   acompañamiento de icono ni de texto.

   `display: none` por debajo de 64rem (2026-08-22, a petición directa): en
   móvil esto es el shell de una app, no una web con mapa del sitio al pie, y
   los enlaces legales no ganan nada por repetirse en cada pantalla mientras se
   hace scroll con el pulgar. Mismo breakpoint `lg` de docs/DISENO.md §4.5 que
   ya usa el resto de la hoja para "escritorio" —donde la cabecera deja de
   colapsar el menú—, así que el pie reaparece exactamente cuando el sitio deja
   de comportarse como una app. `display: none` y no `visibility`/`opacity`: no
   debe ocupar sitio ni quedar en el orden de tabulación mientras está oculto.
   Nada que animar ni que `prefers-reduced-motion` tenga que apagar: es un
   cambio de layout entre breakpoints, no una transición. */
.pie {
    text-align: center;
    display: none;
    /* La banda de abajo, hermana de la de arriba y con el degradado al revés
       (295° = 115° + 180°): la pantalla queda cerrada por dos bandas que se
       reflejan en vez de repetirse. Solo entre los dos extremos oscuros, sin
       llegar a --marco-alto: el pie es el cierre, no una segunda cabecera, y no
       debe competir por la mirada con la navegación de arriba.
       `border-top` en --marco-alto por el mismo motivo que el de la cabecera. */
    background: linear-gradient(295deg, var(--marco), var(--marco-alto));
    border-top-color: var(--marco-alto);
    color: var(--marco-texto);
    color-scheme: dark;
}

/* El nombre de la app cierra la página. --marco-texto y no el --texto-suave del
   core (app.css:325): sobre la banda, el suave del lienzo queda a 1,4:1 y
   desaparece. 16,31:1 en claro, 15,80:1 en oscuro.
   El peso 700 es jerarquía, no estado: no necesita icono ni texto de apoyo. */
.pie__texto {
    font-weight: 700;
    color: var(--marco-texto);
}

/* Los enlaces legales, un escalón por debajo del nombre. --marco-texto-suave
   sobre la banda del pie: 10,54:1 en claro y 9,32:1 en oscuro, los dos AAA para
   texto normal. Al pasar el ratón suben a --marco-texto, que es lo único que
   cambia: el subrayado y el tamaño se quedan como están.
   (0,2,0) contra la (0,1,0) de `.menu__enlace` en app.css. */
.pie .menu__enlace { color: var(--marco-texto-suave); }

@media (hover: hover) {
    .pie .menu__enlace:hover {
        background: transparent;
        color: var(--marco-texto);
    }
}

/* Y su anillo de foco, por el mismo motivo que en la cabecera: --acento sobre
   la banda oscura no se ve. */
.pie .menu__enlace:focus-visible { outline-color: var(--marco-texto); }

/* El menú del pie es una fila flex (app.css:.menu__lista) y `text-align` no
   centra ítems flex: hace falta decirlo en el eje principal. (0,2,0) contra la
   (0,1,0) del core — gana por especificidad, no solo por orden. */
.pie .menu__lista { justify-content: center; }

@media (min-width: 64rem) {
    .pie { display: block; }
}

/* ── Favorito marcado: el color NO puede ser la única señal ───────────────────
   apps/Social/assets/css/social.css:946 — la estrella marcada se distingue solo
   por --acento frente a --texto-suave. `aria-pressed` y el `aria-label` cubren
   al lector de pantalla, pero no son una señal VISUAL: en una captura en gris,
   con deuteranopia o con el brillo al mínimo de noche, las dos estrellas son la
   misma estrella. Eso es 1.4.1 (uso del color) y §2.6.3.

   El arreglo canónico —estrella rellena frente a estrella de contorno— exige un
   segundo símbolo en el sprite y §7 declara el presupuesto agotado; y NO se
   puede simular con `fill: currentColor` desde aquí, porque
   public/assets/icons/sprite.svg:211 lleva `fill="none"` como atributo de
   presentación EN EL <symbol>, o sea dentro del árbol clonado por <use>, donde
   ninguna regla de esta hoja llega. `stroke-width`, en cambio, sí se hereda
   desde el <svg> de la vista: el símbolo no lo declara.

   Así que la señal es el GROSOR: 1,75 (app.css:.icono) → 3, un 71 % más de
   tinta en el mismo trazo. Sobrevive a la escala de grises y a cualquier
   daltonismo, y no cambia ni una medida de la caja —`stroke-width` pinta hacia
   dentro y hacia fuera del trazo, no reserva espacio—, así que no puede romper
   el test de los ≥44 px. No es un número de la escala de espaciado porque no es
   una distancia: es el mismo tipo de valor que el 1,75 que el core ya declara a
   pelo, y no existe token de trazo en el contrato.
   Sin transición: el cambio es instantáneo, como el resto de estados de este
   tema (§4.3). */
.fila-conversacion__favorito--activa .icono { stroke-width: 3; }

/* ═══ ESCRITORIO: LA PORTADA SOCIAL, EN DOS COLUMNAS ══════════════════════════
 *
 * Solo a partir de 64rem (el breakpoint `lg` de docs/DISENO.md §4.5, el mismo
 * en el que la cabecera deja de colapsar el menú). Por debajo no se toca NADA:
 * el app-shell de móvil —página sin scroll, pestañas en píldora horizontal,
 * rótulo oculto y solo icono— se queda exactamente como está.
 *
 * ── Lo que hay que saber antes de tocar este bloque ──────────────────────────
 * Esta hoja se carga ANTES que apps/Social/assets/css/social.css: el orden es
 * app.css → tema → useStyle() de la pantalla, y lo fija Renderer::stylesBlock()
 * (docs/ESTILOS.md §1). O sea que, a igualdad de especificidad, la PANTALLA
 * gana al TEMA — que es justo lo que el sistema quiere: «el tema sobre el
 * sistema de diseño, y una pantalla sobre el tema, nunca al revés».
 *
 * Aquí el tema está haciendo lo contrario: recolocar componentes que son de
 * `apps/Social` (.pestanas, .lista-conversaciones, .fila-conversacion). Es una
 * DEUDA declarada, no un descuido, y está anotada en README.md con su condición
 * de salida: el sitio natural de este bloque es social.css. Mientras viva aquí,
 * la única disciplina que lo sostiene es la especificidad, y por eso TODAS las
 * reglas van prefijadas con `.pagina-conectados` —el bodyClass de landing.php—:
 * (0,2,x) contra la (0,1,x) de social.css. Dos consecuencias prácticas:
 *
 *   · No se declara ninguna propiedad que social.css ya fije con (0,2,x) o más
 *     y que ya sea la que este diseño quiere, porque en un empate ganaría
 *     social.css por orden — así que NO se toca el `font-weight` de
 *     `.pestanas__boton[aria-selected="true"]` (700 ya sirve) ni el
 *     `padding-top` de `.pagina-conectados .pestanas`. `color` y `background`
 *     de ese mismo selector, y el `background` de su `::after`, SÍ se tocan
 *     desde 0.3.0/2026-08-25 —la pastilla rellena— y por eso viven en una
 *     regla propia, no en éste bloque de ≥64rem: valen a cualquier anchura,
 *     no solo en la barra lateral.
 *   · El prefijo además acota el cambio a ESTA pantalla. `.pestanas` es un
 *     componente del sistema (§9 bis) y otra pantalla con pestañas puede querer
 *     seguir con la fila horizontal en escritorio.
 *
 * ── Lo que contradice a docs/DISENO.md, dicho en voz alta ────────────────────
 * §9 bis dice «ancho igual entre pestañas, no etiquetas pegadas a la
 * izquierda», y en escritorio esto hace exactamente eso: rótulos alineados a la
 * izquierda en una columna. El motivo de la regla —que las pestañas se lean
 * como las caras de una misma pantalla y no como una principal con anexos—
 * sigue cumpliéndose por otra vía: las tres ocupan el mismo ancho de columna y
 * el mismo alto, y ninguna se destaca salvo la activa. Aun así es una excepción
 * a una decisión escrita, y §9 bis tiene que recogerla antes de que esto se dé
 * por bueno.
 *
 * ── Movimiento ───────────────────────────────────────────────────────────────
 * Ninguna regla de este bloque anima, desplaza ni entra en una lista de
 * `transition`: es colocación y pintura. Así que `prefers-reduced-motion` no
 * tiene nada que apagar aquí, y este layout no puede desplazar nada a nadie.
 */

/* La pestaña activa es una pastilla RELLENA a cualquier anchura (2026-08-25,
   a petición directa — hasta hoy solo pintaba desde 64rem, y la maqueta de
   referencia la pide también en móvil/tablet, donde la lista sigue siendo la
   tira horizontal de social.css, no la barra lateral de aquí abajo).

   Sigue sin comunicar por color solo, con las mismas cuatro señales que ya
   documentaba el bloque de escritorio: relleno, peso 700 (social.css),
   `aria-selected="true"` en el marcado y la barra del `::after` — que cambia
   de color aquí mismo, porque `--acento` sobre el propio relleno `--acento`
   sería 1:1 y la fila perdería esa cuarta señal. Contrastes: los mismos
   números ya medidos más abajo para el bloque de ≥64rem, es el mismo par de
   tokens con el mismo resultado a cualquier anchura.

   `border-radius` en el botón entero y no solo en el seleccionado: así el
   anillo de `:focus-visible` (social.css, ya usa `--radio-s`) y el relleno
   comparten el mismo canto sin declarar el radio dos veces.

   `--radio-s` (14 px en este tema) y no `--radio-redondo`: es el mismo canto
   que ya tiene cualquier control de este tema —el de un campo, no una
   píldora completa—, y en columna (≥64rem, más abajo) tres píldoras enteras
   apiladas se leerían como tres botones sueltos en vez de las filas de un
   mismo menú. */
.pagina-conectados .pestanas__boton { border-radius: var(--radio-s); }

.pagina-conectados .pestanas__boton[aria-selected="true"] {
    background: var(--acento);
    color: var(--acento-texto);
}

.pagina-conectados .pestanas__boton[aria-selected="true"]::after {
    background: var(--acento-texto);
}

@media (min-width: 64rem) {

    /* La rejilla: barra estrecha + tarjeta ancha, dentro del contenedor de
       62rem que ya pone `.contenedor` en el layout del core.

       `max-width: none` retira el tope de --ancho-app (30rem) que social.css le
       pone a `.pestanas`. Eso NO es «estirar la app»: §4.4 reserva --ancho-app
       para la columna de descubrir/chat/perfil y --ancho-contenido (62rem) para
       «páginas de dos columnas y listados de escritorio», que es literalmente
       en lo que se convierte esta pantalla aquí.

       `minmax(0, 1fr)` y NUNCA `1fr` a secas: `1fr` es `minmax(auto, 1fr)`, y
       el mínimo automático de esa pista es el min-content de su contenido. Las
       filas de conversación son texto `white-space: nowrap` —nombre, meta y
       vista previa—, o sea que su min-content es la línea entera sin cortar, y
       la pista crecería hasta sacar la página de la pantalla. Es el mismo fallo
       que se llevó dos versiones de apps/Social por delante (0.9.3 → 0.9.5, ver
       §9 bis) con otro mecanismo: allí era `fit-content` en un ítem flex, aquí
       sería el mínimo automático de una pista de rejilla. El `min-width: 0` que
       ya llevan `.fila-conversacion__boton` y `__cuerpo` hace el resto: con la
       pista acotada, el texto trunca con puntos suspensivos en vez de empujar.

       `align-items: start` para que la barra lateral no se estire hasta el alto
       de la tarjeta: es una lista de tres controles, no una columna de color.
       El separador de 24px (--espacio-5) entre las dos columnas está muy por
       encima de los 8 px mínimos entre elementos pulsables adyacentes. */
    .pagina-conectados .pestanas {
        display: grid;
        grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
        gap: var(--espacio-5);
        align-items: start;
        max-width: none;
    }

    /* Las tres pestañas, en columna. Sin filete inferior: aquí no separa la
       navegación del contenido —eso lo hace el canto de la tarjeta de al lado—
       y quedaba como una raya suelta bajo el último ítem.

       `grid-row: 1` explícito para la barra y `grid-column: 2` sin fila para
       los paneles: con JavaScript solo hay un panel visible ([hidden] es
       `display: none !important`, app.css) y se coloca a la derecha de la
       barra; SIN JavaScript los tres siguen en el DOM y la colocación
       automática los reparte en las filas 1, 2 y 3 de la segunda columna, uno
       debajo de otro y cada uno con su propio título — que es exactamente la
       degradación que describe §9 bis. Si se les fijara `grid-row: 1` se
       apilarían los tres en la misma celda y sin JS la pantalla sería ilegible.

       8 px de separación entre botones (--espacio-2), que en la fila horizontal
       no hacen falta —ahí cada uno ocupa su tercio— pero en columna sí: es el
       mínimo entre pulsables adyacentes de §4.6. */
    .pagina-conectados .pestanas__lista {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        gap: var(--espacio-2);
        border-bottom: none;
    }

    /* `flex: none` retira el `flex: 1 1 0` del componente: en una columna ese
       reparto actúa sobre el ALTO, no sobre el ancho, y estiraría los tres
       botones a partes iguales en cuanto la barra tuviera alto sobrante.
       El relleno crece a --espacio-3 (12 px) en vertical —una fila de menú, no
       una pestaña apretada— y a --espacio-4 (16 px) por la izquierda, que es lo
       que deja sitio a la barra de acento sin que pise el icono.
       `min-height: var(--toque-comodo)` (48 px) sigue viniendo del componente:
       ninguna de estas reglas baja de los 44 px de §4.6. */
    .pagina-conectados .pestanas__boton {
        flex: none;
        justify-content: flex-start;
        padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-4);
        text-align: start;
    }

    /* Reposo con ratón encima: tinte de acento, como cualquier fila de menú de
       este tema. --acento sobre --acento-suave = 5,86:1 en claro y 7,25:1 en
       oscuro (README.md), los dos AA de sobra para texto pequeño.
       (0,4,0) contra la (0,3,0) de la misma regla en social.css. */
    @media (hover: hover) {
        .pagina-conectados .pestanas__boton:not([aria-selected="true"]):hover {
            background: var(--acento-suave);
            color: var(--acento);
        }
    }

    /* La barra de la pestaña activa gira 90° en la barra lateral: de filete de
       3 px bajo el rótulo (el de social.css, que sigue siendo la geometría en
       móvil/tablet) a barra de 3 px cerca del canto izquierdo del ítem. El
       relleno y el color de la barra ya los pone la regla sin media query de
       más arriba —vale para cualquier anchura—; aquí SOLO cambia la geometría
       de la barra, por eso este bloque no declara `background`.

       `inset-inline-start: var(--espacio-2)` y NO `0` (corrige un fallo real,
       2026-08-25, reportado como «el lado izquierdo se ve plano»): pegada al
       canto, una barra opaca justo al borde de una pastilla con `border-radius:
       14px` (más arriba) compite visualmente con la propia curva —el ojo lee
       el trazo recto de la barra antes que el arco, así que ESE lado deja de
       leerse como redondeado aunque el `border-radius` siga puesto—. Separada
       8 px del canto, la curva de la pastilla queda visible alrededor de la
       barra por los cuatro lados y la pestaña vuelve a leerse circular como
       las otras tres señales (relleno, peso, `aria-selected`) dicen que es.

       Las longhands (`inset-inline-start`/`-end`) ganan a la shorthand
       `inset-inline` del componente por especificidad de la regla, y
       `inset-block` sustituye al `bottom: -1px`. Con `height: auto` y los dos
       insets verticales puestos, la barra mide el alto del botón menos 8 px por
       lado: 32 px de acento sobre un control de 48.

       La pestaña activa sigue diciéndolo de tres formas: color (--acento,
       6,35:1 sobre --fondo en claro y 9,83:1 en oscuro), peso 700 frente a 600,
       y esta barra. Ninguna es imprescindible por sí sola, que es lo que pide
       §2.6.3. */
    .pagina-conectados .pestanas__boton::after {
        inset-inline-start: var(--espacio-2);
        inset-inline-end: auto;
        inset-block: var(--espacio-2);
        width: 3px;
        height: auto;
    }

    /* El panel activo pasa a ser una tarjeta de verdad: los mismos ingredientes
       que `.tarjeta` (app.css) —superficie, filete --linea, --sombra-1— pero
       con --radio-l (24 px) en vez de --radio-m, porque es la caja más grande
       de la pantalla y en Verbena el canto crece con la caja.

       Relleno SOLO vertical, a propósito: las filas de conversación ya traen su
       propio `padding-inline: --espacio-4`, así que el separador de --linea
       entre filas llega de canto a canto de la tarjeta —lista agrupada, no
       tarjetitas sueltas, que es lo que pide la densidad de una bandeja— y el
       texto queda igualmente a 16 px del borde. Los 16 px de arriba y abajo
       además mantienen la primera y la última fila lejos de las esquinas
       redondeadas, así que la tarjeta NO necesita `overflow: hidden` para que
       el fondo de una fila seleccionada no cuadre una esquina — y no ponerlo
       evita recortar los anillos de foco de los controles de la primera y la
       última fila, que es un precio que no compensa.

       En oscuro --sombra-1 vale `none` (ver TOKENS): allí la tarjeta se separa
       del lienzo por color (--superficie sobre --fondo, 1,11:1) y por el
       filete, que es la jerarquía por superficie de §4.3. No hace falta ninguna
       regla aparte: el token ya lo resuelve en los dos esquemas. */
    .pagina-conectados .pestanas__panel {
        grid-column: 2;
        padding: var(--espacio-4) 0;
        background: var(--superficie);
        border: 1px solid var(--linea);
        border-radius: var(--radio-l);
        box-shadow: var(--sombra-1);
    }

    /* El <h2> del panel, que YA EXISTE en el marcado y hoy está solo para el
       lector de pantalla, se revela como titular de la tarjeta. No se duplica
       el tablist ni se inventa un rótulo: es el mismo encabezado de siempre, y
       el único `role="tablist"` de la pantalla sigue siendo la barra lateral.
       Con esto la jerarquía visible por fin coincide con la del DOM: <h1>
       «Social» (oculto por decisión de producto) → <h2> del panel activo.

       Se anula `.oculto-visual` (app.css:344) propiedad por propiedad —las
       nueve— porque el truco de ocultado accesible no se apaga con una sola:
       queda `position: absolute` + 1 px de caja + `clip-path` si se olvida
       cualquiera. Selector con `>` y (0,3,0): alcanza SOLO al hijo directo del
       panel, nunca a otro `.oculto-visual` que viva más adentro (los hay: el
       diálogo de confirmar borrado trae el suyo).

       El borde inferior va en la caja del <h2> y el relleno lateral por dentro:
       así la línea cruza la tarjeta entera —igual que los separadores de las
       filas— mientras el texto se alinea con el contenido de las filas.

       --acento sobre --superficie = 6,89:1 en claro y 8,82:1 en oscuro. Es
       texto grande (--tipo-l, 21 px, peso de <h2>), así que su mínimo sería
       3:1: sobra margen para AAA por los dos lados. El color aquí es jerarquía,
       no estado —no comunica nada que no diga ya el propio texto—, así que no
       le aplica la regla de «ningún estado solo por color». */
    .pagina-conectados .pestanas__panel > .oculto-visual {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 var(--espacio-4);
        padding: 0 var(--espacio-4) var(--espacio-4);
        border: 0;
        border-bottom: 1px solid var(--linea);
        clip-path: none;
        overflow: visible;
        white-space: normal;
        font-size: var(--tipo-l);
        color: var(--acento);
    }

    /* Las dos cajas que social.css centra en --ancho-app dentro del panel
       (lista y barra de herramientas de selección) sueltan ese tope: ya están
       dentro de una tarjeta que hace de columna, y centradas a 30 rem dejarían
       un pasillo vacío a cada lado con las filas colgando en medio. El
       `width: 100%` + `margin-inline: auto` que las acompaña se queda: con
       `max-width: none` no hacen nada, y quitarlos sería reabrir el fallo de
       caja centrada que documentan ellos mismos.

       `.rejilla-conectados` salió de esta lista en 0.11.0: "Conectados" dejó
       de ser una rejilla y pasó a usar `.lista-conversaciones` igual que las
       otras dos pestañas (ver apps/Social/assets/css/social.css, bloque
       "Conectados: la MISMA fila que Conversaciones"), así que ya entra por
       el primer selector. */
    .pagina-conectados .lista-conversaciones,
    .pagina-conectados .conversaciones__herramientas {
        max-width: none;
    }
}