/* ============================================================
   SOCIOS ECOM — Design tokens
   Un único sistema de tokens. Prefijo: --se-*
   Tema claro por defecto; oscuro con [data-tema="oscuro"].
   ============================================================ */

:root {
  /* ---------- Marca ---------- */
  --se-verde: #14c39a;
  --se-verde-claro: #2ee0b5;
  --se-verde-tinta: #0a7a60;          /* verde legible sobre papel */
  --se-verde-tint: #e6f8f3;           /* fondo tintado suave */
  --se-verde-rgb: 20, 195, 154;

  --se-dorado: #e6b34a;
  --se-dorado-tinta: #8a6417;
  --se-dorado-tint: #fbf2de;
  --se-dorado-rgb: 230, 179, 74;
  /* El brillo del sello del ganador: el mismo oro, un punto mas claro. */
  --se-dorado-claro: #f2cf86;

  /* ---------- Superficies ---------- */
  --se-papel: #ffffff;
  --se-papel-calido: #fbfaf7;
  --se-papel-hundido: #f4f6f5;        /* filas, zonas rebajadas */
  --se-control-fondo: #e6e9e8;        /* raíl de conmutadores */
  --se-cubierta: #0e100f;             /* chasis: sidebar y marco */
  --se-cubierta-alta: #191d1b;
  --se-cubierta-linea: #242927;

  /* ---------- Tinta (texto) ---------- */
  --se-tinta: #12171a;
  --se-tinta-2: #555f5c;
  --se-tinta-3: #6e7873;
  --se-tinta-inversa: #eef1f0;
  --se-sobre-verde: #12171a;          /* texto sobre el verde de marca */
  --se-sobre-dorado: #12171a;

  /* ---------- Líneas y retícula ---------- */
  --se-linea: #dce1de;
  --se-linea-suave: #edefee;
  --se-linea-fuerte: #c6cecb;
  /* Lo que antes se contorneaba en negro: un borde neutro, más firme que la línea. */
  --se-borde-marcado: #bfc8c3;
  --se-reticula: rgba(40, 70, 120, .045);
  --se-reticula-paso: 30px;

  /* ---------- Semánticos ---------- */
  --se-ok: #166534;      --se-ok-tint: #e7f5ec;
  --se-warn: #92400e;    --se-warn-tint: #fbf0e2;
  --se-error: #b91c1c;   --se-error-tint: #fbebeb;
  --se-info: #1d4ed8;    --se-info-tint: #e9eefc;
  --se-violeta: #6d28d9; --se-violeta-tint: #f0eafd;

  /* ---------- Tipografía ---------- */
  /* Geist en toda la plataforma, como en la portada (estilo Frame.io) */
  --se-fuente: "Geist", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --se-fuente-display: "Geist", "Hanken Grotesk", system-ui, sans-serif;
  --se-fuente-mono: "Geist Mono", "Spline Sans Mono", ui-monospace, monospace;
  /* Los titulares no van en negrita: peso medio y tracking negativo */
  --se-peso-titulo: 500;
  --se-fuente-nota: "Caveat", cursive;

  --se-fs-display: 38px;
  --se-fs-h2: 22px;
  --se-fs-h3: 17px;
  --se-fs-body: 14px;
  --se-fs-sm: 13px;
  --se-fs-label: 11px;
  --se-fs-xs: 12px;

  --se-tracking-display: -.035em;
  --se-lh-ajustada: 1.05;
  --se-lh-normal: 1.55;

  /* ---------- Forma ---------- */
  --se-r-card: 12px;
  --se-r-campo: 10px;
  --se-r-boton: 100px;        /* botones en píldora */
  --se-r-pill: 999px;
  --se-r-sello: 4px;

  /* ---------- Profundidad ---------- */
  /* Elevación suave en tres niveles. Las tarjetas sobre el papel casi no
     llevan sombra: las separa su borde. El antiguo "sello" (sombra negra
     desplazada) se retira; el nombre se mantiene para no tocar 20 reglas. */
  --se-sombra-papel: 0 1px 2px rgba(18, 23, 26, .05);
  --se-sombra-suave: 0 16px 40px -16px rgba(18, 23, 26, .28), 0 2px 6px rgba(18, 23, 26, .06);
  --se-sombra-sello: 0 1px 2px rgba(18, 23, 26, .08), 0 2px 8px -3px rgba(18, 23, 26, .12);
  --se-sombra-sello-sm: 0 1px 2px rgba(18, 23, 26, .08);
  --se-anillo-foco: 0 0 0 3px rgba(var(--se-verde-rgb), .32);

  /* ---------- Espaciado ---------- */
  --se-sp-1: 4px;  --se-sp-2: 8px;  --se-sp-3: 12px; --se-sp-4: 16px;
  --se-sp-5: 20px; --se-sp-6: 24px; --se-sp-7: 32px; --se-sp-8: 40px;

  /* ---------- Layout ---------- */
  --se-sidebar: 250px;
  --se-sidebar-plegada: 64px;
  --se-topbar: 56px;
  --se-ancho-contenido: 1120px;
  --se-perforacion: 40px;

  /* ---------- La app en el móvil (2026-11-10) ---------- */
  --se-tactil: 44px;          /* lo mínimo que se toca con el dedo (Apple y Google) */
  --se-margen-movil: 16px;    /* el margen lateral fijo de cada pantalla en el móvil */
  --se-barra-app: 58px;       /* la barra de abajo, sin la zona de la raya de inicio */
  --se-zona-arriba: env(safe-area-inset-top, 0px);
  --se-zona-abajo: env(safe-area-inset-bottom, 0px);
  --se-fs-campo: 16px;        /* campos en el móvil: con menos, iOS amplía la página */
  --se-pulsar: transform .12s var(--se-salida), opacity .12s ease;

  /* ---------- La barra lateral y los menús que flotan ----------
     Antes eran negros en los dos temas; ahora siguen al tema. */
  --se-lateral-fondo: #eef1ef;
  --se-lateral-tinta: #12171a;
  --se-lateral-tinta-2: #4d5652;
  --se-lateral-tinta-3: #7d8682;
  --se-lateral-hover: rgba(16, 24, 26, .05);
  --se-lateral-linea: rgba(16, 24, 26, .08);
  --se-lateral-activo: rgba(20, 195, 154, .16);
  --se-flotante-fondo: #ffffff;
  --se-flotante-sombra: 0 0 0 1px rgba(16, 24, 26, .08), 0 24px 48px -20px rgba(16, 24, 26, .28);

  /* ---------- Movimiento ---------- */
  --se-trans: .2s ease;
  --se-salida: cubic-bezier(.22, 1, .36, 1);

  /* ---------- Capas ---------- */
  --se-z-sticky: 100;
  --se-z-drawer: 400;
  --se-z-modal: 500;
  --se-z-toast: 600;

  /* ---------- Acción principal y navegación activa ----------
     En claro, el verde de siempre; en oscuro, la píldora blanca de la portada. */
  --se-accion: var(--se-verde);
  --se-accion-hover: var(--se-verde-claro);
  --se-sobre-accion: var(--se-sobre-verde);
  --se-nav-activo-fondo: var(--se-verde);
  --se-nav-activo-texto: var(--se-sobre-verde);
  --se-nav-activo-icono: var(--se-sobre-verde);
}

