/* Copia de rebranding/sistema/soshally-tokens.css hecha por orquestador/tokens.mjs: no se edita a mano.
   Sin su @import de Google: las letras se sirven desde /fonts (orquestador/fuentes-locales.mjs). */
/* ==========================================================================================================
   Soshally · colores, letras y tamaños (29 sept 2026)
   Un solo archivo para el panel de la creadora y la landing. Los valores salen del panel final
   (auditoria/informe/mesa/panel-final.html), que se integra primero en la app: si la landing usa otro valor
   para lo mismo, manda este archivo y la diferencia se le dice a Ana.
   Reglas de uso:
   - La interfaz va en blanco, grises y tinta. El color va en los datos, con significado.
   - Solo estos colores. Las transparencias, solo de negro o de blanco (sombras y velos).
   - Letra única: DM Sans. Playfair Display 600 cursiva, solo en titulares de la landing (el panel no la usa).
     La regla de la marca dice dos veces; la landing la usa en tres titulares: lo decide Ana.
   ========================================================================================================== */


:root {
  color-scheme: light;

  /* ---------- Base: blanco, tinta y grises ---------- */
  --pg: #ffffff;          /* fondo de la página */
  --card: #ffffff;        /* fondo de tarjetas, ventanas y menús */
  --ink: #0e0e0e;         /* tinta: textos, cifras, botones negros */
  --soft: #3a3a3a;        /* texto secundario */
  --mut: #6c6c6c;         /* texto apagado: etiquetas, notas, ejes */
  --gris-4: #8b8a95;      /* ejes finos, horas pequeñas */
  --gris-3: #bdbcc7;
  --gris-2: #cdccd6;      /* líneas discontinuas, pétalos sin color */
  --gris-1: #dddce4;      /* bordes de campos vacíos */
  --line: #ecebf1;        /* bordes y separadores */
  --pista: #efedf5;       /* fondo de barras y pistas vacías */
  --suelo: #f6f5f9;       /* fondos suaves: bloques internos, filas, grupos de botones */

  /* ---------- La paleta: seis colores claros y sus versiones con más cuerpo ---------- */
  --rosa: #f5c2da;     --rosa-v: #e58bb8;
  --lila: #d5c4f6;     --lila-v: #a98bef;
  --pervinca: #b3c8fa; --pervinca-v: #7c9bf2;
  --agua: #a6e3ee;     --agua-v: #4fc1d3;
  --menta: #c3efd3;    --menta-v: #56c98f;
  --champan: #f3eac1;  --champan-v: #d9bd5a;
  --gris: #dcdae3;     --gris-v: #c9c7d1;     /* lo descartado */

  /* El degradado de la marca, los seis en su orden y repartidos por igual: el saludo, los anillos, lo nuevo */
  --luz: linear-gradient(90deg, var(--rosa), var(--lila), var(--pervinca), var(--agua), var(--menta), var(--champan));
  /* El degradado del logotipo: las barras de las gráficas, cada una con su trozo, de izquierda a derecha */
  --degradado: linear-gradient(90deg, var(--lila), var(--pervinca), var(--agua), var(--menta));
  /* Por cobrar: rayas champán */
  --rayas: repeating-linear-gradient(-45deg, #efe3b0 0 6px, #f9f4dd 6px 12px);

  /* ---------- Semáforo (solo para estados, nunca de adorno) ---------- */
  --vivo: #1f9d57;   --vivo-bg: #e7f5ec;    /* sube, hecho, en vivo */
  --alerta: #c23a3a; --alerta-bg: #fbe9e9;  /* baja, días de retraso, errores */
  /* Lo cobrado y lo que sube, en menta; la comparación que sube, en pastilla menta con letra en tinta */

  /* ---------- Etapas de las marcas: el claro en las barras, el fuerte en puntos y etiquetas ---------- */
  --etapa-sin-abrir: var(--rosa);          --etapa-sin-abrir-v: var(--rosa-v);
  --etapa-solo-abrio: var(--lila);         --etapa-solo-abrio-v: var(--lila-v);
  --etapa-en-negociacion: var(--champan);  --etapa-en-negociacion-v: var(--champan-v);
  --etapa-ganada: var(--agua);             --etapa-ganada-v: var(--agua-v);
  --etapa-descartada: var(--gris);         --etapa-descartada-v: var(--gris-v);

  /* ---------- Estados de los acuerdos (el color del punto; la etiqueta, ese color al 26 % sobre blanco) ---------- */
  --estado-propuesta: var(--champan-v);    /* etiqueta #f5eed4 */
  --estado-aceptado: var(--agua-v);        /* etiqueta #d1eff4 */
  --estado-entregado: var(--pervinca-v);   /* etiqueta #dde5fc */
  --estado-factura-enviada: var(--lila-v); /* etiqueta #e9e1fb */
  --estado-factura-vencida: var(--rosa-v); /* etiqueta #f8e1ed */
  --estado-cobrado: var(--menta-v);        /* etiqueta #d3f1e2 */
  --estado-descartado: var(--gris-v);      /* etiqueta #f1f0f3 */
  --estado-cancelado: var(--gris-v);       /* provisional: etiqueta blanca con borde var(--line) y el punto vacío */

  /* Los iconos de los avisos, cada uno con el color de su tipo */
  --icono-enlace: var(--agua);     /* enlace, calendario */
  --icono-marca: var(--champan);   /* abrió, tarifas, videos, tiempo */
  --icono-mensaje: var(--pervinca);/* correo, contacto, hecho */
  --icono-tuyo: var(--lila);       /* tus recordatorios */
  --icono-dinero: var(--menta);    /* factura, cobro; rosa si va con retraso */

  /* ---------- Letras ---------- */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;   /* solo landing */
  /* Pesos: 500 texto · 600 estructura (etiquetas, botones) · 700 cifras, títulos y lo importante */
  --t-micro: 11px;       /* ejes, días del calendario, horas en gráficas */
  --t-kicker: 11.5px;    /* rótulos en mayúsculas (700, espaciado 1,2 px; en la marca 600 y 1,84 px) e insignias */
  --t-pequeno: 12px;     /* etiquetas de estado, pastillas, textos debajo de una cifra */
  --t-nota: 12.5px;      /* notas y ayudas */
  --t-apoyo: 13px;       /* rótulo de dato (600, apagado), botones pequeños (600) */
  --t-lista: 13.5px;     /* filas de tablas y listas, botones de grupo (600) */
  --t-texto: 14px;       /* texto de tarjetas y ventanas */
  --t-campo: 14.5px;     /* campos de formulario (500) */
  --t-titulo-tarjeta: 15px;  /* título de tarjeta (700) */
  --t-cuerpo: 15.5px;    /* cuerpo de la página (500, interlineado 1,5) */
  --t-destacado: 16px;   /* cifras medianas, nombre en una fila */
  --t-cifra-s: 19px;     /* cifras de la ficha (700, -0,02 em) */
  --t-ficha: 20px;       /* nombre de la marca en su ficha (700) */
  --t-titulo-ventana: 22px;  /* título de una ventana (700, -0,02 em) */
  --t-titulo-pagina: 30px;   /* título de página (700, -1,2 px); 25 px en el teléfono. También la cifra normal */
  --t-cifra-xl: clamp(34px, 10cqw, 48px);  /* la cifra grande de una tarjeta (700, -0,035 em) */

  /* ---------- Radios ---------- */
  --r-pastilla: 99px;   /* botones, pastillas, etiquetas, grupos de botones */
  --r-ventana: 24px;    /* ventanas centrales */
  --r-grupo: 20px;      /* grupos de botones (seg) y el teléfono de muestra */
  --r-tarjeta: 16px;    /* tarjetas, menús flotantes, avisos */
  --r-bloque: 14px;     /* bloques dentro de una tarjeta, filas destacadas */
  --r-campo: 12px;      /* campos, filas de listas */
  --r-boton-icono: 10px;/* botones de icono, opciones de menú */
  --r-pequeno: 6px;

  /* ---------- Sombras ---------- */
  --sombra: 0 1px 2px rgba(30, 20, 60, .05), 0 22px 44px -28px rgba(40, 26, 80, .38);   /* tarjetas */
  --borde-tarjeta: 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent);          /* el borde de la tarjeta, junto a --sombra (en claro, #f1f0f5; en oscuro sigue a --line) */
  --sombra-menu: 0 24px 50px -24px rgba(20, 10, 40, .45);                               /* menús flotantes y calendario */
  --sombra-ventana: 0 40px 80px -30px rgba(0, 0, 0, .45);                                /* ventanas centrales */
  --sombra-aviso: 0 18px 40px -18px rgba(0, 0, 0, .5);                                   /* el aviso de abajo */
  --velo: rgba(14, 14, 14, .38);                                                         /* detrás de una ventana, con desenfoque de 4 px */

  /* ---------- Otros ---------- */
  --menu-activo: color-mix(in srgb, var(--lila) 42%, var(--card));   /* fondo de la sección activa del menú (#ede6fb en claro; en oscuro, lila al 18 %) */
  --curva: cubic-bezier(.22, .8, .24, 1);
  --gutter: clamp(16px, 4.5vw, 64px);   /* la landing lo cambia en publicas/marca.css: clamp(16px, 5vw, 96px) */

  /* ---------- Solo landing (el panel no los usa) ---------- */
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;   /* el ticket del precio y las direcciones */
  --sombra-alta: 0 2px 8px rgba(30, 20, 60, .06), 0 44px 90px -40px rgba(40, 26, 80, .5);
  --anillo: 0 0 0 4px rgba(213, 196, 246, .55);                         /* el foco lila de los campos */
}

