/* Thot Creative · © 2026 Webs Creative LLC · Todos los derechos reservados
   Sistema de diseño «Creative 3D» · variables (tema oscuro por defecto y tema claro). */

:root {
  /* Marca Webs Creative */
  --gc-naranja: #FD8107;
  --gc-naranja-claro: #FFB56B;
  --gc-naranja-quemado: #E5762F;
  /* El naranja cuando es texto, icono o anillo de foco: en el tema oscuro es el de la marca; en el claro se oscurece para llegar a 4,5:1 (el de la marca da 2,5:1 sobre blanco). */
  --gc-enlace: var(--gc-naranja);
  --gc-negro: #0B0D10;
  --gc-gris: #252B33;
  --gc-cian: #22D3EE;
  --gc-violeta: #A78BFA;
  --gc-marca: var(--gc-naranja); /* el portal lo sustituye por el color del despacho */
  --gc-sobre-acento: #1A0E02; /* texto sobre botones del color de acento */
  --gc-sobre-color: #0B0D10; /* texto sobre un fondo de color de estado o de acento del tema (violeta, cian, éxito, aviso…): en oscuro esos colores son claros; en claro, oscuros */

  /* Estados */
  --gc-exito: #34D399;
  --gc-aviso: #FBBF24;
  --gc-peligro: #F87171;
  --gc-info: #60A5FA;

  /* Tipografía */
  --gc-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gc-fuente-titulos: "Space Grotesk", "Inter", system-ui, sans-serif;
  --gc-fuente-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --gc-t-xs: .75rem;
  --gc-t-s: .8125rem;
  --gc-t-m: .9375rem;
  --gc-t-l: 1.0625rem;
  --gc-t-xl: 1.375rem;
  --gc-t-2xl: 1.875rem;
  --gc-t-3xl: 2.5rem;

  /* Espacios y radios */
  --gc-e1: 4px; --gc-e2: 8px; --gc-e3: 12px; --gc-e4: 16px; --gc-e5: 24px; --gc-e6: 32px; --gc-e7: 48px;
  --gc-radio-s: 8px;
  --gc-radio: 12px;
  --gc-radio-l: 18px;
  --gc-radio-xl: 26px;
  --gc-radio-pildora: 999px;

  /* Movimiento */
  --gc-curva: cubic-bezier(.2, .8, .2, 1);
  --gc-curva-muelle: cubic-bezier(.34, 1.56, .64, 1);
  --gc-rapido: 140ms;
  --gc-normal: 240ms;
  --gc-lento: 480ms;

  /* Disposición */
  --gc-ancho-menu: 264px;
  --gc-ancho-menu-plegado: 76px;
  --gc-alto-barra: 64px;
  --gc-z-menu: 40; --gc-z-barra: 50; --gc-z-panel: 70; --gc-z-modal: 80; --gc-z-aviso: 90; --gc-z-buscador: 85;
}