/* ============================================================
   Tema oscuro — sólo se redefinen los roles, nunca los componentes
   ============================================================ */
[data-tema="oscuro"] {
  --se-papel: #15191b;
  --se-papel-calido: #1b2023;
  --se-papel-hundido: #1f2527;
  --se-control-fondo: #22282a;
  --se-cubierta: #0a0c0b;
  --se-cubierta-alta: #141816;
  --se-cubierta-linea: #222826;

  --se-tinta: #eceeed;
  --se-tinta-2: #b3bab7;
  --se-tinta-3: #8d9591;
  --se-tinta-inversa: #12171a;

  --se-verde-tinta: #34d6b0;
  --se-verde-tint: #133029;
  --se-dorado-tinta: #f0c878;
  --se-dorado-tint: #332912;

  --se-linea: #2e3538;
  --se-linea-suave: #232829;
  --se-linea-fuerte: #3c4447;
  --se-reticula: rgba(150, 200, 190, .06);

  --se-ok: #6fd39a;      --se-ok-tint: #1d3329;
  --se-warn: #f2b25c;    --se-warn-tint: #332a1c;
  --se-error: #f58a8a;   --se-error-tint: #331f20;
  --se-info: #8fb4ff;    --se-info-tint: #1b2537;
  --se-violeta: #c4a9ff; --se-violeta-tint: #241e33;

  --se-sombra-papel: 0 1px 2px rgba(0, 0, 0, .3);
  --se-sombra-suave: 0 16px 40px -16px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  --se-sombra-sello: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -3px rgba(0, 0, 0, .5);
  --se-sombra-sello-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --se-borde-marcado: #3f484b;
}

