/* =============================================
   SERVICIOS 365 – MAIN

   Dos cosas, en este orden:

   1. LOS COLORES PRINCIPALES DEL SISTEMA. Es el único lugar donde se escriben.
      Los tres CSS de las apps lo importan en su primera línea:

        admin/css/admin.css   @import url('../../css/main.css');
        colab/css/colab.css   @import url('../../css/main.css');
        super/css/super.css   @import url('../../css/main.css');

      Cambiar --primary acá se ve en el panel, en las dos apps y en la portada.

   2. La portada (index.html), el selector de app de la raíz. No es parte de
      ninguna de las tres apps, así que sus estilos viven acá. Van todos
      colgados de .portada para que, al importar este archivo, no se le
      escapen al panel ni a las apps —.card y .brand-mark, por ejemplo,
      existen también en admin.css con otra pinta.
   ============================================= */

/* ── LA TIPOGRAFÍA, SERVIDA DESDE ACÁ ────────────────────────────────────
   Geist vive en css/fonts/, no se le pide a Google. Antes se cargaba con un
   @import a fonts.googleapis.com (y con un <link> repetido en cada HTML), y eso
   traía dos problemas: la app de colaboradores es una PWA y sin internet se
   quedaba sin tipografía, y Google rota los nombres de los .woff2 cada tanto —
   un navegador con el CSS viejo en caché pedía un archivo que ya no existe y se
   comía un 404.

   Geist es una fuente VARIABLE: un archivo por subconjunto cubre todos los
   pesos, por eso va `font-weight: 300 700` (un rango) y no cinco bloques por
   subconjunto. Los cinco archivos son los mismos que servía Google.

   El `unicode-range` es lo que hace que esto no pese: el navegador baja el
   archivo sólo si la página tiene algún carácter de ese rango. En la práctica se
   baja latin y nada más; cyrillic y vietnamese están para no perder glifos que
   hoy sí funcionan.

   Para actualizar la fuente: bajar de nuevo los .woff2 del CSS que sirve
   fonts.googleapis.com y reemplazar los archivos. Nada más apunta a ellos.
   ──────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ── COLORES PRINCIPALES ─────────────────────────────────────────────────
   Lo único que hay que tocar para cambiarle el color al sistema entero.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Hoy el color de la marca es este azul: el mismo del favicon, del manifest
     y del theme-color de todas las páginas. Los nombres son genéricos a
     propósito: si mañana la marca pasa a verde, se cambian los valores y no
     hay que renombrar nada. */
  --primary:      #1A56DB;  /* principal: botones, links, foco, estados activos */
  --primary-dark: #1648C0;  /* el principal más oscuro: hover y botón apretado */
  --primary-soft: #EBF2FF;  /* fondo suave: chips, iconos, filas resaltadas */
  --primary-mid:  #BFCFFF;  /* bordes y separadores teñidos */

  /* Fondo de las pantallas de ingreso y de la portada. Es un degradado, no un
     color suelto: si cambiás --primary, cambiá también estos tres tonos. */
  --login-bg: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #3b82f6 100%);
}

/* Los grises y los colores de estado (verde, rojo, ámbar) NO están acá: hoy el
   panel y las apps usan tonos distintos y unificarlos cambiaría cómo se ven.
   Cada CSS define los suyos. */


/* ═════════════════════════════════════════════════════════════════════════
   PORTADA (index.html)
   ═════════════════════════════════════════════════════════════════════════ */

/* El reset incluye a .portada, no sólo a lo que tiene adentro. Si se queda
   afuera, el <body> conserva los 8px de margen que trae el navegador y su
   box-sizing content-box, así que los 16px de margen y los 48 de padding se
   suman a los 100vh: 64px de más y una barra de scroll al pedo. */
.portada, .portada *, .portada *::before, .portada *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

.portada {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--login-bg);
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.portada .card {
  background: #fff; border-radius: 20px; padding: 40px 32px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

/* ── MARCA ── */
.portada .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; justify-content: center; }
.portada .brand-mark {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.portada .brand-name { font-size: 20px; font-weight: 700; color: #111827; }
.portada .brand-name span { color: var(--primary); }

/* ── OPCIONES (una por app) ── */
.portada .opt {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  border: 1.5px solid #D1D5DB; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
  color: #111827; transition: border-color .15s, box-shadow .15s;
}
.portada .opt:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.portada .opt-ico {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.portada .opt-title { font-size: 15px; font-weight: 700; }
.portada .opt-sub { font-size: 12px; color: #6B7280; margin-top: 2px; }
.portada .opt .bi-chevron-right { margin-left: auto; color: #9CA3AF; }