/* ---------------------------------------------------------------- tema oscuro (por defecto) */
:root, [data-tema="oscuro"] {
  color-scheme: dark;
  --gc-fondo: #0B0D10;
  --gc-fondo-2: #0F1217;
  --gc-superficie: #14181E;
  --gc-superficie-2: #1A1F27;
  --gc-superficie-3: #222832;
  --gc-cristal: rgba(22, 27, 34, .62);
  --gc-cristal-fuerte: rgba(18, 22, 28, .86);
  --gc-borde: rgba(255, 255, 255, .08);
  --gc-borde-fuerte: rgba(255, 255, 255, .14);
  --gc-texto: #EEF1F5;
  --gc-texto-suave: #B4BEC9;
  /* El texto tenue (ayudas, fechas, marcadores) también tiene que leerse: 4,5:1 como mínimo sobre las superficies más claras del tema. */
  --gc-texto-tenue: #8D98A8;
  --gc-sobre-marca: #0B0D10;
  --gc-campo: rgba(255, 255, 255, .04);
  --gc-campo-hover: rgba(255, 255, 255, .07);
  --gc-hover: rgba(255, 255, 255, .05);
  --gc-seleccion: color-mix(in srgb, var(--gc-naranja) 14%, transparent);
  --gc-sombra-s: 0 1px 2px rgba(0, 0, 0, .4);
  --gc-sombra: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  --gc-sombra-l: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 8px 24px rgba(0, 0, 0, .45);
  --gc-brillo-naranja: 0 0 0 1px color-mix(in srgb, var(--gc-naranja) 35%, transparent), 0 12px 40px -10px color-mix(in srgb, var(--gc-naranja) 45%, transparent);
  --gc-brillo-cian: 0 0 0 1px color-mix(in srgb, var(--gc-cian) 30%, transparent), 0 12px 40px -10px color-mix(in srgb, var(--gc-cian) 35%, transparent);
  --gc-degradado-borde: linear-gradient(135deg, color-mix(in srgb, var(--gc-naranja) 55%, transparent), rgba(255, 255, 255, .06) 38%, rgba(255, 255, 255, .04) 62%, color-mix(in srgb, var(--gc-cian) 45%, transparent));
  --gc-degradado-marca: linear-gradient(135deg, var(--gc-naranja-claro) 0%, var(--gc-naranja) 45%, var(--gc-naranja-quemado) 100%);
  --gc-degradado-texto: linear-gradient(100deg, #FFFFFF 0%, var(--gc-naranja-claro) 45%, var(--gc-naranja) 100%);
  --gc-fondo-ambiente:
    radial-gradient(1100px 620px at -8% -12%, color-mix(in srgb, var(--gc-naranja) 13%, transparent), transparent 60%),
    radial-gradient(900px 700px at 108% 108%, color-mix(in srgb, var(--gc-cian) 9%, transparent), transparent 60%),
    radial-gradient(700px 500px at 60% -20%, color-mix(in srgb, var(--gc-violeta) 5%, transparent), transparent 70%);
  --gc-rejilla: rgba(255, 255, 255, .035);
  --gc-exito-fondo: rgba(52, 211, 153, .12);
  --gc-aviso-fondo: rgba(251, 191, 36, .12);
  --gc-peligro-fondo: rgba(248, 113, 113, .12);
  --gc-info-fondo: rgba(96, 165, 250, .12);
  --gc-cian-fondo: color-mix(in srgb, var(--gc-cian) 12%, transparent);
  --gc-naranja-fondo: color-mix(in srgb, var(--gc-naranja) 13%, transparent);
}

/* ---------------------------------------------------------------- tema claro (cálido y limpio) */
[data-tema="claro"] {
  color-scheme: light;
  --gc-fondo: #F6F2EC;
  --gc-fondo-2: #EFE9E0;
  --gc-superficie: #FFFFFF;
  --gc-superficie-2: #FBF8F4;
  --gc-superficie-3: #F2ECE4;
  --gc-cristal: rgba(255, 255, 255, .72);
  --gc-cristal-fuerte: rgba(255, 255, 255, .92);
  --gc-borde: rgba(44, 33, 20, .09);
  --gc-borde-fuerte: rgba(44, 33, 20, .16);
  --gc-texto: #1B1F25;
  --gc-texto-suave: #4F5763;
  --gc-texto-tenue: #5B636F;
  --gc-sobre-marca: #FFFFFF;
  --gc-campo: #FFFFFF;
  --gc-campo-hover: #FBF7F2;
  --gc-hover: rgba(44, 33, 20, .045);
  --gc-seleccion: color-mix(in srgb, var(--gc-naranja) 12%, transparent);
  --gc-sombra-s: 0 1px 2px rgba(60, 40, 20, .08);
  --gc-sombra: 0 12px 30px -14px rgba(60, 40, 20, .22), 0 2px 6px rgba(60, 40, 20, .06);
  --gc-sombra-l: 0 30px 70px -24px rgba(60, 40, 20, .32), 0 8px 20px rgba(60, 40, 20, .08);
  --gc-brillo-naranja: 0 0 0 1px color-mix(in srgb, var(--gc-naranja-quemado) 35%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--gc-naranja-quemado) 38%, transparent);
  --gc-brillo-cian: 0 0 0 1px color-mix(in srgb, var(--gc-cian) 28%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--gc-cian) 25%, transparent);
  --gc-degradado-borde: linear-gradient(135deg, color-mix(in srgb, var(--gc-naranja) 45%, transparent), rgba(44, 33, 20, .06) 40%, rgba(44, 33, 20, .05) 60%, color-mix(in srgb, var(--gc-cian) 35%, transparent));
  --gc-degradado-texto: linear-gradient(100deg, #1B1F25 0%, color-mix(in srgb, var(--gc-naranja-quemado) 60%, #1B1F25) 55%, var(--gc-naranja-quemado) 100%);
  --gc-fondo-ambiente:
    radial-gradient(1000px 600px at -10% -15%, color-mix(in srgb, var(--gc-naranja) 12%, transparent), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, color-mix(in srgb, var(--gc-cian) 10%, transparent), transparent 60%);
  --gc-rejilla: rgba(44, 33, 20, .04);
  /* Colores de estado en el tema claro: los de antes daban 3,7:1 como texto (verde, cian) o 4,0:1 sobre su propio fondo (aviso); estos pasan de 4,5:1. */
  --gc-enlace: #A8460B;
  --gc-cian: #0D6E87;
  --gc-exito: #046C4E;
  --gc-aviso: #9A4A07;
  --gc-peligro: #B01C1C;
  --gc-info: #1D4ED8;
  --gc-violeta: #6D28D9;
  --gc-sobre-color: #FFFFFF;
  --gc-exito-fondo: rgba(5, 150, 105, .1);
  --gc-aviso-fondo: rgba(217, 119, 6, .12);
  --gc-peligro-fondo: rgba(220, 38, 38, .09);
  --gc-info-fondo: rgba(37, 99, 235, .09);
  --gc-cian-fondo: color-mix(in srgb, var(--gc-cian) 10%, transparent);
  --gc-naranja-fondo: color-mix(in srgb, var(--gc-naranja) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --gc-rapido: 0ms; --gc-normal: 0ms; --gc-lento: 0ms; }
}