/* ============================================================
   Tema oscuro · sala de proyección (arquitectura de Frame.io)
   Lienzo medianoche, todo acromático y el verde solo de acento.
   Se declara después del bloque oscuro anterior y lo sustituye.
   ============================================================ */
[data-tema="oscuro"] {
  --se-papel: #0e0f12;
  --se-papel-calido: #111316;
  --se-papel-hundido: #0a0b0d;
  --se-control-fondo: #17191d;
  --se-cubierta: #050506;
  --se-cubierta-alta: #0b0c0e;
  --se-cubierta-linea: rgba(255, 255, 255, .07);

  --se-tinta: #fcfcfc;
  --se-tinta-2: #b0b0bc;
  --se-tinta-3: #8c8c97;
  --se-tinta-inversa: #09090b;

  --se-linea: rgba(255, 255, 255, .08);
  --se-linea-suave: rgba(255, 255, 255, .05);
  --se-linea-fuerte: rgba(255, 255, 255, .14);
  --se-borde-marcado: rgba(255, 255, 255, .22);
  --se-reticula: transparent;

  --se-verde-tinta: #2fd4a8;
  --se-verde-tint: rgba(20, 195, 154, .12);
  --se-dorado-tinta: #f0c878;
  --se-dorado-tint: rgba(230, 179, 74, .12);

  --se-ok: #34d399;      --se-ok-tint: rgba(52, 211, 153, .12);
  --se-warn: #f2b25c;    --se-warn-tint: rgba(242, 178, 92, .12);
  --se-error: #ff7b8f;   --se-error-tint: rgba(255, 123, 143, .12);
  --se-info: #8fb4ff;    --se-info-tint: rgba(143, 180, 255, .12);

  --se-sombra-papel: inset 0 1px 0 rgba(255, 255, 255, .03);
  --se-sombra-suave: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  --se-sombra-sello: none;
  --se-sombra-sello-sm: none;

  --se-accion: #fcfcfc;
  --se-accion-hover: #e6e6e6;
  --se-sobre-accion: #09090b;
  --se-nav-activo-fondo: rgba(255, 255, 255, .08);
  --se-nav-activo-texto: #fcfcfc;
  --se-nav-activo-icono: #14c39a;

  --se-lateral-fondo: #050505;
  --se-lateral-tinta: #ffffff;
  --se-lateral-tinta-2: #a3a3a3;
  --se-lateral-tinta-3: #5e5e5e;
  --se-lateral-hover: rgba(255, 255, 255, .045);
  --se-lateral-linea: rgba(255, 255, 255, .06);
  --se-lateral-activo: rgba(20, 195, 154, .14);
  --se-flotante-fondo: linear-gradient(180deg, #15171b, #0c0d10);
  --se-flotante-sombra: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 50px -24px rgba(20, 195, 154, .45);
}