/* Lo que comparten las cuatro páginas: colores, tipografía, cabecera, aviso de
   demo, botones y pie.
   ═══════════════════════════════════════════════════════════════════════════
   Antes cada página llevaba su propia copia de todo esto dentro de un <style>.
   Se notaba: la misma cabecera había que cambiarla en cuatro sitios, y bastaba
   olvidar uno para que la landing y el formulario volvieran a parecer de dos
   empresas distintas. Aquí está una sola vez.

   Cada página sigue teniendo su <style> propio, DESPUÉS de este fichero, para
   lo que solo es suyo (el formulario por pasos, el calendario del panel, las
   cajas del aviso de privacidad). Al ir después, puede pisar cualquier regla
   de aquí cuando de verdad haga falta.

   Los nombres: se usa el vocabulario de la landing (tinta, nube, gris,
   violeta), que era el que tenía una identidad pensada. Los nombres viejos del
   panel y del formulario (negro, papel, acero) quedan como alias al final de
   :root, apuntando al mismo color: así el CSS que ya existe en esas páginas
   sigue funcionando sin tocar cientos de líneas. */

/* ---- Tipografía propia -----------------------------------------------------
   Servida desde este mismo dominio, no desde Google Fonts: así no se le manda
   la IP de cada visitante a un tercero (que es lo que este producto le promete
   a un taller), la página no depende de que otro servidor esté en pie, y en la
   instalación de mini PC sin internet se ve igual.

   Sora para los titulares —tiene carácter, que era lo que faltaba— e Inter
   para el texto, que es la que mejor se lee en pantallas pequeñas. Las dos son
   libres (licencia SIL OFL).

   `font-display:swap`: primero se lee el texto con la fuente del sistema y
   luego cambia. Nunca hay un hueco en blanco esperando a la descarga. */