/* ---------- Tema oscuro (Ajustes › Apariencia › Oscuro, y el del sistema) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pg: #0c0c0e; --card: #161618; --ink: #f1f0ec; --mut: #9a9a94; --soft: #c7c6c0; --line: #26262a; --pista: #2a2930; --suelo: #1d1d21;
    --vivo: #57cd8b; --vivo-bg: #13291d; --alerta: #f08585; --alerta-bg: #2e1717;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -28px rgba(0, 0, 0, .75);
    --menu-activo: color-mix(in srgb, var(--lila) 18%, var(--card));
    --rayas: repeating-linear-gradient(-45deg, #4d4526 0 6px, #34301f 6px 12px);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pg: #0c0c0e; --card: #161618; --ink: #f1f0ec; --mut: #9a9a94; --soft: #c7c6c0; --line: #26262a; --pista: #2a2930; --suelo: #1d1d21;
  --vivo: #57cd8b; --vivo-bg: #13291d; --alerta: #f08585; --alerta-bg: #2e1717;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -28px rgba(0, 0, 0, .75);
  --menu-activo: color-mix(in srgb, var(--lila) 18%, var(--card));
  --rayas: repeating-linear-gradient(-45deg, #4d4526 0 6px, #34301f 6px 12px);
}

/* ---------- Tema neutro: interfaz en blanco y grises fríos; el color, solo en las métricas. Va más adelante: la app empieza con Color y Oscuro ---------- */
:root[data-tono="neutro"] {
  --rosa: #ecebf1; --lila: #dddce4; --pervinca: #cdccd6; --agua: #bdbcc7; --menta: #e5e4eb; --champan: #f3f2f7;
  --rosa-v: #6e6d77; --lila-v: #2c2b33; --pervinca-v: #53525c; --agua-v: #7c7b86; --menta-v: #3d3c45; --champan-v: #8b8a95;
  --menu-activo: #efedf5;
  --rayas: repeating-linear-gradient(-45deg, #d9d8e1 0 6px, #f2f1f6 6px 12px);
}