/* =========================================================
   FERPA COTIZADOR — styles.css
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy-950:#071220; --navy-900:#0E2038; --navy-800:#14304F; --navy-700:#1D4066;
  --slate-600:#56677A; --slate-400:#8B99A8; --slate-200:#E2E8F0;
  --line:#E2E6EA; --fog:#F4F6F8; --paper:#FBFBFC; --white:#FFFFFF;
  --safety:#D33D0C; --safety-dark:#B93209; --safety-tint:#FDECE4;
  --ok:#1F6B3D; --ok-bg:#E4F5EA; --danger:#B32E2E; --danger-bg:#FBEAEA;
  --f-sans:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius-sm:6px; --radius:9px; --radius-lg:14px; --radius-xl:20px;
  --shadow-card:0 2px 8px rgba(14,32,56,.04), 0 12px 28px -6px rgba(14,32,56,.07);
  --shadow-pop:0 24px 52px -12px rgba(10,22,38,.34), 0 0 0 1px rgba(255,255,255,.5) inset;
  --shadow-glow:0 0 24px rgba(211,61,12,.22);
  --glass-bg:rgba(255,255,255,0.88);
  --glass-border:rgba(255,255,255,0.65);
}
*,*::before,*::after{ box-sizing:border-box; }

/* =========================================================
   SCROLLBAR ULTRA-MODERNO & ELEGANTE
   ========================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 32, 56, 0.22) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(14, 32, 56, 0.18);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(211, 61, 12, 0.55);
}

body{
  margin:0;
  font-family:var(--f-sans);
  color:var(--navy-900);
  background-color:#F8FAFC;
  background-image:
    radial-gradient(at 0% 0%, rgba(226, 232, 240, 0.6) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(254, 237, 222, 0.5) 0px, transparent 40%),
    radial-gradient(at 100% 100%, rgba(226, 232, 240, 0.6) 0px, transparent 50%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:.92rem; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.018em; }
a{ color:inherit; }
:focus-visible{ outline:2.5px solid var(--safety); outline-offset:2px; }

.tag-mark{ display:inline-block; width:7px; height:7px; background:var(--safety); transform:rotate(45deg); flex:none; border-radius:1px; }
.brand-mini{ font-weight:800; font-size:1.08rem; letter-spacing:-0.02em; color:var(--navy-900); display:flex; flex-direction:column; }
.brand-mini small{ font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--slate-600); text-transform:uppercase; }

/* ---------- Botones con micro-interacciones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1.5px solid transparent; border-radius:var(--radius); padding:10px 18px; font-weight:700; font-size:.87rem; transition:transform .18s cubic-bezier(0.16,1,0.3,1), box-shadow .18s cubic-bezier(0.16,1,0.3,1), background .18s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-1.5px); }
.btn:active{ transform:translateY(0.5px) scale(0.985); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn-primary{ background:linear-gradient(135deg, #E04817 0%, #B93209 100%); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(211,61,12,.32); }
.btn-primary:hover{ background:linear-gradient(135deg, #F05524 0%, #C8370B 100%); box-shadow:0 8px 22px rgba(211,61,12,.44); }
.btn-outline{ background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--navy-900); border-color:var(--line); box-shadow:0 1px 3px rgba(14,32,56,.04); }
.btn-outline:hover{ background:#fff; border-color:var(--slate-400); box-shadow:0 4px 14px rgba(14,32,56,.08); }
.btn-danger{ background:var(--danger); color:#fff; border-color:var(--danger); box-shadow:0 3px 10px rgba(179,46,46,.25); }
.btn-danger:hover{ background:#932424; box-shadow:0 6px 16px rgba(179,46,46,.35); }
.btn-sm{ padding:7px 13px; font-size:.8rem; border-radius:var(--radius-sm); }
.btn-block{ width:100%; }

/* ---------- Login / boot con Liquid Glass ---------- */
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 15% 15%, #18375b 0%, #071220 60%), #071220;
  padding:24px 18px;
  position:relative;
  overflow:hidden;
}
.login-screen::before{
  content:'';
  position:absolute;
  width:480px; height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(211,61,12,0.24) 0%, rgba(211,61,12,0) 70%);
  top:-120px; right:-100px;
  filter:blur(50px);
  pointer-events:none;
  animation:liquidOrbFloat1 13s ease-in-out infinite alternate;
}
.login-screen::after{
  content:'';
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(29,64,102,0.45) 0%, rgba(29,64,102,0) 70%);
  bottom:-140px; left:-120px;
  filter:blur(55px);
  pointer-events:none;
  animation:liquidOrbFloat2 15s ease-in-out infinite alternate;
}
@keyframes liquidOrbFloat1 {
  0% { transform:translate(0, 0) scale(1); }
  100% { transform:translate(-45px, 50px) scale(1.16); }
}
@keyframes liquidOrbFloat2 {
  0% { transform:translate(0, 0) scale(1); }
  100% { transform:translate(55px, -45px) scale(1.14); }
}
.login-card{
  position:relative;
  z-index:2;
  background:rgba(255, 255, 255, 0.88);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255, 255, 255, 0.7);
  border-radius:var(--radius-xl);
  padding:40px 34px;
  width:100%;
  max-width:400px;
  box-shadow:0 30px 65px -15px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(255, 255, 255, 0.9) inset;
  text-align:center;
  animation:cardSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card .brand-mini{
  font-size:1.24rem;
  letter-spacing:-0.02em;
  font-weight:800;
  color:var(--navy-900);
}
.login-card .sub{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-600); margin:6px 0 20px; font-weight:600; }
.login-card .field{ text-align:left; }
.login-card .field input{
  background:rgba(245, 247, 250, 0.82);
  border:1.5px solid rgba(226, 232, 240, 0.95);
  border-radius:var(--radius);
  padding:11px 13px;
  font-size:.93rem;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-card .field input:focus{
  background:#ffffff;
  border-color:var(--safety);
  box-shadow:0 0 0 4px rgba(211,61,12,0.16);
  outline:none;
}
.login-error{ display:none; background:var(--danger-bg); color:var(--danger); font-size:.82rem; font-weight:600; padding:10px 14px; border-radius:var(--radius); margin-bottom:14px; border:1px solid rgba(179,46,46,.2); }
.login-error.is-visible{ display:block; }
.login-hint{ font-size:.78rem; color:var(--slate-600); margin-top:16px; line-height:1.5; }
.login-hint a{ color:var(--navy-800); font-weight:600; text-decoration:none; transition:color .15s; }
.login-hint a:hover{ color:var(--safety); text-decoration:underline; }
.boot-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy-900); color:#B9C4D0; }