@font-face{
  font-family:"Sora";
  src:url("/fuentes/sora-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("/fuentes/inter.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --tinta:#0f172a; --carbon:#1e293b;
  --nube:#f8fafc; --papel:#ffffff; --linea:#e2e8f0;
  --gris:#475569; --gris-claro:#94a3b8;
  --ambar:#d97706; --ambar-hi:#b45309;
  --violeta:#2563eb; --violeta-hi:#1d4ed8; --violeta-suave:#eff6ff;
  --verde:#10b981; --rojo:#ef4444; --radio:16px;
  --sombra-sm:0 2px 8px rgba(15,23,42,.04);
  --sombra:0 10px 25px -3px rgba(15,23,42,.07), 0 4px 10px -2px rgba(15,23,42,.03);
  --sombra-lg:0 20px 40px -4px rgba(15,23,42,.12), 0 8px 16px -4px rgba(15,23,42,.04);
  --trans-suave:cubic-bezier(0.16, 1, 0.3, 1);

  /* Alias de los nombres antiguos */
  --negro:#0f172a; --negro-carr:#1e293b;
  --acero:#64748b; --acero-claro:#cbd5e1; --humo:#f1f5f9;
  --verde-ok:#10b981;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{color:var(--tinta);line-height:1.6;
  font-family:"InterVar","Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:inherit; transition:color 0.15s var(--trans-suave)}

/* Desactivación de parpadeo de cursor en contenedores no editables */
body{caret-color:transparent}
input,textarea,select,[contenteditable]{caret-color:auto}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Tipografía ---------------------------------------------------------- */
h1,h2,h3,.display{font-family:"Sora","InterVar",system-ui,sans-serif;
  line-height:1.16;letter-spacing:-.025em;font-weight:700}

/* ---- Rejilla -------------------------------------------------------------- */
.env{max-width:1160px;margin:0 auto;padding:0 24px}
.centro{text-align:center}
.tenue{color:var(--gris-claro)}

/* ---- Aviso de demo -------------------------------------------------------- */
.aviso-demo{background:linear-gradient(90deg, #0f172a 0%, #1e293b 100%);color:#fff;text-align:center;
  font-size:.82rem;font-weight:500;padding:9px 16px;letter-spacing:.01em;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.aviso-demo b{color:#fbbf24;font-weight:700}
.aviso-demo a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- Cabecera Glassmorphic ----------------------------------------------- */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(226,232,240,.9);transition:all .2s var(--trans-suave)}
.top-in{display:flex;align-items:center;gap:12px;padding:14px 0}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.fan{width:36px;height:36px;border-radius:10px;flex:none;
  background:conic-gradient(from 210deg,var(--violeta),#3b82f6,var(--verde),var(--violeta));
  box-shadow:0 4px 12px rgba(37,99,235,.2);transition:transform .3s var(--trans-suave), box-shadow .3s var(--trans-suave)}
.marca:hover .fan, .top-in:hover .fan{transform:rotate(8deg) scale(1.04);box-shadow:0 6px 16px rgba(37,99,235,.28)}
.top-in b,.marca b{font-size:1.08rem;letter-spacing:-.025em;display:block;color:var(--tinta)}
.top-in span,.marca span{color:var(--gris-claro);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;display:block;margin-top:-2px}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.top-nav a{color:var(--gris);text-decoration:none;font-size:.9rem;font-weight:600;position:relative;padding:4px 0}
.top-nav a:hover{color:var(--violeta)}
.top-nav a.btn-1,.top-nav a.btn-1:hover{color:#fff}
@media(max-width:860px){.top-nav .oculta-movil{display:none}}

/* ---- Botones SaaS -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:700;border-radius:12px;border:none;cursor:pointer;
  font-size:.94rem;padding:12px 22px;transition:transform .18s var(--trans-suave),box-shadow .18s var(--trans-suave),background-color .18s var(--trans-suave);
  outline:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--violeta);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.22)}
.btn-1:hover{background:var(--violeta-hi);box-shadow:0 6px 20px rgba(37,99,235,.32)}
.btn-3{background:#fff;color:var(--tinta);border:1.5px solid var(--linea);box-shadow:var(--sombra-sm)}
.btn-3:hover{border-color:var(--violeta);color:var(--violeta);box-shadow:0 4px 14px rgba(15,23,42,.05)}

/* Botón CTA especial de la barra superior */
.top-cta{margin-left:auto;background:var(--violeta);color:#fff;font-weight:700;
  text-decoration:none;padding:10px 20px;border-radius:12px;font-size:.88rem;
  transition:transform .18s var(--trans-suave),box-shadow .18s var(--trans-suave),background-color .18s var(--trans-suave)}
.top-cta:hover{background:var(--violeta-hi);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(37,99,235,.32)}
@media(max-width:560px){.top-cta{display:none}}

/* ---- Pie de página Premium ---------------------------------------------- */
footer{background:#0b0c10;color:var(--gris-claro);font-size:.88rem;border-top:1px solid #1e2029}
footer a{color:#fff;text-decoration:none;transition:color .15s var(--trans-suave)}
footer a:hover{color:var(--ambar);text-decoration:none}

.pie-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding:56px 0 36px}

.pie-marca .fan{margin-bottom:14px}
.pie-marca b{display:block;font-size:1.1rem;letter-spacing:-.025em;color:#fff}
.pie-marca p{margin-top:10px;max-width:32ch;line-height:1.6;font-size:.86rem;color:#94a3b8}

.pie-col h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#f8fafc;font-weight:800;margin-bottom:16px;font-family:inherit}
.pie-col ul{list-style:none}
.pie-col li{margin-bottom:10px;line-height:1.4}
.pie-col a{color:#94a3b8;font-size:.88rem;font-weight:500}
.pie-col a:hover{color:#ffffff;padding-left:2px}

.pie-legal{border-top:1px solid rgba(255,255,255,.08);padding:20px 0 28px;
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  font-size:.8rem;color:#64748b}
.pie-legal a{color:#94a3b8;text-decoration:underline;text-underline-offset:3px}
.pie-legal a:hover{color:#fff}
.pie-legal .pie-sep{margin-left:auto}

@media(max-width:820px){
  .pie-in{grid-template-columns:1fr 1fr;gap:32px 24px;padding:44px 0 28px}
  .pie-marca{grid-column:1 / -1}
}
@media(max-width:460px){
  .pie-in{grid-template-columns:1fr}
  .pie-legal .pie-sep{margin-left:0}
}

/* ---- Utilidades UI SaaS ------------------------------------------------ */

/* Atajos de teclado (<kbd>) */
kbd{display:inline-flex;align-items:center;justify-content:center;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.72rem;font-weight:700;line-height:1;color:#475569;
  background:#f1f5f9;border:1.5px solid #cbd5e1;border-bottom-width:2.5px;
  border-radius:6px;padding:3px 6px;box-shadow:0 1px 2px rgba(0,0,0,0.05)}

/* Punto de estado activo animado (Pulse dot) */
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--verde);box-shadow:0 0 0 0 rgba(18,183,106,.6);
  animation:pulseDot 2s infinite var(--trans-suave);vertical-align:middle;margin-right:6px}
.pulse-dot.ambar{background:var(--ambar);box-shadow:0 0 0 0 rgba(255,176,32,.6);animation-name:pulseDotAmbar}
.pulse-dot.rojo{background:var(--rojo);box-shadow:0 0 0 0 rgba(229,72,77,.6);animation-name:pulseDotRojo}

@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(18,183,106,.6)} 70%{box-shadow:0 0 0 6px rgba(18,183,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,183,106,0)} }
@keyframes pulseDotAmbar { 0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)} 70%{box-shadow:0 0 0 6px rgba(255,176,32,0)} 100%{box-shadow:0 0 0 0 rgba(255,176,32,0)} }
@keyframes pulseDotRojo { 0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)} 70%{box-shadow:0 0 0 6px rgba(229,72,77,0)} 100%{box-shadow:0 0 0 0 rgba(229,72,77,0)} }

/* Esqueleto de Carga (Skeleton Loader) */
.skeleton{background:linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;border-radius:8px;display:inline-block}
@keyframes skeletonShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Notificación Flotante (Toast Notification) */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;background:rgba(15,23,42,0.92);backdrop-filter:blur(12px);color:#fff;
  padding:12px 20px;border-radius:14px;font-size:.88rem;font-weight:600;box-shadow:var(--sombra-lg);
  border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;gap:10px;animation:toastSlideIn 0.3s var(--trans-suave)}
@keyframes toastSlideIn { from{opacity:0;transform:translateY(16px) scale(0.95)} to{opacity:1;transform:none} }

/* Estado Vacío (Empty State Card) */
.vacio-card{background:var(--papel);border:1.5px dashed var(--linea);border-radius:var(--radio);
  padding:44px 24px;text-align:center;color:var(--gris);margin:16px 0}
.vacio-card svg,.vacio-card .vacio-ico{font-size:2.4rem;color:var(--gris-claro);margin-bottom:12px;display:inline-block}
.vacio-card h4{font-size:1.1rem;color:#0f172a;margin-bottom:6px}
.vacio-card p{font-size:.9rem;color:var(--gris);max-width:38ch;margin:0 auto}
/* Normalización Global de Checkboxes */
input[type="checkbox"]{
  width:18px;height:18px;min-width:18px;min-height:18px;
  margin:0;cursor:pointer;accent-color:var(--violeta);
  vertical-align:middle;flex:none;
}
label.avisar,.envios-filtro,.calc-manual,.consent{
  display:inline-flex !important;align-items:center !important;
  justify-content:flex-start !important;gap:10px !important;
  cursor:pointer;user-select:none;font-weight:600;color:var(--tinta);
}