/* ============================================================
   COTIZAPRO — Estilos
   Paleta: verde corporativo, blanco, gris
   ============================================================ */

:root{
  --azul-900:#33691E;
  --azul-800:#558B2F;
  --azul-700:#689F38;
  --azul-600:#7CB342;
  --azul-500:#8BC34A;
  --azul-100:#DCEDC8;
  --azul-50:#F1F8E9;

  --gris-900:#1f2937;
  --gris-700:#4b5563;
  --gris-500:#6b7280;
  --gris-300:#d1d5db;
  --gris-200:#e5e7eb;
  --gris-100:#f1f3f6;
  --gris-50:#f8f9fb;

  --blanco:#ffffff;
  --exito:#16a34a;
  --peligro:#dc2626;

  --radio:10px;
  --sombra: 0 1px 3px rgba(15,35,70,.08), 0 6px 20px rgba(15,35,70,.06);
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
}

/* Utilidades mínimas equivalentes a Bootstrap, para las páginas que
   ya no lo cargan (cotizador, registro de cotizaciones, inventario,
   categorías, sucursales) — mismo valor que usaba Bootstrap, así que
   en las páginas que SÍ siguen cargando Bootstrap esto no cambia
   nada (misma especificidad, mismo resultado visual). */
.d-flex{ display:flex !important; }
.d-block{ display:block !important; }
.d-none{ display:none !important; }
.position-relative{ position:relative !important; }
.position-absolute{ position:absolute !important; }
.position-fixed{ position:fixed !important; }
.position-sticky{ position:sticky !important; }
.flex-wrap{ flex-wrap:wrap !important; }
.flex-shrink-0{ flex-shrink:0 !important; }
.flex-grow-1{ flex-grow:1 !important; }
.align-items-center{ align-items:center !important; }
.align-items-end{ align-items:flex-end !important; }
.justify-content-center{ justify-content:center !important; }
.justify-content-between{ justify-content:space-between !important; }
.gap-1{ gap:.25rem !important; }
.gap-2{ gap:.5rem !important; }
.gap-3{ gap:1rem !important; }
.text-center{ text-align:center !important; }
.text-end{ text-align:right !important; }
.text-muted{ color: var(--gris-500) !important; }
.text-danger{ color:#dc2626 !important; }
.text-warning{ color:#f59e0b !important; }
.small{ font-size:.85em; }
.fw-bold{ font-weight:700 !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:1rem !important; }
.mt-1{ margin-top:.25rem !important; }
.mt-2{ margin-top:.5rem !important; }
.ms-1{ margin-left:.25rem !important; }
.ms-2{ margin-left:.5rem !important; }
.p-2{ padding:.5rem !important; }
.p-3{ padding:1rem !important; }
.py-3{ padding-top:1rem !important; padding-bottom:1rem !important; }
.py-4{ padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
.rounded{ border-radius:8px !important; }
.border{ border:1px solid var(--gris-200) !important; }
.bg-light{ background: var(--gris-100) !important; }
.cursor-pointer{ cursor:pointer !important; }
.table-responsive{ overflow-x:auto; }
.table{ width:100%; }
.table-sm td, .table-sm th{ padding:.3rem .5rem !important; }

/* Botones — misma idea: reemplaza la base que daba Bootstrap para
   .btn/.btn-primary/etc, pero usando el color de marca del sistema
   (--azul-*) en vez del azul por defecto de Bootstrap. */
.btn{
  display:inline-block; font-weight:500; line-height:1.5; text-align:center;
  vertical-align:middle; cursor:pointer; user-select:none;
  background-color:transparent; border:1px solid transparent;
  padding:.375rem .75rem; font-size:.9rem; border-radius:8px;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-sm{ padding:.25rem .5rem; font-size:.8rem; border-radius:6px; }

/* ============================================================
   MICRO-INTERACCIONES DE BOTONES (estilo Emil Kowalski) — un achique
   sutil y rápido al presionar CUALQUIER botón del sistema, con una
   curva de easing con un poquito de rebote en vez del "ease" plano.
   Se declara la transición directo en :active (no en el estado base)
   para no pisar la transición que cada botón ya tenga definida para
   sus propios cambios de color/fondo — así es 100% aditivo, nunca
   rompe una transición existente. Respeta prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  a.btn:not(:disabled):active,
  [role="button"]:not([aria-disabled="true"]):active {
    transform: scale(.96);
    transition: transform .1s cubic-bezier(.34,1.56,.64,1);
  }

  /* Transición de modo oscuro/claro — tema.js le agrega esta clase al
     <html> por un instante al alternar el tema, así el cambio de color
     se ve como un cross-fade suave en vez de un salto de golpe. Se
     aplica ancho (todo el documento) pero solo mientras dura la clase,
     no queda encendida permanentemente. */
  html.tema-transicionando,
  html.tema-transicionando *,
  html.tema-transicionando *::before,
  html.tema-transicionando *::after {
    transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease, fill .28s ease, stroke .28s ease !important;
  }
}
.btn-primary{ color:#fff; background-color: var(--azul-600); border-color: var(--azul-600); }
.btn-primary:hover{ background-color: var(--azul-700); border-color: var(--azul-700); color:#fff; }
.btn-outline-primary{ color: var(--azul-700); border-color: var(--azul-600); }
.btn-outline-primary:hover{ color:#fff; background-color: var(--azul-600); }
.btn-outline-secondary{ color: var(--gris-700); border-color: var(--gris-300,#ced4da); }
.btn-outline-secondary:hover{ color:#fff; background-color: var(--gris-500); border-color: var(--gris-500); }
.btn-danger{ color:#fff; background-color:#dc2626; border-color:#dc2626; }
.btn-danger:hover{ background-color:#b91c1c; border-color:#b91c1c; color:#fff; }
.btn-outline-danger{ color:#dc2626; border-color:#dc2626; }
.btn-outline-danger:hover{ color:#fff; background-color:#dc2626; }
.btn-success{ color:#fff; background-color:#16a34a; border-color:#16a34a; }
.btn-success:hover{ background-color:#15803d; color:#fff; }
.btn-close{
  width:1em; height:1em; padding:0; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border:0; border-radius:.375rem; opacity:.5; cursor:pointer;
}
.btn-close:hover{ opacity:.75; }
html[data-tema="oscuro"] .btn-close{ filter: invert(1) grayscale(100%); }

body{
  margin:0;
  background: linear-gradient(180deg, var(--azul-50) 0%, var(--gris-50) 320px);
  font-family: var(--font-body);
  color: var(--gris-900);
  min-height:100vh;
}

h1,h2,h3,.brand strong,.doc-title{
  font-family: var(--font-display);
}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.topbar{
  position: sticky;
  top:0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--gris-200);
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
html[data-tema="oscuro"] .topbar{ background:#1a2436; border-bottom-color: var(--gris-200); }

.topbar-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:16px;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--gris-900);
}

.brand-icon{
  width:40px;height:40px;
  border-radius:10px;
  background: var(--azul-50);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
  color: var(--azul-900);
  flex-shrink:0;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.brand-text strong{ font-size:1.05rem; letter-spacing:.2px; color: var(--gris-900); }
.brand-text small{ color: var(--gris-500); font-size:.72rem; }

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

.btn-topbar{
  display:flex;
  align-items:center;
  gap:7px;
  background: var(--gris-100);
  border:1px solid var(--gris-200);
  color: var(--gris-700);
  font-size:.82rem;
  font-weight:600;
  padding:7px 13px;
  border-radius:8px;
  transition: all .18s ease;
}
.btn-topbar:hover{
  background: var(--gris-200);
  color: var(--gris-900);
  transform: translateY(-1px);
}
.btn-topbar-accent{
  background: var(--azul-900);
  border-color: var(--azul-900);
  color:#fff;
}
.btn-topbar-accent:hover{
  background: var(--azul-800);
  color:#fff;
}
.btn-topbar-danger{
  background: #fef2f2;
  border-color: #fecaca;
  color:#dc2626;
}
.btn-topbar-danger:hover{
  background: #fee2e2;
  border-color: #fca5a5;
  color:#b91c1c;
}
html[data-tema="oscuro"] .btn-topbar-danger{
  background: rgba(220,38,38,.18);
  border-color: rgba(220,38,38,.4);
  color:#ffb4b4;
}
html[data-tema="oscuro"] .btn-topbar-danger:hover{
  background: rgba(220,38,38,.3);
  color:#fff;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack{
  position: fixed;
  top:20px; right:20px;
  z-index: 2000;
  display:flex;
  flex-direction: column;
  gap:10px;
}
.toast-item{
  min-width: 260px;
  max-width: 340px;
  background:#fff;
  border-left: 4px solid var(--exito);
  border-radius: 8px;
  box-shadow: var(--sombra);
  padding: 12px 16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color: var(--gris-900);
  animation: toastIn .28s ease;
}
.toast-item.toast-error{ border-left-color: var(--peligro); }
.toast-item i{ margin-top:2px; color: var(--exito); }
.toast-item.toast-error i{ color: var(--peligro); }
.toast-item.fade-out{
  animation: toastOut .25s ease forwards;
}
@keyframes toastIn{
  from{ opacity:0; transform: translateX(24px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes toastOut{
  from{ opacity:1; transform: translateX(0);}
  to{ opacity:0; transform: translateX(24px);}
}

/* ============================================================
   MODALES (UIModal, ui-modal.js) — fondo con fade y panel con una
   escala suave al abrir/cerrar, en vez del aparecer/desaparecer
   instantáneo de antes. ui-modal.js agrega/quita la clase
   "ui-modal-visible" con un pequeño delay para que esta transición
   alcance a jugarse antes de ocultar el modal con display:none.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .fixed.inset-0[class*="bg-black/"]{
    opacity: 0;
    transition: opacity .16s ease;
  }
  .fixed.inset-0[class*="bg-black/"].ui-modal-visible{
    opacity: 1;
  }
  .fixed.inset-0[class*="bg-black/"] > div{
    transform: scale(.95) translateY(6px);
    opacity: 0;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .16s ease;
  }
  .fixed.inset-0[class*="bg-black/"].ui-modal-visible > div{
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   HOJA / CONTENEDOR PRINCIPAL
   ============================================================ */
.page-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 70px;
}

.sheet{
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: var(--sombra);
  padding: 36px;
  animation: fadeUp .35s ease;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Encabezado ---------- */
.sheet-header{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap:24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--gris-100);
  flex-wrap: wrap;
}

.header-left{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap:10px;
}

.logo-box{
  width:130px;
  height:100px;
  border: 1.5px dashed var(--gris-300);
  border-radius: var(--radio);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--gris-50);
}
.logo-box img{
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}
.logo-placeholder{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:4px;
  color: var(--gris-500);
  font-size:.75rem;
}
.logo-placeholder i{ font-size:1.4rem; }

.logo-controls{ display:flex; align-items:center; gap:10px; }

.empresa-resumen{ font-size:.85rem; color: var(--gris-700); max-width:220px; }
.empresa-resumen strong{
  display:block;
  color: var(--gris-900);
  font-size:.92rem;
  margin-bottom:3px;
  word-break: break-word;
}

.header-right{
  text-align:right;
  min-width: 240px;
}

.doc-title{
  color: var(--azul-800);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:1px;
  margin-bottom:10px;
}

.doc-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.doc-meta-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  font-size:.85rem;
  color: var(--gris-700);
}
.doc-meta-row span{
  min-width:90px;
  text-align:left;
  font-weight:600;
  color: var(--gris-500);
}
.meta-input{
  border:1px solid var(--gris-200);
  border-radius:6px;
  padding:4px 8px;
  font-size:.85rem;
  text-align:right;
  width:150px;
  background: var(--gris-50);
  color: var(--azul-800);
  font-weight:600;
}
.meta-input:focus{
  outline:none;
  border-color: var(--azul-500);
  background:#fff;
}

/* ---------- Datos de empresa / cliente ---------- */
.info-card{
  background: #fff;
  border: 1.5px solid var(--gris-200);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,35,70,.05);
}

.info-title{
  font-size:.85rem;
  font-weight:700;
  color: var(--azul-800);
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 20px;
  background: var(--azul-50);
  border-bottom: 1.5px solid var(--gris-200);
  text-transform: uppercase;
  letter-spacing:.4px;
}
.info-title i{ color: var(--azul-600); }

/* ---------- Tarjetas plegables (ej. Datos de la empresa, Medios de pago) ---------- */
.info-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 20px;
  background: var(--azul-50);
  border-bottom: 1.5px solid var(--gris-200);
  cursor:pointer;
  user-select:none;
}
.info-card-header .info-title{
  padding:0;
  background:transparent;
  border-bottom:none;
}
.collapse-chevron{
  color: var(--azul-600);
  font-size:.8rem;
  transition: transform .2s ease;
  flex-shrink:0;
}
.info-card-header[aria-expanded="true"] .collapse-chevron{ transform: rotate(180deg); }

.opcional-tag{
  font-size:.66rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  color: var(--gris-500);
  background: var(--gris-200);
  padding:1px 8px;
  border-radius:999px;
  margin-left:4px;
}

.perfil-logo-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.perfil-guardar-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}

/* ---------- Medios de pago ---------- */
.info-grid-full{ margin-top:18px; }
.sheet-header + .info-grid-full{ margin-top:26px; }
.info-grid-full .info-card{ width:100%; }

.tool-hint-cotizador{
  font-size:.8rem;
  color: var(--gris-500);
  margin: 0 0 16px;
  line-height:1.5;
}
.pago-subgrupo{ margin-bottom:18px; }
.pago-subgrupo:last-child{ margin-bottom:0; }
.pago-subtitulo{
  font-size:.78rem;
  font-weight:700;
  color: var(--azul-700);
  display:flex;
  align-items:center;
  gap:7px;
  margin: 0 0 10px;
}
.pago-subtitulo i{ color: var(--azul-500); }

.info-card-body{
  padding: 18px 20px;
  background: var(--gris-50);
}

.info-field{ margin-bottom:12px; }
.info-field:last-child{ margin-bottom:0; }
.info-field label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  color: var(--gris-500);
  margin-bottom:4px;
  text-transform: uppercase;
  letter-spacing:.3px;
}
.req{ color: var(--peligro); }

.inventario-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:6px;
}

.info-field-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-bottom:12px;
}

/* Base de .form-control/.form-select — antes la daba Bootstrap; se
   replica aquí (mismos valores que Bootstrap 5.3 por defecto) para
   que las páginas que ya no cargan Bootstrap sigan viéndose igual.
   En las páginas que todavía cargan Bootstrap esto no cambia nada
   (son los mismos valores, solo que ahora también están acá). */
.form-control, .form-select{
  display:block;
  width:100%;
  padding:.375rem .75rem;
  font-size:.9rem;
  line-height:1.5;
  color: var(--gris-900);
  background-color:#fff;
  border:1px solid var(--gris-200);
  border-radius:.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-select{
  padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px 12px;
  appearance:none;
}
.form-control-sm, .form-select-sm{
  padding:.25rem .5rem;
  font-size:.8rem;
  border-radius:.25rem;
}
.form-control::placeholder{ color: var(--gris-500); opacity:1; }
.form-control:disabled, .form-select:disabled{ background-color: var(--gris-100); opacity:1; }
.form-control:focus, .form-select:focus{
  outline:0;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 .18rem rgba(59,130,246,.15);
}
.form-control.is-invalid{
  border-color: var(--peligro) !important;
  background-image:none;
}
.form-check{ display:block; min-height:1.2rem; padding-left:1.5em; margin-bottom:.125rem; }
.form-check-input{
  width:1em; height:1em; margin-top:.2em; margin-left:-1.5em;
  vertical-align:top; background-color:#fff; border:1px solid var(--gris-300,#9ca3af);
  border-radius:.25em; appearance:none; print-color-adjust:exact; cursor:pointer;
}
.form-check-input[type="checkbox"]{ border-radius:.25em; }
.form-check-input:checked{ background-color: var(--azul-600); border-color: var(--azul-600); }
.form-check-input:checked[type="checkbox"]{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3e%3cpath d='M6 10l3 3 6-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:center; background-size:.75em;
}
.form-check-label{ cursor:pointer; }
.form-switch{ padding-left:2.5em; }
.form-switch .form-check-input{
  width:2em; margin-left:-2.5em; border-radius:2em;
  background-color: var(--gris-300, #cbd5e1);
  border-color: var(--gris-300, #cbd5e1);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position:left center; background-repeat:no-repeat; background-size: contain;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
}
.form-switch .form-check-input:checked{
  background-position:right center;
  background-color: var(--azul-600);
  border-color: var(--azul-600);
}
.input-group{ display:flex; align-items:stretch; width:100%; }
.input-group > .form-control{ border-radius:.375rem 0 0 .375rem; }
.input-group-text{
  display:flex; align-items:center; padding:.375rem .75rem; font-size:.9rem;
  color: var(--gris-700); background: var(--gris-100); border:1px solid var(--gris-200);
  border-left:none; border-radius:0 .375rem .375rem 0;
}

/* ---------- Productos ---------- */
.productos-section{ margin-top:30px; }

.section-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom:10px;
  flex-wrap:wrap;
  gap:10px;
}

.btn-primary-soft{
  background: var(--azul-100);
  color: var(--azul-700);
  border:1px solid #cfe0ff;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-primary-soft:hover{
  background: var(--azul-600);
  color:#fff;
  border-color: var(--azul-600);
}

.tabla-productos{
  margin-bottom:0;
  border-collapse: separate;
  border-spacing:0;
}
.tabla-productos thead th{
  background: var(--azul-900);
  color:#fff;
  font-size:.76rem;
  font-weight:600;
  text-transform: uppercase;
  letter-spacing:.4px;
  padding:11px 12px;
  border:none;
}
.tabla-productos thead th:first-child{ border-top-left-radius:8px; }
.tabla-productos thead th:last-child{ border-top-right-radius:8px; }

.tabla-productos tbody td{
  padding:8px 10px;
  vertical-align:middle;
  border-bottom:1px solid var(--gris-100);
  background:#fff;
}
.tabla-productos tbody tr:hover td{ background: var(--azul-50); }

/* Celdas de acciones (con varios botones de ícono): que siempre
   queden en una sola fila horizontal, nunca apilados uno debajo del
   otro. Antes .col-acc forzaba un ancho fijo de 46px, que alcanzaba
   para 1-2 botones pero hacía que 3 o más se apilaran verticalmente. */
.tabla-productos td:has(.btn){
  white-space: nowrap;
}
.tabla-productos td:has(.btn) .btn{
  margin: 0 1px;
}

.col-num{ width:130px; }
.col-acc{ white-space: nowrap; }
.col-item{ width:48px; text-align:center; }

.prod-item-num{
  display:inline-block;
  font-weight:700;
  color: var(--gris-500);
}

.brand-home-link{
  color: var(--gris-500);
  font-size:1.05rem;
  margin-right:.35rem;
  display:inline-flex;
  align-items:center;
  transition: color .15s;
}
.brand-home-link:hover{ color: var(--azul-900); }

.prod-total{
  display:block;
  font-weight:700;
  color: var(--azul-800);
  text-align:right;
  padding-right:6px;
}

.btn-borrar-fila{
  background: transparent;
  border:none;
  color: var(--gris-500);
  width:32px; height:32px;
  border-radius:8px;
  transition: all .15s ease;
}
.btn-borrar-fila:hover{
  background: rgba(220,38,38,.1);
  color: var(--peligro);
}

/* ---------- Totales ---------- */
.totales-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}
.totales-box{
  width:100%;
  max-width:320px;
  background: var(--gris-50);
  border:1px solid var(--gris-100);
  border-radius: var(--radio);
  padding:16px 20px;
}
.totales-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size:.9rem;
  color: var(--gris-700);
  padding:6px 0;
}
.totales-row strong{ color: var(--gris-900); }

.total-final{
  margin-top:0;
  padding-top:0;
  font-size:1.05rem;
}
.total-final strong{
  color: var(--azul-700);
  font-size:1.2rem;
  font-weight:800;
}

/* ---------- Observaciones ---------- */
.obs-section{ margin-top:30px; }

/* ---------- Footer de la hoja ---------- */
.sheet-footer{
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid var(--gris-100);
  text-align:center;
  font-size:.75rem;
  color: var(--gris-500);
}

/* ============================================================
   MODALES
   ============================================================ */
.modal-content{ border-radius:14px; border:none; }
.modal-header{ border-bottom:1px solid var(--gris-100); }
.modal-title{ font-family: var(--font-display); color: var(--azul-800); font-weight:700; }
.modal-title i{ color: var(--azul-600); margin-right:6px; }

.lista-historial{ display:flex; flex-direction:column; gap:10px; }

.historial-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background: var(--gris-50);
  border:1px solid var(--gris-100);
  border-radius:10px;
  padding:12px 16px;
  transition: all .15s ease;
}
.historial-item:hover{
  border-color: var(--azul-500);
  background: var(--azul-50);
}
.historial-info strong{ color: var(--azul-800); display:block; font-size:.92rem; }
.historial-info span{ color: var(--gris-500); font-size:.78rem; }
.historial-info .historial-total{ color: var(--gris-700); font-weight:600; }

.historial-actions{ display:flex; gap:6px; flex-shrink:0; }
.historial-actions button{
  width:34px; height:34px;
  border-radius:8px;
  border:1px solid var(--gris-200);
  background:#fff;
  color: var(--gris-700);
  transition: all .15s ease;
}
.historial-actions button:hover{ transform: translateY(-1px); }
.btn-abrir-hist:hover{ background: var(--azul-600); color:#fff; border-color: var(--azul-600); }
.btn-duplicar-hist:hover{ background:#eef6ee; color: var(--exito); border-color:#bfe3bf; }
.btn-borrar-hist:hover{ background:#fdecec; color: var(--peligro); border-color:#f5c2c2; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 860px){
  .info-field-row{ grid-template-columns:1fr; }
  .sheet{ padding:22px; }
  .sheet-header{ flex-direction:column; }
  .header-right{ text-align:left; width:100%; }
  .doc-meta-row{ justify-content:space-between; }
  .doc-meta-row span{ min-width:auto; }
}

@media screen and (max-width: 700px){
  /* Antes cada tabla se apilaba en "tarjetas" (un dato por línea) en
     celular — se prefiere que se mantenga como tabla de verdad, con
     sus columnas de lado, y que el contenedor .table-responsive se
     encargue de dejarla arrastrar horizontalmente hasta llegar a la
     columna de acciones (editar/PDF/eliminar) al final. */
  .table-responsive{ -webkit-overflow-scrolling:touch; }
  .tabla-productos{ min-width:640px; }
  .topbar-actions .btn-topbar span{ display:none; }
  .topbar-actions .btn-topbar{ padding:8px 11px; }
}

@media screen and (max-width:480px){
  .page-wrap{ padding:16px 10px 50px; }
  .sheet{ padding:16px; border-radius:10px; }
  .brand-text small{ display:none; }
}

/* ============================================================
   IMPRESIÓN / PDF EN PANTALLA
   Nota: una hoja A4 mide ~793px de ancho, por eso TODAS las
   reglas responsive de arriba se restringen a "screen" — de lo
   contrario el navegador aplicaba el layout móvil al imprimir.
   Aquí además forzamos explícitamente el layout de escritorio
   (2 columnas, tabla normal) para que se vea como una factura.
   ============================================================ */
@media print{
  @page{ margin: 12mm; size: A4; }
  body{ background:#fff !important; }
  .no-print{ display:none !important; }
  .page-wrap{ padding:0; max-width:none; }
  .sheet{ box-shadow:none; border-radius:0; padding:0; }

  /* Encabezado siempre en fila: logo a la izquierda, datos a la derecha */
  .sheet-header{ display:flex !important; flex-direction:row !important; align-items:flex-start !important; }
  .header-right{ text-align:right !important; }
  .doc-meta-row{ justify-content:flex-end !important; }
  .doc-meta-row span{ min-width:90px !important; }

  /* Empresa y cliente: cada una a todo el ancho, como en pantalla */
  .info-field-row{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap:12px !important; }

  /* Las tarjetas plegables (empresa, medios de pago) se muestran completas al imprimir */
  .collapse{ display:block !important; height:auto !important; visibility:visible !important; }
  .info-card-header{ cursor:default; }
  .collapse-chevron{ display:none !important; }

  .info-card{
    background:#fff;
    border:1.3px solid #b9c4d1 !important;
    border-radius:8px;
    box-shadow:none;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .info-title{
    background: var(--gris-100) !important;
    color: var(--azul-900) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .info-card-body{ background:#fff; }

  .form-control, .meta-input{
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:2px 0 !important;
    color:#000;
  }
  textarea.form-control{ resize:none; }
  .logo-box{ border:none; }
  .totales-box{ border:1px solid var(--gris-200); background:#fff; }

  /* La tabla de productos nunca debe verse como tarjetas apiladas */
  .tabla-productos, .tabla-productos tbody, .tabla-productos tr, .tabla-productos td{
    display: revert !important;
  }
  .tabla-productos thead{ display: table-header-group !important; }
  .tabla-productos tbody td::before{ content: none !important; }
  .tabla-productos tbody td{
    display: table-cell !important;
    border-bottom:1px solid var(--gris-100) !important;
  }
  .tabla-productos thead th{
    background: var(--azul-900) !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  .topbar-actions .btn-topbar span{ display:inline !important; }
}

/* ============================================================
   MODO OSCURO
   Se activa poniendo data-tema="oscuro" en <html> (lo hace tema.js).
   Redefine las variables de color de más arriba, y además ajusta
   explícitamente los componentes que usan blanco/negro fijo en vez
   de variable (tarjetas, tablas, formularios, modales, toasts).
   ============================================================ */
html[data-tema="oscuro"]{
  --gris-50:#0f1420;
  --gris-100:#18202f;
  --gris-200:#2a3547;
  --gris-300:#3d4a5f;
  --gris-500:#94a3b8;
  --gris-700:#cbd5e1;
  --gris-900:#e8edf5;
  --blanco:#1a2436;
}

html[data-tema="oscuro"] body{ background: var(--gris-50); }

html[data-tema="oscuro"] .info-card,
html[data-tema="oscuro"] .config-card,
html[data-tema="oscuro"] .wizard-card,
html[data-tema="oscuro"] .toast-item,
html[data-tema="oscuro"] .totales-box,
html[data-tema="oscuro"] .resumen-config,
html[data-tema="oscuro"] .checklist-proceso,
html[data-tema="oscuro"] .wizard-check-box,
html[data-tema="oscuro"] .admin-resumen-caja{
  background: #1a2436;
  border-color: var(--gris-200);
}

html[data-tema="oscuro"] .info-title,
html[data-tema="oscuro"] .info-card-body{
  background: transparent;
}
html[data-tema="oscuro"] .info-title{
  background: #16233d;
  color: #cfe0ff;
}

html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] .form-select{
  background-color: #111a2e;
  border-color: var(--gris-200);
  color: var(--gris-900);
}
html[data-tema="oscuro"] .form-control::placeholder{ color: var(--gris-500); }
html[data-tema="oscuro"] .form-control:focus,
html[data-tema="oscuro"] .form-select:focus{
  background-color: #111a2e;
  color: var(--gris-900);
}
html[data-tema="oscuro"] .form-control:disabled,
html[data-tema="oscuro"] .form-select:disabled{
  background-color: #0c1220;
  color: var(--gris-500);
}

html[data-tema="oscuro"] .table{ color: var(--gris-900); }
html[data-tema="oscuro"] .tabla-productos thead th{ background: #16233d; color: #cfe0ff; }
html[data-tema="oscuro"] .tabla-productos tbody td{ background: #1a2436; color: var(--gris-900); border-bottom-color: var(--gris-200); }
html[data-tema="oscuro"] .tabla-productos tbody tr:nth-child(even) td{ background: #16233d55; }
html[data-tema="oscuro"] .tabla-productos tbody tr:hover td{ background: #223052; }
html[data-tema="oscuro"] .table > :not(caption) > * > *{
  border-bottom-color: var(--gris-200);
  color: var(--gris-900);
}

html[data-tema="oscuro"] .modal-content{
  background: #1a2436;
  color: var(--gris-900);
}
html[data-tema="oscuro"] .modal-header,
html[data-tema="oscuro"] .modal-footer{
  border-color: var(--gris-200);
}
html[data-tema="oscuro"] .btn-close{ filter: invert(1) grayscale(100%); }

html[data-tema="oscuro"] hr{ border-color: var(--gris-200); opacity: .5; }
html[data-tema="oscuro"] .text-muted{ color: var(--gris-500) !important; }

html[data-tema="oscuro"] .btn-outline-secondary{
  color: var(--gris-700);
  border-color: var(--gris-300);
}
html[data-tema="oscuro"] .btn-outline-secondary:hover{
  background: var(--gris-200);
  color: var(--gris-900);
}

/* Textos que usaban azul oscuro (pensado para fondo blanco) y quedaban
   invisibles sobre las tarjetas oscuras. No se redefine la variable
   --azul-900/800 en sí (esas también se usan como FONDO en la barra
   superior, que debe seguir oscura) — se corrige selector por selector. */
html[data-tema="oscuro"] .doc-title,
html[data-tema="oscuro"] .info-title,
html[data-tema="oscuro"] .prod-total,
html[data-tema="oscuro"] .modal-title,
html[data-tema="oscuro"] .historial-info strong,
html[data-tema="oscuro"] .hero h1,
html[data-tema="oscuro"] .section-title{
  color: #cfe0ff;
}
html[data-tema="oscuro"] .meta-input{
  background: #111a2e;
  color: #cfe0ff;
  border-color: var(--gris-200);
}
/* Insignias de rol/estado que usaban --gris-600 (sin variante oscura
   definida) y quedaban con texto oscuro sobre fondo oscuro. */
html[data-tema="oscuro"] .badge-rol-usuario{
  background: var(--gris-200);
  color: var(--gris-700);
}

/* Dropdown de resultados al buscar un cliente ya registrado, en el Cotizador. */
.cliente-resultados{
  position:absolute;
  top:100%; left:0; right:0;
  z-index:20;
  background:#fff;
  border:1px solid var(--gris-200);
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(15,35,70,.15);
  margin-top:4px;
  max-height:260px;
  overflow-y:auto;
}
.cliente-resultado-item{
  padding:9px 14px;
  cursor:pointer;
  border-bottom:1px solid var(--gris-100);
}
.cliente-resultado-item:last-child{ border-bottom:none; }
.cliente-resultado-item:hover{ background: var(--azul-50); }
.cliente-resultado-nombre{ font-weight:600; color: var(--azul-900); font-size:.9rem; }
.cliente-resultado-detalle{ font-size:.78rem; color: var(--gris-500); }
html[data-tema="oscuro"] .cliente-resultados{ background:#1a2436; border-color: var(--gris-200); }
html[data-tema="oscuro"] .cliente-resultado-item{ border-bottom-color: var(--gris-200); }
html[data-tema="oscuro"] .cliente-resultado-item:hover{ background:#16233d; }
html[data-tema="oscuro"] .cliente-resultado-nombre{ color:#cfe0ff; }

/* Botones de ícono dentro de tablas (ver, editar, eliminar, verificar
   estado, etc.) — en todas las tablas del sistema. Nunca tuvieron un
   color propio, así que usaban el negro por defecto de Bootstrap,
   invisible sobre el fondo oscuro de las celdas. */
html[data-tema="oscuro"] .tabla-productos td .btn{
  color: var(--gris-700);
}
html[data-tema="oscuro"] .tabla-productos td .btn:hover:not(:disabled){
  color: var(--gris-900);
  background: var(--gris-200);
}
html[data-tema="oscuro"] .tabla-productos td .btn:disabled{
  color: var(--gris-500);
  opacity: .5;
}

/* Botón de alternar tema (lo inyecta tema.js) */
.btn-tema{
  background: rgba(255,255,255,.12);
  color:#fff;
  border:none;
  width:38px; height:38px;
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  cursor:pointer;
  transition: background .15s ease;
}
.btn-tema:hover{ background: rgba(255,255,255,.22); }
/* Dentro del topbar claro (rediseño), el botón blanco-sobre-blanco es
   invisible — se le da contraste propio en vez de heredar el estilo
   pensado para el topbar oscuro anterior. */
.topbar .btn-tema{ background: var(--gris-100); color: var(--gris-700); border:1px solid var(--gris-200); }
.topbar .btn-tema:hover{ background: var(--gris-200); color: var(--gris-900); }