/* ====== Botones — Tema Global (sin sombras) ====== */
:root{
  --brand:            #02274F;   /* tu color */
  --brand-contrast:   #ffffff;
  --brand-hover:      #043366;   /* ligero más claro para hover */
  --brand-active:     #011c39;   /* ligero más oscuro para active */

  --neutral-900:      #0f172a;
  --neutral-800:      #1f2937;
  --neutral-700:      #334155;
  --neutral-500:      #64748b;
  --neutral-300:      #cbd5e1;
  --neutral-200:      #e5e7eb;
  --neutral-100:      #f1f5f9;

  --btn-radius:       10px;
  --focus-color:      rgba(2, 39, 79, .45); /* anillo de foco accesible */
}

/* Base común para todos los .btn */
.btn{
  border-radius: var(--btn-radius) !important;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  padding: .6rem 1rem;
  font-size: .95rem;

  border-width: 1px;
  box-shadow: none !important;             /* sin sombras */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Tamaños */
.btn-sm{ padding:.45rem .8rem; font-size:.875rem; }
.btn-lg{ padding:.8rem 1.25rem; font-size:1rem;  }

/* Foco accesible sin sombra drop */
.btn:focus-visible{
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* Deshabilitado consistente */
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* ====== Variantes ====== */

/* Primario (CTA) */
.btn-primary{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
}
.btn-primary:hover{
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
.btn-primary:active{
  background-color: var(--brand-active) !important;
  border-color: var(--brand-active) !important;
}

/* Secundario en contorno, neutro y sobrio */
.btn-outline-secondary{
  color: var(--neutral-800) !important;
  border-color: var(--neutral-300) !important;
  background-color: #fff !important;
}
.btn-outline-secondary:hover{
  background-color: var(--neutral-100) !important;
  border-color: var(--neutral-300) !important;
  color: var(--neutral-900) !important;
}
.btn-outline-secondary:active{
  background-color: var(--neutral-200) !important;
}

/* Success / Danger minimalistas (por si los usas) */
.btn-success{
  background-color: #1a7f37 !important;
  border-color: #1a7f37 !important;
  color: #fff !important;
}
.btn-success:hover{ background-color:#156a2e !important; border-color:#156a2e !important; }

.btn-danger{
  background-color: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}
.btn-danger:hover{ background-color:#912018 !important; border-color:#912018 !important; }

/* Botón tipo enlace con mejor legibilidad */
.btn-link{
  font-weight: 600;
  color: var(--brand) !important;
  text-underline-offset: 2px;
}
.btn-link:hover{ color: var(--brand-hover) !important; }

/* ====== Botones del wizard (ids globales) ====== */
/* El router marca body[data-inflow="1"] cuando estás dentro del flujo */
body[data-inflow="1"] #btnNext,
body[data-inflow="1"] #btnBack{
  min-width: 10rem;
}

/* Fuerza estilo claro: Next = primario, Back = outline */
#btnNext{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
}
#btnNext:hover{
  background-color: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
#btnNext:active{
  background-color: var(--brand-active) !important;
  border-color: var(--brand-active) !important;
}

#btnBack{
  background-color: #fff !important;
  color: var(--neutral-800) !important;
  border-color: var(--neutral-300) !important;
}
#btnBack:hover{
  background-color: var(--neutral-100) !important;
  color: var(--neutral-900) !important;
}

/* ====== Modo oscuro opcional (respetando el look neutro) ====== */
@media (prefers-color-scheme: dark){
  .btn-outline-secondary{
    color: #e5e7eb !important;
    border-color: #3a4a62 !important;
    background-color: transparent !important;
  }
  .btn-outline-secondary:hover{
    background-color: #182234 !important;
    color: #ffffff !important;
  }
}

/* ====== Progress (uso mensual) ====== */
/* Bootstrap 5 permite personalizar por variables */
.progress{
  --bs-progress-height: 10px;                 /* alto fino */
  --bs-progress-bg: var(--neutral-200);       /* fondo pista */
  --bs-progress-border-radius: 999px;         /* pastilla */
  background-color: var(--neutral-200) !important;
  border-radius: var(--bs-progress-border-radius) !important;
  box-shadow: none !important;
}

