/* ======================================================= */
/* ========== Tipografía global NORA (Montserrat) ========= */
/* ======================================================= */

:root {
  /* Sobrescribe la fuente base de Bootstrap para toda la app */
  --bs-body-font-family: 'Montserrat', system-ui, -apple-system,
                         BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Asegura que TODO el documento usa Montserrat por defecto */
html,
body {
  font-family: var(--bs-body-font-family) !important;
}

/* Partes PDF y bloques clave que podrían quedar fuera por herencia rara */
.pdf-doc,
.pdf-page,
.pdf-header,
.pdf-section,
.kv,
.list,
.footnote {
  font-family: var(--bs-body-font-family);
}

/* ======= UI base existente ======= */
.card { border-radius: 10px; }

/* Fondo general de la app NORA: blanco limpio, sin tocar .bg-light de Bootstrap */
body.nora-soft-bg {
  background-color: #ffffff !important;
}

/* ... y a partir de aquí dejas TODO tu CSS tal cual está ... */


/* ======= UI base existente ======= */
.card { border-radius: 10px; }

/* Fondo general de la app NORA: blanco limpio, sin tocar .bg-light de Bootstrap */
body.nora-soft-bg {
  background-color: #ffffff !important;
}

.pdf-doc { width: 210mm; margin: 0 auto; background: #fff; color: #111; }
.pdf-page { width: 210mm; min-height: 297mm; padding: 16mm 14mm; box-sizing: border-box; }
.pdf-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8mm; }
.pdf-header h1 { margin:0 0 4px; font-size:18px; }
.pdf-header .muted { color:#666; font-size:11px; }
.pdf-section { margin-bottom:8mm; }
.kv { display:grid; grid-template-columns: repeat(2, 1fr); gap:6px 12px; font-size:12px; }
.kv span { color:#666; display:block; }
.kv strong { font-weight:600; }
.list { list-style:none; margin:0; padding:0; font-size:12px; }
.list li { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #eee; }
.list li.total { border-top:2px solid #000; border-bottom:none; margin-top:2mm; padding-top:3mm; font-weight:600; }
.footnote { font-size:10px; color:#666; }
@page { size: A4; margin: 0; }

/* ================================================================== */
/* =============== Splash de carga + estados de la app =============== */
/* ================================================================== */

/* Oculta la app mientras carga y muestra el splash */
body[data-state="loading"] #app { display: none !important; }
body[data-state="ready"]   #splash { display: none !important; }

/* Splash centrado a pantalla completa */
.splash{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  background: #f8f9fa; /* combina con .bg-light */
  z-index: 9999;
  text-align: center;
  padding: 2rem;
  isolation: isolate;
}

.splash-logo{
  width: clamp(140px, 22vw, 120px);
  height: auto;
  display: block;
}

.splash-bar{
  width: min(420px, 82vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.splash-bar-fill{
  display: block;
  width: 50%;
  height: 100%;
  animation: splashloading 1.6s infinite;
  /* Colores de marca con fallback */
  background: linear-gradient(
    90deg,
    var(--brand-color, #3b4d2b),
    var(--field-bord, #526344),
    var(--brand-color, #3b4d2b)
  );
}

@keyframes splashloading {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(-10%); }
  100% { transform: translateX(100%); }
}

.splash-msg{
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
}

.splash-error{
  margin: 0;
  color: #b02a37;
  font-size: 0.9rem;
}

/* Respeto a usuarios con menos animación */
@media (prefers-reduced-motion: reduce) {
  .splash-bar-fill { animation: none; transform: translateX(0); width: 100%; }
}

/* Nunca imprimir el splash */
@media print {
  #splash { display: none !important; }
}

/* Logo del header: sin borde ni outline */
.brand-link,
.brand-link:focus,
.brand-link:active {
  outline: none !important;
  box-shadow: none !important;
}

.brand-link .brand-logo {
  border: 0 !important;
  outline: none !important;
}

/* (Opcional) Mantener accesibilidad con teclado:
   si no quieres ningún anillo tampoco con Tab, deja 'outline: none;' */
.brand-link:focus-visible {
  outline: 0;        /* o personaliza: 2px solid #0d6efd; outline-offset: 2px; */
}

/* Asegura el tamaño del logo aunque sea <a> o <span> */
.brand-link .brand-logo {
  height: 64px;
  max-height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Botón "?" redondo */
.btn-help {
  --help-size: 22px;
  width: var(--help-size);
  height: var(--help-size);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  font-size: 12px;
}
.btn-help:focus {
  outline: 2px solid #86b7fe; /* accesibilidad */
  outline-offset: 2px;
}

/* Card de ayuda */
.help-card {
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Tablas con scroll vertical suave */
.table-scroll-10 {
  max-height: 360px;
  overflow-y: auto;
}

.table-scroll-10 thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
}

/* Mini modal genérico (nombre PDF, etc.) */
.mini-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.mini-modal {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  max-width: 420px;
  width: 100%;
  padding: 16px 18px;
}

.mini-modal h5 {
  margin: 0 0 6px;
}

.mini-modal .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Brand card (logo empresa) */
.brand-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.brand-logo {
  width: 120px;
  height: 120px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-actions {
  flex: 1;
  min-width: 0;
}

.small-muted {
  font-size: 12px;
  color: #667085;
}

/* Servicios (NIE / LAT) ajustados al nuevo layout, pero sin locuras */
.svc-body {
  position: relative;
}

.svc-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border-radius: 12px;
}

.svc-veil .inner {
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
  border: 1px dashed #d1d5db;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.svc-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .svc-chooser {
    grid-template-columns: 1fr;
  }
}

.svc-tile {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  background: #ffffff;
}

.svc-tile:hover {
  background: #f9fafb;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.svc-tile .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border-radius: 10px;
  font-size: 22px;
}

.svc-detail {
  margin-top: 8px;
}

.svc-back {
  margin-bottom: 6px;
}

.svc-back .btn-link {
  padding-left: 0;
}

.svc-card {
  border-radius: 12px;
}

.svc-card .trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #0f5132;
  background: #e6f4f1;
  border: 1px solid #bfe3db;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

.svc-est {
  font-size: 13px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  border-radius: 8px;
}

.svc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pricing responsivo sencillo (2 columnas en escritorio) */
.pricing-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 992px) {
  .pricing-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.price-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.price-head {
  padding: 12px 14px 8px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-name {
  font-weight: 600;
}

.badge-rec {
  background: #16a34a;
  color: #ffffff;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.price-body {
  padding: 12px 14px 10px;
}

.price-val {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.price-val small {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
}

.features {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 4px 0;
  color: #111827;
  font-size: 0.9rem;
}

.features li .tick {
  font-size: 18px;
  line-height: 1.2;
  margin-top: 1px;
}

.price-cta {
  padding: 0 14px 14px;
}

.btn-wide {
  width: 100%;
}

.price-card.current {
  border-color: #16a34a;
}

.price-card.current .price-head {
  background: #f0fdf4;
}

/* Flex controls */
.flex-ctrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.flex-ctrl .rowx {
  display: flex;
  gap: 8px;
  align-items: center;
}

.flex-ctrl input[type="number"] {
  max-width: 120px;
}

.flex-note {
  font-size: 12px;
  color: #64748b;
}

/* Versión comprimida (minificada) de algunos estilos de servicios/pricing,
   que supongo arrastraste de otro sitio. Mantenemos porque no molestan,
   pero ojo con duplicar más adelante. */
.svc-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:992px){ .svc-grid{grid-template-columns:1fr 1fr;} }
.svc-card .trust{display:flex;align-items:center;gap:.5rem;font-size:12px;color:#0a6847;background:#e6f4f1;border:1px solid #bfe3db;border-radius:8px;padding:.35rem .6rem;margin-bottom:.5rem}
.svc-est{font-size:13px;background:#f8fafc;border:1px solid #e2e8f0;padding:.6rem .75rem;border-radius:.5rem}
.svc-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.svc-badge{display:inline-block;background:#111827;color:#fff;border-radius:999px;padding:.15rem .5rem;font-size:11px}
.svc-chooser{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.25rem}
@media(min-width:768px){ .svc-chooser{grid-template-columns:1fr 1fr;} }
.svc-tile{border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;cursor:pointer;display:flex;gap:.75rem;align-items:center;transition:background .15s,border-color .15s}
.svc-tile:hover{background:#f9fafb;border-color:#d1d5db}
.svc-tile .icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#eef2ff;border-radius:.6rem;font-size:22px}
.svc-detail{margin-top:.5rem}
.svc-back{margin-bottom:.5rem}
.svc-back .btn-link{padding-left:0}
.svc-body{position:relative}
.svc-veil{position:absolute;inset:0;background:rgba(255,255,255,.88);display:none;align-items:center;justify-content:center;z-index:5;border-radius:.5rem}
.svc-veil .inner{text-align:center}

/* Pricing (versión compacta) */
.pricing-wrap{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:992px){ .pricing-wrap{grid-template-columns:1fr 1fr} }
.price-card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.price-head{padding:1rem 1rem .75rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}
.price-name{font-weight:600}
.badge-rec{background:#16a34a;color:#fff;border-radius:999px;padding:.25rem .6rem;font-size:11px}
.price-body{padding:1rem}
.price-val{font-size:28px;font-weight:700;line-height:1}
.price-val small{font-size:14px;font-weight:500;color:#475569}
.features{margin:1rem 0 0 0;padding:0;list-style:none}
.features li{display:flex;gap:.5rem;align-items:flex-start;margin:.4rem 0;color:#111827}
.features li .tick{font-size:18px;line-height:1.2;margin-top:.1rem}
.price-cta{padding:0 1rem 1rem}
.btn-wide{width:100%}
.price-card.current{border-color:#16a34a}
.price-card.current .price-head{background:#f0fdf4}

/* Flex controls compactos */
.flex-ctrl{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.flex-ctrl .rowx{display:flex;gap:.5rem;align-items:center}
.flex-ctrl input[type="number"]{max-width:120px}
.flex-note{font-size:12px;color:#64748b}

/* Evitar saltos cuando #progress aparece/desaparece */
#progress{
  min-height: 1.25rem;   /* reserva sitio fijo */
  line-height: 1.25rem;
  transition: opacity .18s ease;
}
#progress.is-empty{
  opacity: 0;            /* se oculta sin colapsar altura */
  pointer-events: none;  /* no intercepta clics */
}

/* Layout antiguo específico de scope (lo dejo aquí) */
.scope-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .scope-layout {
    grid-template-columns: 1fr;
  }
}


/* ===== Layout general app ===== */

body.nora-soft-bg {
  background: #f3f4f8;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Logo cabecera */
.brand-link .brand-logo {
  max-height: 40px;
  width: auto;
  display: block;
}

/* Bloque redes */
.social-header img {
  display: inline-block;
}

/* Header base */
.app-header {
  padding-inline: 0.5rem;
}

/* ===== Header responsive ===== */

@media (max-width: 768px) {
  .app-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  /* Línea logo + redes ocupa todo el ancho y reparte mejor */
  .app-header > .d-flex.align-items-center {
    width: 100%;
    justify-content: space-between;
  }

  /* Selector de idioma debajo, a la izquierda */
  .app-header > .d-flex.align-items-center + .d-flex {
    align-self: flex-start;
  }

  .app-header .form-select {
    font-size: 0.85rem;
  }
}

/* En móviles muy pequeños ocultamos el texto “Síguenos en:” para que no rompa */
@media (max-width: 480px) {
  .social-header span {
    display: none;
  }
}