/*
 * Gestifácil CMS · Editor visual · BASE PÚBLICA (gf-base.css)
 * Variables globales, visibilidad por dispositivo, columnas, utilidades y paleta de texto.
 * Todas las variables están en :where(:root) (especificidad 0) para que el tema las pueda cambiar
 * con un simple  :root{--gf-color-primario:#c2410c}  sin pelear con este fichero.
 * Breakpoints: tablet max-width:1024px · móvil max-width:767px.
 */

:where(:root) {
    /* Colores (cámbialos en el CSS del tema para adaptar todos los elementos) */
    --gf-color-primario: #4f46e5;
    --gf-color-primario-oscuro: #4338ca;
    --gf-color-secundario: #0ea5e9;
    --gf-color-acento: #f59e0b;
    --gf-color-texto: #1f2937;
    --gf-color-titulos: #0f172a;
    --gf-color-suave: #64748b;
    --gf-color-fondo: #ffffff;
    --gf-color-fondo-alt: #f8fafc;
    --gf-color-borde: #e2e8f0;
    --gf-color-oscuro: #0f172a;
    --gf-color-sobre-primario: #ffffff;
    --gf-color-exito: #16a34a;
    --gf-color-aviso: #d97706;
    --gf-color-error: #dc2626;
    --gf-color-info: #2563eb;
    --gf-color-whatsapp: #25d366;
    --gf-color-estrella: #f5a524;

    /* Forma */
    --gf-radio: 12px;
    --gf-radio-s: 8px;
    --gf-radio-l: 20px;
    --gf-radio-boton: 10px;
    --gf-sombra-s: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --gf-sombra: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 10px 24px -6px rgba(15, 23, 42, .12);
    --gf-sombra-l: 0 24px 48px -12px rgba(15, 23, 42, .25);

    /* Medidas */
    --gf-ancho: 1200px;
    --gf-ancho-texto: 72ch;
    --gf-hueco: 24px;
    --gf-hueco-v: 20px;
    --gf-lateral: 20px;
    --gf-seccion-pad: clamp(48px, 7vw, 96px);
    --gf-transicion: .2s ease;

    /* Tipografía (sin valor = hereda la del tema) */
    /* --gf-fuente: "Inter", sans-serif;  --gf-fuente-titulos: "Poppins", sans-serif; */
    --gf-t-h1: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
    --gf-t-h2: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
    --gf-t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --gf-t-h4: 1.15rem;

    /* Paleta de color de texto para la edición en línea (gft-c1…gft-c8) */
    --gft-c1: var(--gf-color-primario);
    --gft-c2: var(--gf-color-secundario);
    --gft-c3: var(--gf-color-acento);
    --gft-c4: var(--gf-color-titulos);
    --gft-c5: var(--gf-color-suave);
    --gft-c6: var(--gf-color-exito);
    --gft-c7: var(--gf-color-error);
    --gft-c8: #ffffff;
    --gft-resaltado: color-mix(in srgb, var(--gf-color-acento) 35%, transparent);
}

/* Las páginas convertidas desde HTML antiguo llevan data-gf-nativo: conservan su aspecto original (sin estos valores por defecto). */
/* ------------------------------------------------------------------ Reset suave de los elementos */
[data-gf]:where(:not([data-gf-nativo])),
[data-gf]:where(:not([data-gf-nativo])) *,
[data-gf]:where(:not([data-gf-nativo])) *::before,
[data-gf]:where(:not([data-gf-nativo])) *::after { box-sizing: border-box; }

[data-gf]:where(:not([data-gf-nativo])) { font-family: var(--gf-fuente, inherit); }
[data-gf]:where(:not([data-gf-nativo])) img,
[data-gf]:where(:not([data-gf-nativo])) video,
[data-gf]:where(:not([data-gf-nativo])) iframe { max-width: 100%; }
[data-gf]:where(:not([data-gf-nativo])) img { height: auto; }
[data-gf]:where(:not([data-gf-nativo])) [hidden] { display: none !important; }

/* Bloques de código (§2.2): sin caja propia */
[data-gf="codigo"] { display: contents; }

/* Texto solo para lectores de pantalla */
.gf-rt-sr,
.gf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ Visibilidad por dispositivo */
@media (min-width: 1025px) {
    .gf-oculto-escritorio { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .gf-oculto-tablet { display: none !important; }
}
@media (max-width: 767px) {
    .gf-oculto-movil { display: none !important; }
}
/* En el lienzo del editor los elementos ocultos en ese dispositivo se ven atenuados (para poder seleccionarlos). */
@media (min-width: 1025px) {
    [data-gfe-root] .gf-oculto-escritorio { display: revert !important; opacity: .35; outline: 1px dashed #94a3b8; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    [data-gfe-root] .gf-oculto-tablet { display: revert !important; opacity: .35; outline: 1px dashed #94a3b8; }
}
@media (max-width: 767px) {
    [data-gfe-root] .gf-oculto-movil { display: revert !important; opacity: .35; outline: 1px dashed #94a3b8; }
}

/* ------------------------------------------------------------------ Columnas (gfv-cols-*) */
[data-gf].gfv-cols-1 { grid-template-columns: minmax(0, 1fr); }
[data-gf].gfv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-gf].gfv-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-gf].gfv-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-gf].gfv-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-gf].gfv-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-gf].gfv-cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
[data-gf].gfv-cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
[data-gf].gfv-cols-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
[data-gf].gfv-cols-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
[data-gf].gfv-cols-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

@media (max-width: 1024px) {
    [data-gf].gfv-cols-4,
    [data-gf].gfv-cols-5,
    [data-gf].gfv-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    [data-gf].gfv-cols-1-3,
    [data-gf].gfv-cols-3-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    [data-gf].gfv-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-gf].gfv-tablet-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    [data-gf].gfv-cols-2,
    [data-gf].gfv-cols-3,
    [data-gf].gfv-cols-4,
    [data-gf].gfv-cols-5,
    [data-gf].gfv-cols-6,
    [data-gf].gfv-cols-1-2,
    [data-gf].gfv-cols-2-1,
    [data-gf].gfv-cols-1-3,
    [data-gf].gfv-cols-3-1,
    [data-gf].gfv-tablet-2 { grid-template-columns: minmax(0, 1fr); }
    [data-gf].gfv-movil-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-gf].gfv-invertir-movil > :first-child { order: 2; }
}

/* ------------------------------------------------------------------ Utilidades */
/* Alineación del texto y de las piezas sueltas (botones, insignias…) */
[data-gf].gfv-alin-izq { text-align: left; }
[data-gf].gfv-alin-centro { text-align: center; }
[data-gf].gfv-alin-der { text-align: right; }
[data-gf].gfv-alin-just { text-align: justify; }

/* Huecos entre hijos */
[data-gf].gfv-hueco-0 { gap: 0; }
[data-gf].gfv-hueco-s { gap: 10px; }
[data-gf].gfv-hueco-m { gap: var(--gf-hueco); }
[data-gf].gfv-hueco-l { gap: 40px; }
[data-gf].gfv-hueco-xl { gap: 64px; }

/* Ancho máximo cómodo para leer */
[data-gf].gfv-estrecho { max-width: var(--gf-ancho-texto); }
[data-gf].gfv-estrecho.gfv-alin-centro { margin-inline: auto; }

/* Bordes, sombras, esquinas */
[data-gf].gfv-sombra { box-shadow: var(--gf-sombra); }
[data-gf].gfv-sombra-l { box-shadow: var(--gf-sombra-l); }
[data-gf].gfv-redondeado { border-radius: var(--gf-radio); }
[data-gf].gfv-borde { border: 1px solid var(--gf-color-borde); }

/* ------------------------------------------------------------------ Paleta de texto (edición en línea) */
.gft-c1 { color: var(--gft-c1); }
.gft-c2 { color: var(--gft-c2); }
.gft-c3 { color: var(--gft-c3); }
.gft-c4 { color: var(--gft-c4); }
.gft-c5 { color: var(--gft-c5); }
.gft-c6 { color: var(--gft-c6); }
.gft-c7 { color: var(--gft-c7); }
.gft-c8 { color: var(--gft-c8); }
.gft-resaltado {
    background: linear-gradient(transparent 55%, var(--gft-resaltado) 55%);
    padding: 0 .1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.gft-degradado {
    background: linear-gradient(90deg, var(--gf-color-primario), var(--gf-color-secundario));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ------------------------------------------------------------------ Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    [data-gf],
    [data-gf] * { scroll-behavior: auto !important; }
}