/* =====================================================================
   MiesApp — TOKENS
   Todo valor global de la app vive acá. Cambiar el acento, el espaciado
   base o un radio es tocar UNA variable, no buscar por archivo.
   Los valores son EXACTAMENTE los que usaba FlorApp: esto es una
   reorganización, no un rediseño. Nada se ve distinto.
   ===================================================================== */
:root {
  color-scheme: light;

  /* ---- Color: superficies y texto ---- */
  --bg:        #ffffff;
  --surf:      #f7f7f8;
  --text:      #202123;
  --sec:       #6e6e80;
  --muted:     #8e8ea0;
  --border:    #e3e3e8;
  --border2:   #d1d1db;
  --primary:   #111111;
  --onprimary: #ffffff;

  /* ---- Color: estados ---- */
  --ok:    #10a37f;
  --okbg:  #e6f6f1;
  --bad:   #d92d20;
  --badbg: #fdeceb;
  --acc:   #3b6fd4;
  --accbg: #eaf0fb;

  /* ---- Color de marca (SE SOBREESCRIBE EN RUNTIME) ----
     `--acento` es EL color de acento. Su valor por defecto es el AZUL DE
     MIES (#2684ff): es lo que se ve FUERA de la sesión (splash y pantalla
     de acceso). Ya adentro, después del login, la app hace
       document.documentElement.style.setProperty('--acento', color_marca)
     (UI.aplicarAcento) y toda la app se repinta con el color de la
     profesional. Si esa no tiene color propio, queda el azul de Mies.
     `--marca` queda como alias del nombre que usaba FlorApp: el markup y el
     JS heredados que dicen var(--marca) siguen funcionando y apuntan acá. */
  --mies:   #2684ff;   /* azul de la marca Mies (fijo, no se sobreescribe) */
  --acento: #2684ff;
  --marca:  var(--acento);

  /* ---- Radios ---- (los que se repiten en la app; los de una sola
     aparición quedan literales, comentados, en componentes/layout) */
  --rad-xs:    9px;    /* tabs */
  --rad-sm:   10px;    /* seg, chip, hint, calendario, cards chicas */
  --rad:      12px;    /* botones, inputs, la mayoría */
  --rad-lg:   14px;    /* card, hc3 */
  --rad-xl:   18px;    /* card en tablet */
  --rad-pill: 99px;    /* pills, badge — valor del .pill original (el badge
                          usaba 999px, imperceptible en 17px de alto: se unifica) */
  --rad-round: 50%;    /* avatar, botones redondos */

  /* ---- Espaciado ---- (escala real de FlorApp) */
  --sp-1:  6px;
  --sp-2:  8px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 16px;
  --sp-7: 18px;

  /* ---- Sombras ---- */
  --sh-tab:   0 1px 2px rgba(0, 0, 0, .06);
  --sh-toast: 0 4px 16px rgba(0, 0, 0, .2);

  /* ---- Z-index (capas nombradas, de menor a mayor) ---- */
  --z-sticky:  5;
  --z-cal:    90;
  --z-header: 100;
  --z-toast:  99;
  --z-loader: 999;
  --z-splash: 1000;

  /* ---- Movimiento ---- */
  --tr: .15s ease;

  /* ---- Layout ---- */
  --app-max:        480px;
  --app-max-tablet: 900px;
  --app-max-desk:  1100px;

  /* Alto real de la app y desplazamiento del teclado. Los mide el JS con
     visualViewport (ver initTeclado en el frontend). Acá van los defaults. */
  --vh:    100dvh;
  --vvtop: 0px;
}