/* PresupuestoYa — tokens de diseño compartidos.
   Fuente única de verdad para color, radio, elevación y movimiento.
   Enlazado desde index.html, login.html, presupuesto-pro.html y /blog/assets/blog.css
   ANTES de cualquier <style> propio de la página, para que puedan sobreescribir
   un valor puntual si hiciera falta sin tocar este archivo. */

:root{
  color-scheme: light dark;

  /* ── Marca ── */
  --azul:#1a56db; --azul-h:#1648c0; --azul-bg:#eff6ff; --azul-borde:#bfdbfe;

  /* ── Neutrales ── */
  --gris-0:#f8fafc; --gris-1:#f1f5f9; --gris-2:#e2e8f0; --gris-3:#cbd5e1;
  --gris-5:#64748b; --gris-7:#334155; --gris-9:#0f172a;

  /* ── Superficie — fondo de tarjetas, nav, modales, inputs.
     En claro es blanco liso; en oscuro pasa a un gris elevado.
     Los fondos permanentemente oscuros (hero, CTA final, footer) no usan
     este token — ya estaban en dark antes de que existiera el modo oscuro. ── */
  --superficie:#ffffff;
  --nav-blur-bg:rgba(255,255,255,.85);
  --nav-blur-borde:rgba(226,232,240,.8);

  /* ── Semántico — reservado para estado, nunca decorativo ── */
  --verde:#059669; --verde-bg:#ecfdf5;
  --rojo:#dc2626; --rojo-bg:#fef2f2;
  --amarillo:#d97706; --amarillo-bg:#fffbeb;
  /* --naranja es el mismo color que --amarillo bajo otro nombre heredado de
     presupuesto-pro.html — se mantiene como alias para no tener que tocar
     cada regla que ya lo usa, pero a partir de ahora son el mismo token. */
  --naranja:var(--amarillo); --naranja-bg:var(--amarillo-bg);

  /* ── Radio — 4 pasos + pill, en vez de los ~15 valores sueltos que había ── */
  --radio-xs:6px;
  --radio-sm:8px;
  --radio:10px;
  --radio-lg:18px;
  --radio-pill:999px;

  /* ── Elevación — 2 niveles con un solo nombre por nivel en todo el proyecto ── */
  --sombra:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --sombra-lg:0 12px 32px rgba(15,23,42,.1),0 2px 8px rgba(15,23,42,.05);
  /* --sombra-2 es el nombre que usaba presupuesto-pro.html para este mismo nivel */
  --sombra-2:var(--sombra-lg);

  /* ── Movimiento ── */
  --easing:cubic-bezier(.2,.8,.3,1);
  --dur-rapido:.15s;
  --dur-base:.2s;
  --dur-lento:.35s;

  /* Acento por oficio (17) — usados en las pestañas de presupuesto-pro.html */
  --of-electricista-border:#d97706; --of-electricista-bg:#fffbeb; --of-electricista-color:#b45309; --of-electricista-shadow:rgba(217,119,6,.15); --of-electricista-hover:#fcd34d;
  --of-fontanero-border:#0891b2; --of-fontanero-bg:#ecfeff; --of-fontanero-color:#0e7490; --of-fontanero-shadow:rgba(8,145,178,.15); --of-fontanero-hover:#a5f3fc;
  --of-ac-border:#0284c7; --of-ac-bg:#f0f9ff; --of-ac-color:#0369a1; --of-ac-shadow:rgba(2,132,199,.15); --of-ac-hover:#bae6fd;
  --of-albanil-border:#b45309; --of-albanil-bg:#fffbeb; --of-albanil-color:#92400e; --of-albanil-shadow:rgba(180,83,9,.15); --of-albanil-hover:#fde68a;
  --of-pintor-border:#db2777; --of-pintor-bg:#fdf2f8; --of-pintor-color:#be185d; --of-pintor-shadow:rgba(219,39,119,.15); --of-pintor-hover:#fbcfe8;
  --of-general-border:#475569; --of-general-bg:#f1f5f9; --of-general-color:#334155; --of-general-shadow:rgba(71,85,105,.15);
  --of-carpinteria-border:#ea580c; --of-carpinteria-bg:#fff7ed; --of-carpinteria-color:#c2410c; --of-carpinteria-shadow:rgba(234,88,12,.15); --of-carpinteria-hover:#fed7aa;
  --of-pladur-border:#78716c; --of-pladur-bg:#fafaf9; --of-pladur-color:#57534e; --of-pladur-shadow:rgba(120,113,108,.15); --of-pladur-hover:#e7e5e4;
  --of-alicatados-border:#0d9488; --of-alicatados-bg:#f0fdfa; --of-alicatados-color:#0f766e; --of-alicatados-shadow:rgba(13,148,136,.15); --of-alicatados-hover:#99f6e4;
  --of-solados-border:#65a30d; --of-solados-bg:#f7fee7; --of-solados-color:#4d7c0f; --of-solados-shadow:rgba(101,163,13,.15); --of-solados-hover:#d9f99d;
  --of-cubiertas-border:#dc2626; --of-cubiertas-bg:#fef2f2; --of-cubiertas-color:#b91c1c; --of-cubiertas-shadow:rgba(220,38,38,.15); --of-cubiertas-hover:#fecaca;
  --of-impermeabilizacion-border:#2563eb; --of-impermeabilizacion-bg:#eff6ff; --of-impermeabilizacion-color:#1d4ed8; --of-impermeabilizacion-shadow:rgba(37,99,235,.15); --of-impermeabilizacion-hover:#bfdbfe;
  --of-cerrajeria-border:#4f46e5; --of-cerrajeria-bg:#eef2ff; --of-cerrajeria-color:#4338ca; --of-cerrajeria-shadow:rgba(79,70,229,.15); --of-cerrajeria-hover:#c7d2fe;
  --of-cristaleria-border:#7c3aed; --of-cristaleria-bg:#f5f3ff; --of-cristaleria-color:#6d28d9; --of-cristaleria-shadow:rgba(124,58,237,.15); --of-cristaleria-hover:#ddd6fe;
  --of-jardineria-border:#16a34a; --of-jardineria-bg:#f0fdf4; --of-jardineria-color:#15803d; --of-jardineria-shadow:rgba(22,163,74,.15); --of-jardineria-hover:#bbf7d0;
  --of-demoliciones-border:#ca8a04; --of-demoliciones-bg:#fefce8; --of-demoliciones-color:#a16207; --of-demoliciones-shadow:rgba(202,138,4,.15); --of-demoliciones-hover:#fef08a;
  --of-limpieza-border:#059669; --of-limpieza-bg:#ecfdf5; --of-limpieza-color:#047857; --of-limpieza-shadow:rgba(5,150,105,.15); --of-limpieza-hover:#a7f3d0;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ═══════════════════════════════════════════════════════════════════
   MODO OSCURO — sigue la preferencia del sistema/navegador del visitante.
   No hay interruptor manual: si tu navegador o sistema está en oscuro,
   el sitio lo sigue automáticamente.

   Las secciones que ya eran oscuras antes de que existiera este bloque
   (el hero, el CTA final y el footer de la landing, el "cta-articulo"
   del blog) no se tocan aquí — siguen con su gradiente fijo, funcionan
   igual de bien en cualquier tema porque nunca dependieron de --gris-*.

   La vista previa del presupuesto (.doc-preview) se fija aparte más abajo
   para que se quede siempre clara: es la previsualización de un documento
   real que se le envía al cliente, no debe cambiar con el tema de la app. ═══ */
@media (prefers-color-scheme: dark){
  :root{
    --gris-9:#f1f5f9; --gris-7:#cbd5e1; --gris-5:#94a3b8; --gris-3:#475569;
    --gris-2:#334155; --gris-1:#1c2637; --gris-0:#0b1220;

    --superficie:#161f32;
    --nav-blur-bg:rgba(11,18,32,.85);
    --nav-blur-borde:rgba(51,65,85,.6);

    --azul:#5b8def; --azul-h:#7ba4f2; --azul-bg:#132242; --azul-borde:#1d3a6e;

    --verde:#34d399; --verde-bg:#0d2b21;
    --rojo:#f87171; --rojo-bg:#2c1416;
    --amarillo:#f0b64f; --amarillo-bg:#2a1f0d;
    --naranja:var(--amarillo); --naranja-bg:var(--amarillo-bg);

    --sombra:0 1px 2px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.3);
    --sombra-lg:0 16px 40px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.35);
    --sombra-2:var(--sombra-lg);

    /* Acento por oficio — mismo tono, ajustado de "pastel sobre blanco"
       a "translúcido sobre oscuro" para que siga siendo legible */
    --of-electricista-bg:rgba(217,119,6,.16); --of-electricista-color:#d97706; --of-electricista-hover:rgba(217,119,6,.28);
    --of-fontanero-bg:rgba(8,145,178,.16); --of-fontanero-color:#22b8e0; --of-fontanero-hover:rgba(8,145,178,.28);
    --of-ac-bg:rgba(2,132,199,.16); --of-ac-color:#38bdf8; --of-ac-hover:rgba(2,132,199,.28);
    --of-albanil-bg:rgba(180,83,9,.16); --of-albanil-color:#d97706; --of-albanil-hover:rgba(180,83,9,.28);
    --of-pintor-bg:rgba(219,39,119,.16); --of-pintor-color:#ec4899; --of-pintor-hover:rgba(219,39,119,.28);
    --of-general-bg:rgba(148,163,184,.16); --of-general-color:#94a3b8; --of-general-hover:rgba(148,163,184,.28);
    --of-carpinteria-bg:rgba(234,88,12,.16); --of-carpinteria-color:#f97316; --of-carpinteria-hover:rgba(234,88,12,.28);
    --of-pladur-bg:rgba(168,162,158,.16); --of-pladur-color:#a8a29e; --of-pladur-hover:rgba(168,162,158,.28);
    --of-alicatados-bg:rgba(20,184,166,.16); --of-alicatados-color:#2dd4bf; --of-alicatados-hover:rgba(20,184,166,.28);
    --of-solados-bg:rgba(132,204,22,.16); --of-solados-color:#a3e635; --of-solados-hover:rgba(132,204,22,.28);
    --of-cubiertas-bg:rgba(239,68,68,.16); --of-cubiertas-color:#f87171; --of-cubiertas-hover:rgba(239,68,68,.28);
    --of-impermeabilizacion-bg:rgba(59,130,246,.16); --of-impermeabilizacion-color:#60a5fa; --of-impermeabilizacion-hover:rgba(59,130,246,.28);
    --of-cerrajeria-bg:rgba(99,102,241,.16); --of-cerrajeria-color:#818cf8; --of-cerrajeria-hover:rgba(99,102,241,.28);
    --of-cristaleria-bg:rgba(167,139,250,.16); --of-cristaleria-color:#a78bfa; --of-cristaleria-hover:rgba(167,139,250,.28);
    --of-jardineria-bg:rgba(34,197,94,.16); --of-jardineria-color:#4ade80; --of-jardineria-hover:rgba(34,197,94,.28);
    --of-demoliciones-bg:rgba(234,179,8,.16); --of-demoliciones-color:#facc15; --of-demoliciones-hover:rgba(234,179,8,.28);
    --of-limpieza-bg:rgba(16,185,129,.16); --of-limpieza-color:#34d399; --of-limpieza-hover:rgba(16,185,129,.28);
  }
}