.progress-bar{
  --bs-progress-bar-color: #ffffff;
  --bs-progress-bar-bg: var(--brand);         /* tu color */
  background-color: var(--brand) !important;  /* por si acaso */
  color: #ffffff !important;
  box-shadow: none !important;
  transition: width .25s ease;                /* suave */
}

/* Variante “striped/animated” desactivada por si se usa la clase por error */
.progress-bar-striped,
.progress-bar-animated{
  background-image: none !important;
}

/* Modo oscuro: pista un poco más oscura, barra sigue siendo marca */
@media (prefers-color-scheme: dark){
  .progress{
    --bs-progress-bg: #1f2a3b;
    background-color: #1f2a3b !important;
  }
}
/* Grosor extra para la barra de progreso */
.progress{
  --bs-progress-height: 24px !important;   /* antes tenías 10px */
  border-radius: 999px !important;         /* mantiene forma de pastilla */
}

/* ================================
   Dashboard responsive baseline
   ================================ */
:root{
  --brand:#02274F;
  --brand-ink:#02274F;
  --line:#e5e7eb;
  --muted:#6b7280;
  --radius:12px;
  --radius-lg:16px;
}

#dash-root{ padding: 12px; }
@media (min-width: 992px){
  #dash-root{ padding: 16px 0; }
}

/* --------- Tabs header --------- */
.dash-header{
  display:flex; gap:.5rem;
  padding:.25rem; margin:0 0 1rem 0;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:#fff;
  overflow:auto hidden;
  -webkit-overflow-scrolling:touch;
}
.dash-header::-webkit-scrollbar{ display:none; }

.dash-tab{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:999px;
  color:#111827; text-decoration:none; white-space:nowrap;
}
.dash-tab svg{ width:18px; height:18px; flex:0 0 18px; }
.dash-tab:hover{ background: color-mix(in srgb, var(--brand) 8%, transparent); }
.dash-tab[aria-selected="true"]{
  color:var(--brand-ink);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  font-weight:600;
}

/* --------- Cards / layout --------- */
.card{ border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; }
.card-body{ padding:16px; }
@media (min-width:768px){ .card-body{ padding:20px; } }

/* --------- Brand block --------- */
.brand-card{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center;
}
.brand-logo{
  width:120px; height:120px; border:1px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa;
}
.brand-logo img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:575px){
  .brand-card{ grid-template-columns:1fr; }
  .brand-logo{ width:100%; height:140px; }
}

/* --------- Tables --------- */
.table-scroll-10{ max-height: 260px; overflow:auto; }
@media (max-width:520px){
  /* Oculta 'Creado' en móviles para ganar espacio */
  #sec-pdfs thead th:nth-child(2),
  #sec-pdfs tbody td:nth-child(2){ display:none; }
}

/* --------- Filtros PDF --------- */
#sec-pdfs .d-flex.gap-2{
  flex-wrap:wrap; gap:.5rem;
}
#pdfSearch{ min-width: 180px; }

/* --------- Progress bar (grosor + color marca) --------- */
.progress{ --bs-progress-height:24px !important; border-radius:999px !important; }
.progress-bar{ background-color:var(--brand) !important; }