/* ---------------------------------------------------------------- apariencia configurable
   apariencia.js pone en <html>: data-efectos (alto|medio|bajo|no), data-densidad, data-radios y las
   variables de color del tema elegido. */
:root { --gc-cristal-desenfoque: 18px; --gc-escala-texto: 1; }
html { font-size: calc(16px * var(--gc-escala-texto)); }
[data-radios="recto"] { --gc-radio-s: 4px; --gc-radio: 6px; --gc-radio-l: 8px; --gc-radio-xl: 12px; }
[data-radios="redondo"] { --gc-radio-s: 10px; --gc-radio: 16px; --gc-radio-l: 24px; --gc-radio-xl: 32px; }
[data-densidad="compacta"] .gc-tabla td { padding-top: 7px; padding-bottom: 7px; }
[data-densidad="compacta"] .gc-tarjeta { padding: 16px; }
[data-densidad="compacta"] .gc-contenido { padding-top: 18px; }
[data-densidad="amplia"] .gc-tabla td { padding-top: 16px; padding-bottom: 16px; }
[data-densidad="amplia"] .gc-tarjeta { padding: 30px; }
[data-efectos="no"] .gc-hero__lienzo, [data-efectos="no"] .gc-acceso__lienzo { display: none; }
[data-efectos="no"] .gc-3d::after, [data-efectos="bajo"] .gc-3d::after { display: none; }
[data-efectos="no"] .gc-halo::before { display: none; }
[data-fondo="liso"] body { background-image: none; }
[data-fondo="aurora"] body { background-image: radial-gradient(1200px 700px at 10% -10%, color-mix(in srgb, var(--gc-naranja) 22%, transparent), transparent 60%), radial-gradient(1000px 800px at 100% 0%, color-mix(in srgb, var(--gc-violeta) 18%, transparent), transparent 60%), radial-gradient(1100px 700px at 50% 120%, color-mix(in srgb, var(--gc-cian) 18%, transparent), transparent 60%); }
[data-fondo="rejilla"] body { background-image: var(--gc-fondo-ambiente), linear-gradient(var(--gc-rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--gc-rejilla) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }