/* ═══════════════════════════════════════════════════════════════
   MARCA DEL APLICATIVO — Easy Web Builder
   ═══════════════════════════════════════════════════════════════

   Este es el UNICO archivo donde viven los colores y la tipografia.
   Cambiar un valor aqui lo cambia en todas las pantallas a la vez.

   Antes esta paleta estaba escrita a mano y repetida dentro de cinco
   archivos distintos. Ahora esta una sola vez, aqui.

   IMPORTANTE — lo que este archivo NO controla:
   los colores que eliges DENTRO de cada pagina que construyes
   (fondo de un bloque, color de un boton de tu pagina) no estan aqui.
   Esos se guardan dentro de cada pagina, en la base de datos, y se
   cambian desde el editor, no desde este archivo.
   ═══════════════════════════════════════════════════════════════ */

:root{

  /* ── 1. COLORES DE MARCA ──
     Los que le dan identidad al aplicativo. Cambiar uno aqui lo cambia en todas las pantallas. */
  --azul-marino:       #040764;   /* Color principal de la marca. Barra superior, titulos, fondo de la pantalla de carga. */
  --azul-marino-claro: #ededf5;   /* Version suave del azul marino. Fondos de seccion y filas resaltadas. */
  --turquesa:          #20b6b6;   /* Segundo color de la marca. Boton de entrar, acentos y estrella del logo. */
  --turquesa-claro:    #e0f6f6;   /* Fondo suave en turquesa para avisos y etiquetas. */
  --azul-accion:       #1c73cb;   /* Azul de accion: enlaces, elemento seleccionado y botones secundarios. */
  --azul-accion-claro: #e8f2fb;   /* Fondo del elemento seleccionado. */
  --amarillo-marca:    #fce865;   /* Amarillo de marca usado en las paginas publicadas. */

  /* ── 2. TEXTOS ──
     Del mas oscuro al mas claro. Si un texto se ve muy tenue, sube un nivel. */
  --texto:            #1a1a1a;   /* Texto principal de lectura. */
  --texto-medio:      #4a4a6a;   /* Texto secundario: descripciones y subtitulos. */
  --texto-secundario: #6a6a8a;   /* Texto de apoyo en el mapa del sitio y el feed. */
  --texto-suave:      #9090b0;   /* Texto de apoyo: fechas, contadores, ayudas. */
  --texto-suave-2:    #8888aa;   /* Variante del texto de apoyo dentro del editor. */
  --texto-tenue:      #c0c0d0;   /* Texto casi apagado: marcas de agua y campos vacios. */
  --azul-carbon:      #2a2d45;   /* Texto oscuro azulado en las paginas publicadas. */
  --gris-azulado:     #6b6e85;   /* Texto de apoyo en las paginas publicadas. */

  /* ── 3. FONDOS Y BORDES ──
     El gris de la interfaz. Aqui esta la mayor cantidad de tonos repetidos. */
  --blanco:                        #ffffff;   /* Fondo de tarjetas, paneles y modales. */
  --fondo:                         #f4f5f7;   /* Fondo general de las pantallas. */
  --fondo-suave:                   #f4f5f8;   /* Casi identico al fondo general. Candidato a unificar con --fondo. */
  --fondo-claro:                   #fafbff;   /* Fondo muy claro de algunas tarjetas del panel. */
  --fondo-lienzo:                  #f0f0f8;   /* Fondo del area de trabajo del editor, mas oscuro para destacar la pagina. */
  --fondo-frio:                    #f7f8fc;   /* Fondo frio de listas y filas alternas. */
  --fondo-frio-2:                  #f6f6fc;   /* Variante del fondo frio dentro del editor. */
  --fondo-frio-3:                  #eeeef6;   /* Variante mas marcada del fondo frio dentro del editor. */
  --fondo-lila:                    #f4f6ff;   /* Fondo lila muy claro de algunos paneles del editor. */
  --gris-claro:                    #f3f4f6;   /* Gris neutro de fondos deshabilitados. */
  --gris-frio:                     #e8eaf0;   /* Gris frio de fondos en las paginas publicadas. */
  --gris-medio:                    #d8d8e0;   /* Gris de separadores en las pantallas moviles. */
  --fondo-previsualizacion:        #e0e0e8;   /* Gris detras de la vista previa de la pagina. */
  --fondo-previsualizacion-oscuro: #c8c8d8;   /* Gris mas oscuro detras de la vista previa. */
  --borde:                         #e8e8f0;   /* Borde estandar de tarjetas, campos y tablas. */
  --borde-suave:                   #e8e8ef;   /* Borde apenas mas frio. Candidato a unificar con --borde. */
  --borde-frio:                    #e6e8ee;   /* Borde de las paginas publicadas. Candidato a unificar con --borde. */
  --borde-lavanda:                 #e0e0f0;   /* Borde lavanda de paneles del editor. */
  --borde-azulado:                 #e0e4f0;   /* Borde azulado de paneles del editor. */
  --borde-claro:                   #f0f0f5;   /* Borde muy claro del mapa del sitio. */
  --borde-fuerte:                  #c8cad0;   /* Borde marcado: separadores y estados activos. */
  --borde-tenue:                   #c0c0d8;   /* Borde tenue de campos del editor. */
  --negro:                         #000000;   /* Negro puro del fondo del reproductor de video. */
  --negro-suave:                   #111111;   /* Negro del fondo de la previsualizacion en modo oscuro. */
  --negro-azulado:                 #0a0a1a;   /* Fondo oscuro de la pantalla del feed. */
  --gris-oscuro:                   #3a3a52;   /* Bloques de codigo dentro de la pantalla del feed. */
  --lavanda-clara:                 #dcdcec;   /* Texto claro sobre el fondo oscuro del feed. */
  --azul-hielo:                    #eef6fc;   /* Fondo de los recuadros de ayuda. */

  /* ── 4. ESTADOS ──
     Confirmacion, error y aviso. Cada uno tiene su version fuerte (texto) y clara (fondo). */
  --confirmacion:       #166534;   /* Texto verde de confirmacion: publicado, guardado, correcto. */
  --confirmacion-claro: #dcfce7;   /* Fondo verde de confirmacion. */
  --confirmacion-borde: #86efac;   /* Borde verde de confirmacion en movil. */
  --error:              #c0392b;   /* Texto rojo de error. */
  --error-claro:        #fee2e2;   /* Fondo rojo de error. */
  --error-borde:        #fca5a5;   /* Borde rojo de error. */
  --error-oscuro:       #991b1b;   /* Rojo oscuro del boton de borrar confirmado. */
  --aviso:              #854d0e;   /* Texto ambar de aviso: programado, pendiente, vencido. */
  --aviso-claro:        #fef9c3;   /* Fondo ambar de aviso. */
  --aviso-fondo:        #fef3c7;   /* Segundo fondo ambar. Candidato a unificar con --aviso-claro. */
  --aviso-texto:        #92400e;   /* Segundo texto ambar. Candidato a unificar con --aviso. */
  --amarillo:           #fde047;   /* Amarillo de las etiquetas de programacion en movil. */
  --azul-oscuro:        #1e40af;   /* Texto azul oscuro de las etiquetas informativas en movil. */
  --azul-accion-fondo:  #dbeafe;   /* Fondo azul de las etiquetas informativas en movil. */

  /* ── 5. TONOS DE UNA SOLA PANTALLA ──
     Colores que solo aparecen en un sitio. Estan aqui para que puedas encontrarlos. */
  --turquesa-oscuro:      #1a9494;   /* Pantalla de acceso: turquesa del boton al pasar el cursor. */
  --acceso-texto:         #4a4a4a;   /* Pantalla de acceso: texto de la tarjeta. */
  --acceso-texto-medio:   #5a5a5a;   /* Pantalla de acceso: texto secundario. */
  --acceso-texto-suave:   #888888;   /* Pantalla de acceso: texto de ayuda. */
  --acceso-texto-tenue:   #aaaaaa;   /* Pantalla de acceso: pie de la tarjeta. */
  --acceso-texto-apagado: #bbbbbb;   /* Pantalla de acceso: texto del campo vacio. */
  --acceso-borde:         #e2e4e9;   /* Pantalla de acceso: borde del campo de correo. */
  --google-titulo:        #1a0dab;   /* Editor, vista previa de Google: azul del titulo del resultado. */
  --google-url:           #006621;   /* Editor, vista previa de Google: verde de la direccion. */
  --google-texto:         #4d5156;   /* Editor, vista previa de Google: gris de la descripcion. */

  /* ── 6. TIPOGRAFIA ── */
  --tipografia: 'Roboto',sans-serif;   /* Tipografia de todo el aplicativo. */

  /* ── 7. NOMBRES CORTOS ANTIGUOS ──
     El codigo del aplicativo todavia usa estos nombres en ingles.
     Apuntan a los de arriba, asi que NO hace falta tocarlos:
     cambiando el color de arriba, cambian estos tambien.
     No los uses al escribir codigo nuevo. */
  --navy:   var(--azul-marino);
  --navy-l: var(--azul-marino-claro);
  --blue:   var(--azul-accion);
  --blue-l: var(--azul-accion-claro);
  --sel:    var(--azul-accion);
  --teal:   var(--turquesa);
  --teal-l: var(--turquesa-claro);
  --ink:    var(--texto);
  --ink2:   var(--texto-medio);
  --ink3:   var(--texto-suave);
  --ink4:   var(--texto-tenue);
  --bg:     var(--fondo);
  --white:  var(--blanco);
  --bdr:    var(--borde);
  --bdr2:   var(--borde-fuerte);
  --ok:     var(--confirmacion);
  --ok-l:   var(--confirmacion-claro);
  --err:    var(--error);
  --err-l:  var(--error-claro);
  --warn:   var(--aviso);
  --warn-l: var(--aviso-claro);
  --f:      var(--tipografia);
}