/* ═══════════════════════════════════════════════════════════════════
   FarmaLink · capa macOS · 10/09/2026

   Diego, viendo la comparativa ya restilada: *"creo que me gustó mucho
   el diseño y la letra, podemos cambiar todos los html estilo macOs?"*

   CÓMO FUNCIONA
   Se carga DESPUÉS del <style> propio de cada pantalla, así que gana la
   cascada sin pelear con nadie por especificidad. Cada página conserva
   su estructura, sus clases y su JavaScript intactos: esto sólo
   reescribe el vestido.

   PARA QUITARLO DE TODO FARMALINK: vaciar este archivo. No hay nada más
   que deshacer.

   QUÉ SÍ TOCA Y QUÉ NO
   Toca lo que es igual en las 60 pantallas: la letra, los grises, las
   líneas, las sombras, los cantos y los controles.

   NO toca separaciones ni tamaños --el `padding` y el `font-size` de
   cada pantalla están calibrados y moverlos a ciegas rompe acomodos que
   ya funcionan--, ni ninguna clase propia de una pantalla. Lo específico
   se hace pantalla por pantalla y mirándola.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Los grises de una ventana de Mac: más fríos y más claros. Las
     líneas van como alpha sobre el fondo en vez de un gris sólido, así
     se hunden en cualquier superficie en vez de recortarla. */
  --bg:#F1F2F6;
  --surface:#FFFFFF;
  --border:rgba(22,28,45,.075);
  --text:#1C2233;
  --muted:#7C859C;
  --radius:13px;
  --radius-sm:9px;

  /* Sombra en dos capas: una pegada que dibuja el canto y otra abierta
     que da la altura. Es lo que hace que una tarjeta FLOTE en vez de
     verse recortada con tijeras. */
  --shadow:0 0 0 .5px rgba(22,28,45,.05), 0 1px 2px rgba(22,28,45,.05),
           0 8px 24px -8px rgba(22,28,45,.14);
  --shadow-hover:0 0 0 .5px rgba(22,28,45,.06), 0 2px 4px rgba(22,28,45,.06),
                 0 14px 32px -10px rgba(22,28,45,.2);
}

/* ── La letra ──────────────────────────────────────────────────────
   La del SISTEMA, no una descargada: San Francisco en Mac, Segoe UI
   Variable en las Windows de las sucursales. Las dos son exactamente la
   cara que Diego señaló, y ninguna cuesta una descarga ni depende de
   que Google Fonts responda.

   Va con `!important` sólo aquí, en el <body>, porque cada pantalla la
   declara en su propio `body{}` y ésa es la única forma de ganarle sin
   editar las sesenta. */
body{
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui,
    'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Los números de las tablas y de los campos, TABULARES: alinean en
   columna sin necesidad de una monoespaciada, que en una tabla de
   precios se lee como terminal. La mono se queda donde sí es código
   --EAN, claves, folios-- porque esas clases no se tocan aquí. */
table td, table th, input, select, .num, .n{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── Pelo, no cuadrícula ───────────────────────────────────────────
   Un borde de 1px en cada celda es una cuadrícula, y una cuadrícula se
   lee como Excel. Medio píxel se lee como separación. */
table thead th{border-bottom-width:.5px}
table tbody tr{border-bottom-width:.5px}

/* ── Los cantos ────────────────────────────────────────────────────
   Sin tocar el tamaño: sólo el radio y cómo responden al tacto. */
button, .btn, .boton, .tecla, .metodo{
  border-radius:10px;
  letter-spacing:-.005em;
  transition:filter .15s ease, transform .09s ease, box-shadow .15s ease;
}
button:active, .btn:active, .boton:active, .metodo:active{
  transform:scale(.985);
  filter:brightness(.96);
}
input, select, textarea{
  border-radius:9px;
  transition:box-shadow .15s ease, border-color .15s ease;
}
/* El anillo de foco de Mac: un halo suave en vez del contorno del
   navegador. Se conserva VISIBLE -- quien navega con el tabulador
   necesita ver dónde está parado. */
input:focus, select:focus, textarea:focus, button:focus-visible,
a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3.5px rgba(91,143,224,.2);
}

/* ── Cristal esmerilado en las barras pegadas ──────────────────────
   Sólo donde ya había una barra sticky con fondo: se le agrega el
   desenfoque, que es lo que la hace ver como una ventana de macOS y no
   como una franja de color. */
header[style*="sticky"], header, .barra-sticky, .sticky-header{
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}

/* ── Movimiento con medida ─────────────────────────────────────────
   Quien tenga apagadas las animaciones del sistema no ve ninguna. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── Impresión ─────────────────────────────────────────────────────
   Los tickets y los reportes se imprimen en térmica y en láser: ahí no
   van sombras ni fondos de color, que salen como manchas grises. */
@media print{
  *{box-shadow:none !important; backdrop-filter:none !important}
}
