/* ============================================================================
   FullCarro · Tokens de diseño
   ----------------------------------------------------------------------------
   Única fuente de verdad del aspecto del sitio. Cambia un valor AQUÍ y se
   propaga a todas las páginas. Los componentes (estilo.css) nunca deben usar
   colores o medidas "a fuego": siempre var(--token).

   Está pensado como dominio semilla: un país puede tener un matiz propio
   sobreescribiendo un token en el bloque de abajo, sin tocar ningún componente.
   ============================================================================ */
:root {
  /* ── Marca ──────────────────────────────────────────────────────────────*/
  --marca-navy:            #0f1f3d;   /* cabecera, texto oscuro */
  --marca-naranja:         #ff9540;   /* acento principal */
  --marca-naranja-oscuro:  #f07d1f;   /* hover del naranja */
  --marca-verde-wa:        #25d366;   /* WhatsApp */
  --marca-verde-wa-oscuro: #1fb855;

  /* ── Neutrales ──────────────────────────────────────────────────────────*/
  --blanco:        #ffffff;
  --tinta:         #374b5c;   /* texto y títulos (pizarra) */
  --gris:          #7a8794;   /* texto secundario */
  --gris-suave:    #eef1f5;   /* chips y fondos tenues */
  --linea:         #e6e9ee;   /* bordes */
  --linea-punto:   #d4dae2;   /* separadores punteados */
  --fondo:         #f4f6f9;   /* fondo de página */
  --negro-galeria: #0b0b0b;

  /* ── Colores semánticos ────────────────────────────────────────────────*/
  --exito:         var(--marca-verde-wa);
  --exito-bg:      #eafaf0;  --exito-texto:  #065f46;  --exito-borde:  #a7f3d0;
  --peligro:       #dc2626;  --peligro-oscuro: #b91c1c;
  --peligro-bg:    #fef2f2;  --peligro-texto:#991b1b;  --peligro-borde:#fecaca;
  --aviso-bg:      #fff8f1;  --aviso-texto:  #a86b32;
  --acento-suave:  #fff5ec;  --acento-suave-borde: #ffe6cf;

  /* ── Paleta de acompañamiento ────────────────────────────────────────────
     Colores heredados del panel de co. para tags, íconos de datos, chips y
     acciones (Modificar/Vendido/Asesor). Solo formatos pastel: fondo tenue +
     color fuerte + borde intermedio. Usa el mismo tono como fondo tinta y como
     color de texto/ícono para mantener consistencia. */
  --morado:              #6D5BD0;  /* "Modificar" del panel de co. + Kilometraje */
  --morado-suave:        #EFEAFB;
  --morado-borde:        #D9CFF3;
  --morado-hover:        #E4DBF7;
  --verde-info:          #10B981;  /* Combustible + verde de datos (distinto del verde WA) */
  --verde-info-suave:    rgba(16,185,129,.12);
  --verde-vendido:       #15803D;  /* "Marcar vendido" del panel */
  --verde-vendido-suave: #E9F7EF;
  --verde-vendido-borde: #BFE6CD;
  --slate-suave:         rgba(55,75,92,.10);  /* navy tenue del ícono Transmisión */
  --acento-tenue:        rgba(255,149,64,.15);/* naranja tenue del ícono Año */
  --peligro-suave:       #FEECEC;  /* "Eliminar" del panel */
  --peligro-borde-panel: #F6C9C9;

  /* ── Estados de un anuncio ─────────────────────────────────────────────*/
  --estado-publicado-bg: #ecfdf5;  --estado-publicado-texto: #065f46;
  --estado-borrador-bg:  #f3f4f6;  --estado-borrador-texto:  #6b7280;
  --estado-revision-bg:  #fef3c7;  --estado-revision-texto:  #92400e;
  --estado-alerta-bg:    #fee2e2;  --estado-alerta-texto:    #991b1b;

  /* ── Alias de rol (lo que usan los componentes) ────────────────────────*/
  --acento:        var(--marca-naranja);
  --acento-oscuro: var(--marca-naranja-oscuro);
  --navy:          var(--marca-navy);
  --slate:         var(--tinta);

  /* ── Tipografía ────────────────────────────────────────────────────────*/
  --fuente: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs: 12px;  --texto-sm: 13px;  --texto-base: 15px;  --texto-md: 16px;
  --texto-lg: 20px;  --texto-xl: 24px;  --texto-2xl: 28px;   --texto-3xl: 34px;
  --peso-normal: 400; --peso-medio: 600; --peso-fuerte: 700; --peso-extra: 800;

  /* ── Espaciado ─────────────────────────────────────────────────────────*/
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 20px;
  --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px;

  /* ── Radios ────────────────────────────────────────────────────────────*/
  --radio-sm: 6px; --radio: 10px; --radio-md: 12px; --radio-lg: 16px;
  --radio-full: 9999px;

  /* ── Sombras ───────────────────────────────────────────────────────────*/
  --sombra:    0 1px 3px rgba(15,31,61,.06), 0 1px 2px rgba(15,31,61,.04);
  --sombra-md: 0 8px 20px rgba(15,31,61,.10);

  /* ── Layout y movimiento ───────────────────────────────────────────────*/
  --ancho-contenedor: 1200px;
  --alto-cabecera: 64px;
  --trans: .15s ease;
  --z-cabecera: 20;
}

/* ============================================================================
   Personalización por país (dominio semilla)
   ----------------------------------------------------------------------------
   El <html> lleva data-pais="co|ve|br|…". Para darle a un país un matiz
   propio, sobreescribe SOLO el token que cambie; los componentes no se tocan.
   Ejemplo (desactivado):

     :root[data-pais="ve"] { --acento: #f5a623; }

   Así el mismo código sirve a los 13 países y cada uno puede afinarse en una
   línea, sin duplicar hojas de estilo.
   ============================================================================ */