/* Foco de teclado visible en todo el sitio — antes solo existía, de forma
   parcial, en presupuesto-pro.html y login.html; index.html no tenía ninguno. */
:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:4px}

/* ESTADOS VACÍOS — patrón único (icono + mensaje) para cualquier sitio del
   sitio o la app sin contenido todavía. Antes cada sitio tenía el suyo con
   nombre distinto (.historial-vacio, .vacio del blog...) — esos dos siguen
   existiendo tal cual por ahora (no se han tocado para no arriesgar nada
   que ya funciona), pero cualquier estado vacío NUEVO debería usar este. */
.estado-vacio{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.75rem 1rem;color:var(--gris-5)}
.estado-vacio-icono{width:44px;height:44px;border-radius:50%;background:var(--gris-1);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;color:var(--gris-3);flex-shrink:0}
.estado-vacio p{font-size:13px;line-height:1.5}

/* SKELETON — relleno mientras carga algo por primera vez, en vez de pasar
   de vacío a lleno de golpe. Compartido entre la app y el blog. */
@keyframes skeletonPulso{0%,100%{opacity:.55}50%{opacity:1}}
.skeleton{background:var(--gris-1);border-radius:var(--radio-sm);animation:skeletonPulso 1.3s ease-in-out infinite}
.skeleton-linea{height:13px;margin-bottom:9px}
.skeleton-linea:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;opacity:.75}}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTES REUTILIZABLES — modal / tooltip / dropdown / badge.
   Documentado aquí para que cualquier pantalla nueva reutilice esto en
   vez de inventar su propio modal o su propio menú desplegable:

   - MODAL: overlay de fondo + `.modal` centrado (ver `.modal-overlay`/
     `.modal` en presupuesto-pro.html — hoy solo lo usa el modal de
     "hazte Pro", pero las clases son genéricas, no específicas de eso).
   - TOOLTIP: `.tooltip-btn` + `.tooltip-txt` — icono de info que muestra
     un globo de texto al pulsar. Ya reutilizado en cada material del
     catálogo con explicación.
   - DROPDOWN: `.dropdown-menu` + `.dropdown-item` (ver más abajo) — menú
     flotante anclado a un botón, como el menú de usuario del nav.
   - BADGE: `.badge`, `.badge-plan` — etiqueta pequeña con texto, para
     estado (plan, oficio activo, categoría...). ═══ */
.dropdown-menu{position:absolute;background:var(--superficie);border:1px solid var(--gris-2);border-radius:var(--radio);box-shadow:var(--sombra-2);min-width:160px;z-index:200;overflow:hidden}
.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:.7rem 1rem;text-align:left;font-size:13px;color:var(--gris-7);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;border-bottom:1px solid var(--gris-1)}
.dropdown-item:last-child{border-bottom:none}
.dropdown-item:hover{background:var(--gris-0)}
.dropdown-item.peligro{color:var(--rojo)}
.dropdown-label{padding:.6rem 1rem;font-size:12px;color:var(--gris-5);border-bottom:1px solid var(--gris-1)}