/* ============================================================
   InstaFans — AGN LAB  (capa de prueba, NO toca app.css)
   ------------------------------------------------------------
   Objetivo: ver cómo queda AGN a 10px + MAYÚSCULAS + aireado
   en toda la UI mecánica ("la pp"), con estética minimal.

   · Todo se controla desde el bloque :root de abajo → cambia
     un valor y se actualiza TODA la app.
   · Reversible en 1 segundo:
       - Quita el atributo  data-agn-lab  del <html>  ➜ vuelve al estilo original.
       - O elimina el <link> de este archivo en index.html.
   · Cárgalo SIEMPRE después de app.css.
   ============================================================ */

:root {
  /* —— palancas de prueba —— */
  --agn-font:    "AGN", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --agn-size:    10px;       /* tamaño base de la UI mecánica   */
  --agn-track:   0.18em;     /* letter-spacing "que respire"    */
  --agn-leading: 1.8;        /* interlineado aireado            */
  --agn-weight:  500;        /* Medium = look minimal           */
  --agn-case:    uppercase;  /* uppercase | none                */

  --agn-size-menu: 10px;     /* opciones de menú del drawer      */
  --agn-size-nav:  9px;      /* labels de la barra inferior      */
}

/* ===== INTERRUPTOR MAESTRO =================================================
   Todo lo de abajo solo aplica si <html data-agn-lab>.  Sin el atributo,
   esta hoja no hace nada y la app se ve como antes. ======================== */

/* 1) Redirige la fuente "mecánica" a AGN → cualquier elemento que use
      --if-font-mono cambia a AGN sin tocar app.css. */
html[data-agn-lab] {
  --if-font-mono: var(--agn-font);
}

/* 2) Normaliza la UI mecánica a 10px + mayúsculas + aire.
      Cubre las clases que app.css marca como mecánicas. */
html[data-agn-lab] :is(
  .ui-mech, .btn, .badge, .card-title, .field label, .nav-label, .section-title,
  .brand, .drawer-head .brand,
  .panel-title, .panel-comment-form button,
  .opacity-row span, .opacity-row b,
  .profile-head h2, .profile-stats span,
  .modal-box h3, .mini-label,
  .cap-grp > label, .cap-grp .unit, .cap-grp b,
  .av-label
) {
  font-family: var(--agn-font);
  font-size: var(--agn-size);
  font-weight: var(--agn-weight);
  letter-spacing: var(--agn-track);
  text-transform: var(--agn-case);
  line-height: var(--agn-leading);
}

/* 3) La marca puede querer respirar un poco más que el resto. */
html[data-agn-lab] .brand,
html[data-agn-lab] .drawer-head .brand {
  letter-spacing: calc(var(--agn-track) + 0.04em);
}

/* 3.b) Opciones de menú del drawer → AGN, MAYÚSCULAS, 9px.
       El icono <i> conserva su tamaño (no se toca su font-family). */
html[data-agn-lab] .drawer-body .drawer-item {
  font-family: var(--agn-font);
  font-size: var(--agn-size-menu);
  font-weight: var(--agn-weight);
  letter-spacing: var(--agn-track);
  text-transform: var(--agn-case);
}

/* 4) "Minimal / que respire": afina lo justo el chrome para que el
      contenido (fotos, captions) siga mandando. Solo afecta al chrome. */
html[data-agn-lab] .bottom-nav .nav-label { font-size: var(--agn-size-nav); }
html[data-agn-lab] .panel-title           { opacity: 0.85; }

/* 5) Editor de captions: AGN+MAYÚSCULAS ensancha el texto y el label mecánico
      (p. ej. "INTERLINEADO") se salía de sus 78px y PISABA el slider, dejándolo
      inservible. Lo recortamos a su caja y damos ancho propio al control. */
html[data-agn-lab] .cap-grp > label {
  font-size: 9px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-agn-lab] .cap-grp input[type="range"] { flex: 1; min-width: 0; }

/* ===== RESPETO MULTIIDIOMA ================================================
   En RTL/CJK el uppercase no aplica y el tracking ancho rompe: se relaja,
   igual que hace app.css. ================================================== */
html[data-agn-lab][dir="rtl"] :is(.ui-mech,.btn,.nav-label,.field label,.section-title,.panel-title),
html[data-agn-lab][lang="zh"] :is(.btn,.nav-label),
html[data-agn-lab][lang="ja"] :is(.btn,.nav-label) {
  text-transform: none;
  letter-spacing: 0.04em;
}