/* --------- Pricing grid --------- */
.pricing-wrap{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width:700px){ .pricing-wrap{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1100px){ .pricing-wrap{ grid-template-columns: repeat(3,1fr); } }

.price-card{
  border:1px solid var(--line); border-radius:16px;
  display:flex; flex-direction:column; gap:12px; padding:16px;
}
.price-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.price-name{ font-weight:600; }
.badge-rec{
  font-size:.75rem; padding:.25rem .5rem; border-radius:999px;
  background:var(--brand); color:#fff;
}
.price-body{ display:flex; flex-direction:column; gap:12px; }
.price-val{ font-weight:700; font-size:clamp(20px, 4vw, 28px); }
.features{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.features .tick{ margin-right:.4rem; }
.price-cta .btn-wide{ width:100%; }
.price-card.current{ outline:2px solid var(--brand); outline-offset:2px; }

/* --------- Flex controls --------- */
.flex-ctrl{ display:flex; flex-direction:column; gap:.5rem; }
.flex-ctrl .rowx{ display:flex; align-items:center; gap:.5rem; }
#flexQtyRange{ width:100%; }
.flex-note{ font-size:.9rem; color:#374151; }

/* --------- Servicios --------- */
.svc-body{ position:relative; }
.svc-veil{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); backdrop-filter:saturate(180%) blur(4px);
  border-radius:var(--radius-lg);
}
.svc-veil .inner{ text-align:center; padding:1rem; }

.svc-chooser{
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:600px){ .svc-chooser{ grid-template-columns:1fr 1fr; } }

.svc-tile{
  display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid var(--line); border-radius:12px; cursor:pointer; background:#fff;
}
.svc-tile .icon{ font-size:22px; line-height:1; }
.svc-tile:hover{ border-color:var(--brand); }
.svc-badge{
  padding:.1rem .5rem; border-radius:999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color:var(--brand);
}

.svc-detail .svc-back{ margin-bottom:.5rem; }
.svc-card{ border:1px solid var(--line); border-radius:16px; }
.trust{ font-size:.9rem; color:#111827; background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:.5rem .75rem; margin-bottom:.75rem; }
.svc-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* --------- Legal TOC --------- */
#sec-legal .js-legal-toc{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
#sec-legal .js-legal-toc a{
  display:inline-block; padding:.35rem .6rem; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; color:#111827;
}
#sec-legal .js-legal-toc a:hover{ border-color:var(--brand); color:var(--brand); }

@media (min-width:992px){
  #sec-legal .js-legal-toc{ display:block; }
  #sec-legal .js-legal-toc a{ display:block; border:none; padding:.2rem 0; border-radius:0; }
  #sec-legal nav .card{ position:sticky; top:.75rem; }
}

/* --------- Mini modal (nombre PDF) --------- */
.mini-modal-backdrop{
  position:fixed; inset:0; z-index:1050;
  background:rgba(0,0,0,.4); display:grid; place-items:center; padding:16px;
}
.mini-modal{
  width:min(560px, 100%); background:#fff; border-radius:12px; padding:16px;
  box-shadow:none; border:1px solid var(--line);
}
.mini-modal .actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.75rem; }

/* --------- Buttons & focus (sin sombras) --------- */
.btn{ border-radius:10px; box-shadow:none !important; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
.btn-outline-secondary{ color:#374151; border-color:#cbd5e1; }
.btn-outline-danger{ color:#b91c1c; border-color:#fecaca; }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* --------- Inputs --------- */
.form-control, .form-select{
  border-radius:10px; box-shadow:none; border-color:#cbd5e1;
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--brand) 60%, #cbd5e1);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent);
}

/* --------- Misc utilidades --------- */
.small-muted{ color:var(--muted); font-size:.875rem; }
.sep{ height:1px; background:var(--line); }
:root{ accent-color:var(--brand); }

/* ===== Kill Bootstrap Blue (usar tu paleta) ===== */

/* 1) Re-map global de Bootstrap a tu marca */
:root{
  --bs-primary: #02274F;          /* tu --brand */
  --bs-primary-rgb: 2, 39, 79;    /* para sombras/focus internas */
  --bs-link-color: #02274F;
  --bs-link-hover-color: #043366;
}

/* 2) Botones: asegurar TODOS los estados */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-active);
  --bs-btn-active-border-color: var(--brand-active);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  color: var(--brand-contrast) !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-primary:hover{ background-color: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
.btn-primary:active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle{
  background-color: var(--brand-active) !important;
  border-color: var(--brand-active) !important;
}

/* Outline primary (el culpable típico del azul brillante) */
.btn-outline-primary{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-active);
  --bs-btn-active-border-color: var(--brand-active);
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  background-color: #fff !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle{
  color:#fff !important;
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Quitar el halo azul de focus de Bootstrap (usamos tu outline propio) */
.btn:focus,
.btn:focus-visible{
  box-shadow: none !important;
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* 3) Controles de formulario “checked” (checkbox, radio, switch) */
.form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.form-switch .form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* 4) Otros componentes que heredan el primary por defecto */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--brand) !important;
}
.pagination .page-item.active .page-link{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.page-link{ color: var(--brand) !important; }
.badge.bg-primary{ background-color: var(--brand) !important; }
.dropdown-item.active, .dropdown-item:active{
  background-color: color-mix(in srgb, var(--brand) 15%, transparent) !important;
  color: inherit !important;
}