/* ============================================================
   MURO — TEMA (variables de diseño)
   /sistema/muro/estilos/tema.css
   ------------------------------------------------------------
   TODO el color / radio / espaciado del muro vive acá como
   CSS custom-properties para poder re-tematizar de un lugar.
   Look propio, estilo Instagram — INTENCIONALMENTE distinto a
   /publico/ (feed de tarjetas limpio, imagen-forward).
   ============================================================ */

:root {
    /* ── Marca DeMusculos.com (acentos y gradientes) ── */
    --muro-brand-1:      #6366f1;   /* indigo  */
    --muro-brand-2:      #a855f7;   /* violeta */
    --muro-brand:        #6d28d9;   /* sólido para textos/links */
    --muro-brand-grad:   linear-gradient(135deg, var(--muro-brand-1), var(--muro-brand-2));

    /* ── Superficies ── */
    --muro-bg:           #fafafa;   /* fondo del feed (gris casi blanco) */
    --muro-surface:      #ffffff;   /* tarjetas / barras */
    --muro-surface-2:    #f4f4f5;   /* input del composer / hover suave */
    --muro-border:       #e5e7eb;   /* bordes sutiles */
    --muro-border-2:     #d4d4d8;   /* bordes marcados */

    /* ── Texto ── */
    --muro-text:         #18181b;   /* principal        · 17,7:1 sobre blanco */
    --muro-text-soft:    #52525b;   /* secundario       ·  7,7:1 sobre blanco */
    --muro-text-mute:    #a1a1aa;   /* 🔴 SOLO BORDES E ICONOS — ver el recuadro de abajo */
    --muro-text-mute-2:  #6b6b76;   /* terciario LEGIBLE ·  5,3:1 sobre blanco */

    /* ── Acentos de acciones ── */
    --muro-like:         #ef4444;   /* corazón, badges, iconos — NO para texto (3,8:1) */
    --muro-danger-text:  #b91c1c;   /* el MISMO rojo pero legible como texto · 6,5:1 */
    --muro-ok-text:      #15803d;   /* verde de "sumaste puntos" legible · 5,0:1 */
    --muro-verificado:   #3b82f6;   /* tilde de cuenta verificada */

    /* ── Gradientes demo (avatares / fotos de posts) ── */
    --muro-g1a:#6366f1; --muro-g1b:#a855f7;   /* indigo → violeta */
    --muro-g2a:#f43f5e; --muro-g2b:#f59e0b;   /* rosa → ámbar */
    --muro-g3a:#06b6d4; --muro-g3b:#3b82f6;   /* cian → azul */
    --muro-g4a:#10b981; --muro-g4b:#84cc16;   /* verde → lima */
    --muro-g5a:#ec4899; --muro-g5b:#8b5cf6;   /* fucsia → púrpura */
    --muro-g6a:#f97316; --muro-g6b:#ef4444;   /* naranja → rojo */
    --muro-g7a:#0ea5e9; --muro-g7b:#22d3ee;   /* celeste → turquesa */

    /* ── Métricas de layout ── */
    --muro-topbar-h:     56px;
    --muro-bottomnav-h:  58px;
    --muro-feed-max:     620px;     /* ancho de la columna en PC */

    /* ── Radios ── */
    --muro-radius:       16px;
    --muro-radius-sm:    10px;
    --muro-radius-pill:  999px;

    /* ── Sombras ── */
    --muro-shadow-sm:    0 1px 2px rgba(24,24,27,.05);
    --muro-shadow:       0 1px 3px rgba(24,24,27,.07), 0 4px 12px rgba(24,24,27,.04);

    /* ── Tipografía ── */
    --muro-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   🔴 CONTRASTE — LA REGLA, Y POR QUÉ EXISTEN 3 TOKENS NUEVOS
   (tanda 18, 2026-07-28 · CSS-10 y CSS-11)
   ------------------------------------------------------------
   Móvil es LA vista de este sitio, y al sol un texto de bajo
   contraste no es "sutil": no se lee. Medido con la fórmula
   WCAG (AA pide 4,5:1 para texto normal):

     --muro-text-mute  #a1a1aa  =>  2,56:1 sobre blanco
                                    2,33:1 sobre --muro-surface-2
                                    2,34:1 sobre el violeta de "no leído"
     --muro-like       #ef4444  =>  3,76:1 como TEXTO
     el verde          #16a34a  =>  3,30:1 como TEXTO

   Los tres estaban pintando datos que el usuario necesita leer:
   la hora de cada publicación, el adelanto de cada mensaje
   privado y la FECHA DE UN MOVIMIENTO DE PUNTOS (o sea, plata).

   🔑 EL PROYECTO YA HABÍA MEDIDO ESTO UNA VEZ y lo arregló en un
   solo lugar: el comentario de `.muro-condlink a` (muro.css) dice
   textualmente «con el mute quedaba en 2,3:1». Nunca se generalizó.
   Este bloque es esa generalización.

   ── CÓMO SE USA CADA UNO ──────────────────────────────────
   · --muro-text-mute    -> BORDES, ÍCONOS, chevrons, placeholders,
                            puntitos. Todo lo que NO es texto que
                            haya que leer. Se queda como estaba:
                            son 47 declaraciones y ninguna miente.
   · --muro-text-mute-2  -> TEXTO terciario de verdad (metadatos,
                            fechas, contadores, avisos). Son 9
                            clases, elegidas una por una.
   · --muro-danger-text  -> el rojo cuando pinta TEXTO. El
                            --muro-like se queda para el corazón,
                            los badges y los íconos, donde el
                            contraste lo da el fondo y no la letra.
   · --muro-ok-text      -> ídem para el verde.

   🔴 POR QUÉ #6b6b76 Y NO EL #6b7280 QUE SE PROPUSO PRIMERO:
   #6b7280 da 4,40:1 sobre --muro-surface-2 y 4,41:1 sobre el
   violeta de "no leído" — o sea que NO llega a 4,5 justo en dos
   de los cuatro fondos donde se usa, y encima es un gris azulado
   que rompe la rampa zinc del resto (#18181b / #52525b / #a1a1aa
   son todos zinc). #6b6b76 llega a 4,79:1 en el PEOR de los
   cuatro fondos y mantiene la familia.
   ⚠️ Si algún día se agrega un fondo nuevo, hay que volver a
   medir: "pasa en blanco" no quiere decir que pase en todos.
   ============================================================ */