/* ---------- Shell & Sidebar ---------- */
.cot-shell{ display:none; min-height:100vh; }
.cot-shell.is-visible{ display:flex; }
.cot-sidebar{ width:224px; flex:none; background:linear-gradient(180deg, #071220 0%, #0E2038 100%); color:#fff; display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh; border-right:1px solid rgba(255,255,255,.07); }
.cot-sidebar .brand-mini{ color:#fff; margin-bottom:22px; padding:0 8px; font-size:1.15rem; }
.cot-sidebar .brand-mini small{ color:#8FA0B3; font-weight:700; }
.cot-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.cot-nav button{ text-align:left; background:transparent; border:none; color:#C6CFD9; padding:10px 12px; border-radius:var(--radius); font-weight:600; font-size:.87rem; transition:transform .16s cubic-bezier(0.16,1,0.3,1), background .16s ease, color .16s ease; }
.cot-nav button:hover{ background:rgba(255,255,255,.08); color:#fff; transform:translateX(3px); }
.cot-nav button.is-active{ background:linear-gradient(135deg, #D33D0C 0%, #B93209 100%) !important; color:#fff !important; box-shadow:0 4px 14px rgba(211,61,12,.4); font-weight:700; transform:translateX(0) !important; }
.cot-sidebar-foot{ display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.cot-sidebar-foot a{ font-size:.8rem; color:#B9C4D0; text-decoration:none; transition:color .15s; }
.cot-sidebar-foot a:hover{ color:#fff; }
.cot-sidebar-foot button{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:var(--radius); padding:9px; font-size:.8rem; font-weight:600; transition:all .18s ease; }
.cot-sidebar-foot button:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-1px); }

.cot-main{ flex:1; padding:28px 34px 60px; max-width:1200px; }
.cot-view{ display:none; }
.cot-view.is-active{ display:block; animation:viewSlideFade 0.28s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes viewSlideFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cot-topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.cot-topbar h1{ font-size:1.55rem; letter-spacing:-0.022em; font-weight:800; color:var(--navy-900); }
.cot-topbar p{ color:var(--slate-600); font-size:.88rem; margin:4px 0 0; }

/* ---------- Cards / formularios ---------- */
.cot-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; margin-bottom:18px; }
.card-title{ font-size:1rem; margin-bottom:16px; }
.card-title-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.modal-section-title{ font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-600); margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.modal-section-title:first-of-type{ border-top:none; padding-top:0; margin-top:6px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.78rem; font-weight:700; color:var(--navy-800); }
.field input, .field select, .field textarea{
  border:1.5px solid rgba(226, 232, 240, 0.95);
  border-radius:10px;
  padding:10px 13px;
  background:rgba(248, 250, 252, 0.9);
  color:var(--navy-900);
  width:100%;
  box-shadow:inset 0 1px 2px rgba(14,32,56,.02);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--safety);
  background:#fff;
  box-shadow:0 0 0 3.5px rgba(211,61,12,.13);
}
.field textarea{ resize:vertical; }
.field-hint{ font-size:.72rem; color:var(--slate-600); }
.field input:disabled{ color:var(--slate-600); background:var(--fog); }
.hint{ font-size:.82rem; color:var(--slate-600); margin:-8px 0 14px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.field.full{ grid-column:1/-1; }
@media (max-width:760px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

.check-item{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--navy-800); }
.check-item input{ width:16px; height:16px; accent-color:var(--safety); }

/* ---------- Autocomplete con Dark Liquid Glass (Obsidian Glass) ---------- */
.autocomplete-list{
  display:none;
  position:absolute;
  top:100%; left:0; right:0;
  background:rgba(8, 20, 36, 0.94);
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  border:1px solid rgba(255, 255, 255, 0.15);
  border-radius:14px;
  box-shadow:0 20px 48px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  max-height:280px;
  overflow-y:auto;
  z-index:9999 !important;
  margin-top:6px;
  padding:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.25) transparent;
}
.autocomplete-list.is-visible{
  display:block !important;
  animation:dropdownGlassPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cot-card:has(.autocomplete-list.is-visible),
.cot-card.has-open-menu,
.field:has(.autocomplete-list.is-visible),
.field.has-open-menu,
.modal-card:has(.autocomplete-list.is-visible),
.modal-card.has-open-menu{
  z-index:1000 !important;
  position:relative !important;
}
@keyframes dropdownGlassPop{
  from{ opacity:0; transform:translateY(-6px) scale(0.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.autocomplete-item{
  padding:11px 14px;
  cursor:pointer;
  border-radius:10px;
  border-bottom:1px solid rgba(255, 255, 255, 0.06);
  transition:all .16s cubic-bezier(0.16, 1, 0.3, 1);
  position:relative;
}
.autocomplete-item:last-child{ border-bottom:none; }
.autocomplete-item strong{
  display:block;
  font-size:.89rem;
  font-weight:700;
  color:#FFFFFF;
  letter-spacing:-0.01em;
}
.autocomplete-item span{
  font-size:.76rem;
  color:#94A3B8;
  display:block;
  margin-top:2px;
}
.autocomplete-item:hover, .autocomplete-item.is-highlighted{
  background:linear-gradient(90deg, rgba(224, 72, 23, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%);
  transform:translateX(3px);
  border-left:3px solid var(--safety);
}
.autocomplete-item:hover strong, .autocomplete-item.is-highlighted strong{ color:#FFFFFF; }
.autocomplete-item:hover span, .autocomplete-item.is-highlighted span{ color:#CBD5E1; }
.autocomplete-empty{
  padding:18px 14px;
  font-size:.84rem;
  color:#94A3B8;
  text-align:center;
}

/* ---------- Tabla de ítems dinámica ---------- */
.items-table-wrap{ overflow-x:auto; margin-bottom:14px; }
.items-table{ width:100%; border-collapse:collapse; min-width:920px; }
.items-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-600); padding:10px 8px; border-bottom:2px solid rgba(226, 230, 234, 0.9); }
.items-table td{ padding:7px 6px; border-bottom:1px solid rgba(241, 245, 249, 0.9); vertical-align:middle; }
.items-table input, .items-table select{
  border:1.5px solid rgba(226, 232, 240, 0.95);
  border-radius:8px;
  padding:8px 10px;
  font-size:.86rem;
  width:100%;
  background:rgba(248, 250, 252, 0.9);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.items-table input:focus, .items-table select:focus{
  outline:none;
  border-color:var(--safety);
  background:#fff;
  box-shadow:0 0 0 3px rgba(211,61,12,.12);
}
.col-codigo{ width:100px; } .col-cant{ width:70px; } .col-unid{ width:78px; }
.col-precio{ width:110px; } .col-desc-pct{ width:80px; } .col-iva{ width:80px; text-align:center; }
.col-total{ width:110px; } .col-acc{ width:36px; }
.items-table .row-total{ font-weight:700; text-align:right; padding-right:8px; white-space:nowrap; }
.items-table .row-iva{ text-align:center; }
.items-table .row-iva input{ width:16px; height:16px; accent-color:var(--safety); }
.row-remove{ background:transparent; border:none; color:var(--danger); font-size:1.1rem; width:28px; height:28px; border-radius:5px; }
.row-remove:hover{ background:var(--danger-bg); }
.empty-items-note{ text-align:center; color:var(--slate-600); font-size:.84rem; padding:20px; border:1px dashed var(--line); border-radius:var(--radius); margin:0 0 14px; }

.desc-global-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); }
.desc-global-row label{ font-size:.84rem; font-weight:700; color:var(--navy-800); }
.desc-global-row select{ border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; }
.desc-global-row input{ border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; }

/* ---------- Totales con Liquid Glass ---------- */
.totals-panel{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; }
@media (max-width:820px){ .totals-panel{ grid-template-columns:1fr; } }
.son-preview{ font-size:.82rem; font-style:italic; font-weight:700; color:var(--navy-800); margin:10px 0 0; }
.totals-right{ display:flex; flex-direction:column; gap:4px; align-self:start; }
.totals-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  background:rgba(241, 245, 249, 0.7);
  border:1px solid rgba(226, 230, 234, 0.7);
  border-radius:10px;
  font-size:.87rem;
}
.totals-row .lbl{ color:var(--slate-600); font-weight:600; }
.totals-row .val{ font-weight:750; color:var(--navy-900); font-variant-numeric:tabular-nums; }
.totals-row.big{
  background:linear-gradient(135deg, #E04817 0%, #B93209 100%);
  color:#fff;
  padding:16px 18px;
  border-radius:12px;
  margin-top:6px;
  border:none;
  box-shadow:0 6px 20px rgba(211,61,12,0.35);
}
.totals-row.big .lbl{ color:rgba(255,255,255,0.9); font-size:.92rem; font-weight:700; }
.totals-row.big .val{ font-size:1.38rem; font-weight:800; }

.form-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- Tablas admin genéricas (historial, clientes, productos) ---------- */
.admin-table-wrap{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 4px 20px -4px rgba(14,32,56,.04), 0 0 0 1px rgba(226,230,234,0.65);
  border-radius:16px;
  overflow-x:auto;
}
.admin-table{ width:100%; border-collapse:collapse; min-width:640px; }
.admin-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--slate-600); padding:13px 16px;
  border-bottom:1px solid rgba(226, 230, 234, 0.85);
  background:rgba(248, 250, 252, 0.85);
  font-weight:750;
}
.admin-table td{
  padding:13px 16px;
  border-bottom:1px solid rgba(241, 245, 249, 0.85);
  font-size:.88rem;
  vertical-align:middle;
}
.admin-table tbody tr{ transition:background .15s ease; }
.admin-table tbody tr:hover{ background:rgba(241, 245, 249, 0.75); }
.admin-table tbody tr:last-child td{ border-bottom:none; }
@media (max-width:640px){
  .admin-table th, .admin-table td{ padding:9px 10px; font-size:.82rem; }
  .admin-table-wrap::before{ content:"→ Desliza para ver más"; display:block; padding:6px 10px; font-size:.72rem; color:var(--slate-600); background:var(--fog); border-bottom:1px solid var(--line); }
}
.empty-row td{ text-align:center; color:var(--slate-600); padding:34px; }
.search-box{ width:100%; border:1.5px solid rgba(226, 232, 240, 0.95); border-radius:10px; padding:10px 14px; background:rgba(248, 250, 252, 0.9); transition:border-color .18s; }
.search-box:focus{ border-color:var(--safety); outline:none; background:#fff; box-shadow:0 0 0 3.5px rgba(211,61,12,.13); }
.filters-row{ display:flex; flex-wrap:wrap; gap:10px; }
.filters-row select, .filters-row input{ border:1.5px solid rgba(226, 232, 240, 0.95); border-radius:10px; padding:9px 13px; background:rgba(248, 250, 252, 0.9); }
.filters-row select:focus, .filters-row input:focus{ border-color:var(--safety); outline:none; background:#fff; }
.filters-row input[type="text"]{ flex:1; min-width:180px; }

.icon-btn{
  background:rgba(255, 255, 255, 0.9);
  border:1px solid rgba(226, 230, 234, 0.95);
  border-radius:8px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--slate-600);
  box-shadow:0 1px 2px rgba(14,32,56,.04);
  transition:all .16s cubic-bezier(0.16, 1, 0.3, 1);
}
.icon-btn svg{ display:block; }
.icon-btn:hover{
  background:#fff;
  color:var(--navy-900);
  border-color:var(--slate-400);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(14,32,56,.08);
}
.icon-btn.danger:hover{
  background:var(--danger-bg);
  color:var(--danger);
  border-color:rgba(179,46,46,0.3);
}
.row-actions{ display:flex; gap:6px; }
.loading-note{ text-align:center; padding:34px 16px; color:var(--slate-600); font-size:.88rem; grid-column:1/-1; }
.col-desc{ min-width:220px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:100px;
  font-size:.72rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(14,32,56,.03);
  white-space:nowrap;
}
.badge-borrador{ background:rgba(241, 245, 249, 0.9); color:#475569; border:1px solid rgba(203, 213, 225, 0.6); }
.badge-emitida, .badge-enviada{ background:#FEE9D6; color:#B4530A; border:1px solid rgba(251, 191, 36, 0.4); }
.badge-esperando_respuesta{ background:#FEF6D8; color:#8A6D00; border:1px solid rgba(250, 204, 21, 0.4); }
.badge-en_proceso{ background:#E3EEFB; color:#1D4ED8; border:1px solid rgba(125, 211, 252, 0.5); }
.badge-aprobada, .badge-aceptada{ background:var(--ok-bg); color:var(--ok); border:1px solid rgba(134, 239, 172, 0.5); }
.badge-rechazada{ background:#E7E7EA; color:#33343A; border:1px solid rgba(203, 213, 225, 0.5); }
.badge-vencida{ background:var(--danger-bg); color:var(--danger); border:1px solid rgba(252, 165, 165, 0.5); }
.badge-tipo-boleta{ background:#EAE3FB; color:#5B21B6; border:1px solid rgba(196, 181, 253, 0.5); }
.badge-tipo-cotizacion{ background:rgba(241, 245, 249, 0.9); color:#475569; border:1px solid rgba(203, 213, 225, 0.6); }
.nav-badge{ display:inline-block; min-width:18px; padding:1px 6px; margin-left:6px; border-radius:100px; background:var(--danger); color:#fff; font-size:.68rem; font-weight:700; }
.stock-bajo{ color:var(--danger); font-weight:700; }

/* ---- Dashboard ---- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.kpi-card.kpi-warn{ border-color:#F3C6A6; background:#FFF8F1; }
.kpi-label{ font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--slate-600); }
.kpi-value{ font-size:1.5rem; font-weight:800; color:var(--navy-900); }
.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media (max-width:900px){ .charts-grid{ grid-template-columns:1fr; } }
.alertas-list{ display:flex; flex-direction:column; gap:8px; }
.alerta-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--fog); border-radius:var(--radius); font-size:.85rem; }
.alerta-row .btn{ flex:none; }
.loading-note{ color:var(--slate-600); font-size:.85rem; }
.error-state{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px; background:var(--danger-bg); border-radius:var(--radius); color:var(--danger); font-size:.85rem; }

/* ---- Registro / login ---- */
.register-error, .register-ok{ display:none; font-size:.82rem; font-weight:600; padding:9px 12px; border-radius:var(--radius); margin-bottom:14px; }
.register-error.is-visible{ display:block; background:var(--danger-bg); color:var(--danger); }
.register-ok.is-visible{ display:block; background:var(--ok-bg); color:var(--ok); }
.login-card .btn-block{ width:100%; }

/* ---- Modal grande (vista previa PDF, fichas) ---- */
.modal-card-lg{ max-width:760px; width:94%; }

/* ---- Tabla compacta de ítems (orden de compra) ---- */
.oc-items-wrap{ overflow-x:auto; }
.oc-items-table{ width:100%; min-width:0; border-collapse:collapse; }
.oc-items-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.02em; color:var(--slate-600); padding:6px; }
.oc-items-table td{ padding:5px 6px; vertical-align:middle; }
.oc-items-table input{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:5px; padding:7px 8px; font-size:.85rem; background:var(--paper); }
.oc-items-table input:focus{ outline:none; border-color:var(--safety); background:#fff; }
.pdf-preview-body{ background:#525659; border-radius:var(--radius); overflow:hidden; height:70vh; margin:10px 0; }
.pdf-preview-body iframe{ width:100%; height:100%; border:0; }
.ficha-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:14px 0; }
.ficha-kpis .kpi-card{ padding:12px 14px; }

/* ---- SII placeholder ---- */
.sii-placeholder{ text-align:left; }
.sii-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:16px; }
.sii-item{ background:var(--fog); border:1px dashed var(--line); border-radius:var(--radius); padding:14px; text-align:center; font-weight:600; color:var(--slate-600); }


/* ---------- Empresas grid con Liquid Glass ---------- */
.empresas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.empresa-card{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(226, 230, 234, 0.9);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 4px 18px -2px rgba(14,32,56,.04);
  transition:transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.empresa-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px -6px rgba(14,32,56,.1);
}
.empresa-card .logo-wrap{ height:60px; display:flex; align-items:center; }
.empresa-card .logo-wrap img{ max-height:100%; max-width:100%; object-fit:contain; }
.empresa-card h4{ font-size:.98rem; }
.empresa-card p{ margin:0; font-size:.8rem; color:var(--slate-600); }
.empresa-card .folio-chip{ font-size:.72rem; font-weight:700; color:var(--safety); }

/* ---------- Catálogo con Dark Liquid Glass ---------- */
.catalogo-lista{
  max-height:380px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  padding:4px;
}
.catalogo-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px;
  background:rgba(10, 24, 44, 0.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius:12px;
  cursor:pointer;
  transition:all .18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.2);
}
.catalogo-item:hover{
  background:linear-gradient(90deg, rgba(224, 72, 23, 0.28) 0%, rgba(14, 32, 56, 0.96) 100%);
  border-color:rgba(224, 72, 23, 0.6);
  transform:translateX(4px);
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.35);
}
.catalogo-item strong{ display:block; font-size:.9rem; font-weight:700; color:#FFFFFF; }
.catalogo-item span{ font-size:.76rem; color:#94A3B8; margin-top:2px; display:block; }
.catalogo-item .price{
  font-weight:800; font-size:.92rem; white-space:nowrap; margin-left:12px;
  color:#FF9F68; font-variant-numeric:tabular-nums;
  background:rgba(255, 255, 255, 0.08);
  padding:5px 11px; border-radius:8px;
  border:1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Imagen (logo) ---------- */
.image-drop{ display:flex; gap:14px; align-items:center; }
.thumb{ width:70px; height:70px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--fog); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.thumb-wide{ width:140px; }
.thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.drop-actions{ flex:1; display:flex; flex-direction:column; gap:6px; }
.drop-actions small{ color:var(--slate-600); font-size:.74rem; }

/* ---------- Modales con Liquid Glass ---------- */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(7, 18, 32, 0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:300;
  align-items:flex-start;
  justify-content:center;
  padding:40px 16px;
  overflow-y:auto;
}
.modal-overlay.is-visible{ display:flex; }
.modal-card{
  background:rgba(255, 255, 255, 0.96);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255, 255, 255, 0.95);
  border-radius:20px;
  width:100%;
  max-width:540px;
  padding:28px;
  box-shadow:0 24px 56px -12px rgba(7, 18, 32, 0.35), 0 0 0 1px rgba(226, 230, 234, 0.6);
  animation:modalPop .24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.modal-card-lg{ max-width:760px; }
@keyframes modalPop{
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-head h3{ font-size:1.1rem; }
.modal-close{ background:transparent; border:none; font-size:1.1rem; color:var(--slate-600); width:30px; height:30px; border-radius:5px; }
.modal-close:hover{ background:var(--fog); }
.modal-actions{ display:flex; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px;
  transform:translate(-50%,20px);
  background:rgba(14, 32, 56, 0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255, 255, 255, 0.15);
  color:#fff;
  padding:14px 22px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 32px rgba(7, 18, 32, 0.35);
  opacity:0; pointer-events:none;
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:400; max-width:90vw;
}
.toast.is-visible{ opacity:1; transform:translate(-50%,0); }
.toast .tag-mark{ background:var(--ok); }
.toast.is-error .tag-mark{ background:var(--danger); }

@media (max-width:900px){
  .cot-shell.is-visible{ flex-direction:column; }
  .cot-sidebar{ width:100%; height:auto; position:static; flex-wrap:wrap; align-items:center; padding:14px 16px; }
  .cot-sidebar .brand-mini{ margin-bottom:0; margin-right:14px; }
  .mobile-nav-toggle{ display:flex; }
  .cot-nav{ display:none; width:100%; order:10; flex-direction:column; padding-top:14px; gap:2px; }
  .cot-nav.is-open{ display:flex; }
  .cot-sidebar-foot{ display:none; width:100%; order:11; flex-direction:row; padding-top:10px; margin-top:10px; border-top:1px solid rgba(255,255,255,.12); }
  .cot-sidebar-foot.is-open{ display:flex; }
  .cot-main{ padding:20px 16px 50px; }
}

/* ---- Menú hamburguesa (mobile) ---- */
.mobile-nav-toggle{ display:none; margin-left:auto; width:38px; height:38px; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border:none; border-radius:8px; color:#fff; font-size:1.15rem; }
.mobile-nav-toggle:hover{ background:rgba(255,255,255,.16); }

/* ---- Avatares ---- */
.nav-avatar-wrap{ display:inline-flex; margin-right:8px; vertical-align:middle; }
.nav-avatar{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.nav-avatar-initial{ display:flex; align-items:center; justify-content:center; background:var(--safety); color:#fff; font-size:.68rem; font-weight:800; }
.avatar-sm{ width:26px; height:26px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:7px; }
.avatar-sm-initial{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--navy-700); color:#fff; font-size:.68rem; font-weight:800; margin-right:7px; vertical-align:middle; }
.avatar-lg{ width:88px; height:88px; border-radius:50%; object-fit:cover; }
.avatar-lg-initial{ display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:var(--navy-700); color:#fff; font-size:1.8rem; font-weight:800; }
.creado-por{ display:inline-flex; align-items:center; font-size:.82rem; white-space:nowrap; }
.perfil-header{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.avatar-upload-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; }
.avatar-upload-btn{ font-size:.78rem; font-weight:700; color:var(--safety); cursor:pointer; text-decoration:underline; }
.avatar-remove-btn{ font-size:.78rem; font-weight:700; color:var(--slate-600); background:none; border:none; cursor:pointer; text-decoration:underline; padding:0; }
@media (max-width:640px){ .perfil-header{ flex-direction:column; align-items:center; text-align:center; } }