/* =========================================================
   FERPA — ferpa-ui.css
   Capa que se carga DESPUÉS de styles.css. No reemplaza nada:
   ajusta y agrega. Así ninguna regla existente se pierde y se
   puede quitar este archivo para volver atrás.

   Cubre: jerarquía visual, navegación móvil, tablas adaptables,
   iconografía SVG, estados de formulario y notificaciones.
   ========================================================= */

:root{
  /* Escala tipográfica y de espaciado consistentes en toda la app. */
  --fs-xs: .74rem;
  --fs-sm: .82rem;
  --fs-md: .92rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.35rem;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Sombras sutiles: profundidad sin decoración. */
  --shadow-sm: 0 1px 2px rgba(14,32,56,.05);
  --shadow-md: 0 2px 8px rgba(14,32,56,.07);
  --shadow-lg: 0 8px 28px rgba(14,32,56,.12);

  --nav-mobile-h: 62px;
  --sidebar-w: 220px;   /* debe coincidir con .cot-sidebar de styles.css */
}

/* =========================================================
   SCROLLBARS DE ALTA DEFINICIÓN PARA TODOS LOS PANELES
   ========================================================= */
.cot-sidebar, .cot-nav,
.modal-overlay, .modal-card, .modal-card-lg,
.admin-table-wrap, .items-table-wrap, .oc-items-wrap,
.kanban-scroll, .catalogo-lista,
.global-search-results, .autocomplete-list,
.ficha-kpis, .pdf-preview-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 32, 56, 0.2) transparent;
}
.cot-sidebar::-webkit-scrollbar, .cot-nav::-webkit-scrollbar {
  width: 5px; height: 5px;
}
.cot-sidebar::-webkit-scrollbar-track, .cot-nav::-webkit-scrollbar-track {
  background: transparent;
}
.cot-sidebar::-webkit-scrollbar-thumb, .cot-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.cot-sidebar::-webkit-scrollbar-thumb:hover, .cot-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

.admin-table-wrap::-webkit-scrollbar,
.items-table-wrap::-webkit-scrollbar,
.oc-items-wrap::-webkit-scrollbar,
.kanban-scroll::-webkit-scrollbar,
.modal-overlay::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
.catalogo-lista::-webkit-scrollbar,
.global-search-results::-webkit-scrollbar,
.autocomplete-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.admin-table-wrap::-webkit-scrollbar-track,
.items-table-wrap::-webkit-scrollbar-track,
.oc-items-wrap::-webkit-scrollbar-track,
.kanban-scroll::-webkit-scrollbar-track,
.modal-overlay::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track,
.catalogo-lista::-webkit-scrollbar-track,
.global-search-results::-webkit-scrollbar-track,
.autocomplete-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 999px;
}
.admin-table-wrap::-webkit-scrollbar-thumb,
.items-table-wrap::-webkit-scrollbar-thumb,
.oc-items-wrap::-webkit-scrollbar-thumb,
.kanban-scroll::-webkit-scrollbar-thumb,
.modal-overlay::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(14, 32, 56, 0.2);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.catalogo-lista::-webkit-scrollbar-thumb,
.global-search-results::-webkit-scrollbar-thumb,
.autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.admin-table-wrap::-webkit-scrollbar-thumb:hover,
.items-table-wrap::-webkit-scrollbar-thumb:hover,
.oc-items-wrap::-webkit-scrollbar-thumb:hover,
.kanban-scroll::-webkit-scrollbar-thumb:hover,
.modal-overlay::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover,
.catalogo-lista::-webkit-scrollbar-thumb:hover,
.global-search-results::-webkit-scrollbar-thumb:hover,
.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: var(--safety);
}

/* =========================================================
   1. JERARQUÍA, LIQUID GLASS Y MOVIMIENTO
   ========================================================= */
.cot-topbar h1{ font-size: 1.55rem; letter-spacing: -.022em; line-height: 1.2; font-weight: 800; color: var(--navy-900); }
.cot-topbar p{ font-size: var(--fs-sm); margin-top: 4px; color: var(--slate-600); }

.cot-card{
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 4px 24px -4px rgba(14, 32, 56, 0.05),
              0 0 0 1px rgba(226, 230, 234, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: box-shadow .22s cubic-bezier(0.16, 1, 0.3, 1), transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-title{
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-md); letter-spacing: -.01em; font-weight: 700;
  color: var(--navy-900);
}

/* KPI Cards con Liquid Glass y micro-interacciones */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card{
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 230, 234, 0.9);
  border-radius: var(--radius-lg, 14px);
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(14, 32, 56, 0.03);
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s cubic-bezier(0.16, 1, 0.3, 1), border-color .22s ease;
}
.kpi-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(211, 61, 12, 0.6), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.kpi-card:hover{
  transform: translateY(-3.5px);
  box-shadow: 0 14px 28px -6px rgba(14, 32, 56, 0.09);
  border-color: rgba(211, 61, 12, 0.3);
}
.kpi-card:hover::before{
  opacity: 1;
}
.kpi-card.kpi-warn{
  background: linear-gradient(145deg, rgba(255, 250, 245, 0.95), rgba(254, 237, 222, 0.75));
  border-color: rgba(243, 198, 166, 0.85);
}
.kpi-card.kpi-warn::before{
  background: linear-gradient(90deg, transparent, rgba(211, 61, 12, 0.8), transparent);
  opacity: 0.65;
}
.kpi-label{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.kpi-value{
  font-size: 1.62rem;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Los gráficos no deben estirarse en pantallas altas. */
.charts-grid canvas{ max-height: 260px; }

/* =========================================================
   2. ICONOGRAFÍA SVG
   Un solo trazo, un solo grosor, un solo tamaño. Sin emojis.
   Los iconos se inyectan desde ferpa-ui.js según data-icon.
   ========================================================= */
.ci{
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
}
.ci svg{ width: 100%; height: 100%; stroke-width: 1.75; }
.cot-nav button .ci{ width: 17px; height: 17px; opacity: .85; }
.cot-nav button.is-active .ci{ opacity: 1; }

.icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--slate-600); cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.icon-btn:hover{ background: var(--fog); color: var(--navy-900); border-color: var(--line); }
.icon-btn:focus-visible{ outline: 2px solid var(--safety); outline-offset: 1px; }
.icon-btn.danger:hover{ background: var(--danger-bg); color: var(--danger); border-color: transparent; }

/* Tooltip para acciones cuyo icono no es evidente por sí solo. */
.icon-btn[title]{ position: relative; }

/* =========================================================
   3. NAVEGACIÓN
   ========================================================= */
.nav-group-label{
  display: block; padding: 14px 12px 6px;
  font-size: .66rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.cot-nav button{
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm);
  transition: transform .16s cubic-bezier(0.16, 1, 0.3, 1), background .16s ease, color .16s ease;
  border-radius: 8px;
}
.cot-nav button:hover{
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transform: translateX(3px);
}
.cot-nav button.is-active{
  font-weight: 700;
  background: linear-gradient(135deg, #D33D0C 0%, #B93209 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(211, 61, 12, .38);
  transform: translateX(0);
}

/* Ocultos por defecto */
.mobile-tabbar{ display: none !important; }
.nav-scrim{ display: none !important; }

/* En escritorio, .cot-sidebar mide height:100vh (ver styles.css) pero no
   tenía scroll propio: si hay más ítems de menú de los que caben en la
   pantalla, se salían de la caja azul y quedaban flotando sobre el fondo
   blanco de la página (Papelera, Facturación SII, Mi perfil, etc). Con
   esto, el menú desplaza internamente y el pie de sidebar queda fijo. */
@media (min-width: 901px){
  .cot-sidebar{ overflow: hidden; }
  .cot-nav{ overflow-y: auto; min-height: 0; padding-right: 2px; }
}

/* =========================================================
   4. MÓVIL (Navegación nativa en su posición original)
   No mueve los menú ni desplaza elementos. Estética consistente
   Obsidian Glass sin tapar ni romper apartados.
   ========================================================= */
@media (max-width: 900px){

  /* La barra superior queda en su posición natural */
  .cot-sidebar{
    position: sticky; top: 0;
    z-index: 70;
    padding: 12px 16px; box-shadow: var(--shadow-md);
    flex-wrap: wrap; align-items: center;
  }
  .cot-sidebar .brand-mini{ font-size: .84rem; margin-bottom: 0; margin-right: 14px; }

  /* Botón hamburguesa visible */
  .mobile-nav-toggle{
    display: flex !important;
    margin-left: auto;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff; cursor: pointer;
  }
  .mobile-nav-toggle:hover{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.25);
  }

  /* Menú desplegable nativo en su posición original con estética Obsidian Glass de Buscar RUT */
  .cot-nav{
    display: none;
    width: 100%;
    order: 10;
    flex-direction: column;
    padding: 10px 8px;
    margin-top: 12px;
    gap: 4px;
    background: rgba(8, 20, 36, 0.96);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    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;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 1000;
  }
  .cot-nav.is-open{ display: flex !important; }
  .cot-nav button{ padding: 10px 12px; min-height: 44px; border-radius: 8px; }
  .cot-nav button[style*="display:none"],
  .cot-nav button[style*="display: none"]{ display: none !important; }

  .cot-sidebar-foot{
    display: none;
    width: 100%;
    order: 11;
    flex-direction: column;
    padding: 12px;
    margin-top: 8px;
    background: rgba(8, 20, 36, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    gap: 8px;
  }
  .cot-sidebar-foot.is-open{ display: flex !important; }

  .cot-main{ padding: 18px 14px 40px; }

  /* Toques cómodos en todos los controles. */
  .btn{ min-height: 44px; }
  .btn-sm{ min-height: 38px; }
  input, select, textarea{ font-size: 16px; } /* evita el zoom de iOS */
  .field label{ font-size: var(--fs-sm); }

  /* Modales que no se salen de la pantalla. */
  .modal-card, .modal-card-lg{
    width: calc(100vw - 20px); max-width: none;
    max-height: calc(100vh - 40px); overflow-y: auto;
  }
  .modal-actions{ flex-wrap: wrap; gap: 8px; }
  .modal-actions .btn{ flex: 1 1 auto; }

  .kpi-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-value{ font-size: 1.2rem; }
  .cot-topbar{ flex-direction: column; align-items: stretch; gap: 10px; }
  .cot-topbar h1{ font-size: 1.24rem; }
}
/* =========================================================
   5. TABLAS ADAPTABLES
   En pantallas chicas, las tablas marcadas con [data-cards] se
   convierten en tarjetas legibles en vez de comprimir el texto
   hasta que no se entienda nada.
   ========================================================= */
.admin-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table{ font-variant-numeric: tabular-nums; }
.admin-table th{ white-space: nowrap; }

@media (max-width: 720px){
  .admin-table[data-cards]{ display: block; }
  .admin-table[data-cards] thead{ display: none; }
  .admin-table[data-cards] tbody,
  .admin-table[data-cards] tr{ display: block; width: 100%; }
  .admin-table[data-cards] tr{
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 10px; background: #fff;
    box-shadow: var(--shadow-sm);
  }
  .admin-table[data-cards] td{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 5px 0; border: none; text-align: right;
  }
  .admin-table[data-cards] td::before{
    content: attr(data-label);
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--slate-600);
    text-align: left; flex: none;
  }
  .admin-table[data-cards] td[data-label=""]::before{ content: none; }
  .admin-table[data-cards] td:last-child{
    justify-content: flex-end; padding-top: 10px; margin-top: 6px;
    border-top: 1px solid var(--line);
  }
  .admin-table[data-cards] tr.empty-row{ text-align: center; }
  .admin-table[data-cards] tr.empty-row td{ display: block; text-align: center; }
  .admin-table[data-cards] tr.empty-row td::before{ content: none; }
}

.row-actions{ display: inline-flex; gap: 4px; align-items: center; }

/* =========================================================
   6. FORMULARIOS: estados de error, éxito y carga
   ========================================================= */
.req{ color: var(--danger); font-weight: 700; }

.field input.has-error,
.field textarea.has-error,
.field select.has-error{
  border-color: var(--danger);
  background: var(--danger-bg);
}
.field-error{
  display: none; margin-top: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--danger);
}
.field-error.is-visible{ display: block; }

.save-state{
  margin-right: auto; align-self: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600);
}
.save-state.is-ok{ color: var(--ok); }
.save-state.is-pending{ color: #B4530A; }
.save-state.is-loading{ color: var(--slate-600); }

.empty-note{
  font-size: var(--fs-sm); color: var(--slate-600);
  padding: 14px; background: var(--fog);
  border-radius: var(--radius); text-align: center;
}

/* =========================================================
   7. PERFIL — Luminous Frosted Liquid Glass (Ahumado Claro)
   Equilibrio entre Liquid Glass satinado y coherencia con la app
   ========================================================= */
#view-perfil{
  position: relative;
}

#view-perfil .cot-card{
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 245, 251, 0.78) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 8px 32px -4px rgba(14, 32, 56, 0.05),
              0 0 0 1px rgba(215, 224, 234, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.98);
  color: var(--navy-900);
  padding: 24px 26px;
  transition: box-shadow .24s cubic-bezier(0.16, 1, 0.3, 1), transform .24s cubic-bezier(0.16, 1, 0.3, 1), border-color .24s ease;
}
#view-perfil .cot-card:hover{
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 12px 38px -4px rgba(14, 32, 56, 0.09),
              0 0 0 1px rgba(198, 210, 224, 0.85),
              inset 0 1px 0 #ffffff;
}

#view-perfil .card-title{
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(226, 230, 234, 0.75);
  padding-bottom: 13px;
  margin-bottom: 18px;
}
#view-perfil .card-title .ci{
  color: var(--safety);
  width: 18px;
  height: 18px;
}

#view-perfil .perfil-identidad{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#view-perfil .perfil-identidad strong{
  font-size: 1.32rem; letter-spacing: -.02em; font-weight: 800;
  color: var(--navy-900);
}

#view-perfil .avatar-lg{
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(14, 32, 56, 0.12), 0 0 0 3px #FFFFFF, 0 0 0 4.5px rgba(224, 72, 23, 0.25);
  border: 2px solid #FFFFFF;
}
#view-perfil .avatar-lg-initial{
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(14, 32, 56, 0.12), 0 0 0 3px #FFFFFF, 0 0 0 4.5px rgba(224, 72, 23, 0.25);
}

#view-perfil .avatar-upload-btn,
.avatar-upload-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #FFFFFF !important;
  font-weight: 750;
  font-size: .78rem;
  text-decoration: none !important;
  background: linear-gradient(135deg, #E04817 0%, #D03D0E 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 3px 12px rgba(224, 72, 23, 0.35);
  padding: 7px 18px;
  border-radius: 999px;
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 8px;
  cursor: pointer;
}
#view-perfil .avatar-upload-btn:hover,
.avatar-upload-btn:hover{
  background: linear-gradient(135deg, #EC5320 0%, #E04817 100%);
  box-shadow: 0 6px 18px rgba(224, 72, 23, 0.5);
  transform: translateY(-1px);
  color: #FFFFFF !important;
}
#view-perfil .avatar-remove-btn{
  color: var(--slate-600);
  font-size: .74rem;
  font-weight: 600;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 2px 6px;
  transition: color .16s ease;
}
#view-perfil .avatar-remove-btn:hover{
  color: var(--danger);
}

/* Badge de rol: estilo original azul con óvalo indicador al lado */
.badge-rol,
#view-perfil .badge-rol{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .025em;
  box-shadow: 0 1px 3px rgba(14, 32, 56, 0.05);
  vertical-align: middle;
}

.badge-rol-admin,
#view-perfil .badge-rol-admin{
  background: #E3EEFB !important;
  color: #1D4ED8 !important;
  border: 1px solid rgba(125, 211, 252, 0.85) !important;
}
.badge-rol-admin::before,
#view-perfil .badge-rol-admin::before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1D4ED8;
  box-shadow: 0 0 0 2.5px rgba(29, 78, 216, 0.2);
}

.badge-rol-vendedor,
#view-perfil .badge-rol-vendedor{
  background: var(--ok-bg, #EAF8EF) !important;
  color: var(--ok, #16A34A) !important;
  border: 1px solid rgba(134, 239, 172, 0.85) !important;
}
.badge-rol-vendedor::before,
#view-perfil .badge-rol-vendedor::before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok, #16A34A);
  box-shadow: 0 0 0 2.5px rgba(22, 163, 74, 0.2);
}

.badge-rol-lectura,
#view-perfil .badge-rol-lectura{
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
}
.badge-rol-lectura::before,
#view-perfil .badge-rol-lectura::before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748B;
  box-shadow: 0 0 0 2.5px rgba(100, 116, 139, 0.2);
}

#view-perfil .hint{
  color: var(--slate-600);
  font-size: .78rem;
  line-height: 1.45;
}
#view-perfil .hint strong{
  color: var(--navy-900);
}

/* Campos de formulario con Frosted Shells Luminosos */
#view-perfil .field label{
  color: var(--navy-900);
  font-weight: 650;
  font-size: .78rem;
  letter-spacing: .01em;
  margin-bottom: 5px;
  display: block;
}
#view-perfil .field input,
#view-perfil .field select,
#view-perfil .field textarea{
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 11px;
  color: var(--navy-900);
  font-size: .88rem;
  padding: 10px 14px;
  box-shadow: inset 0 1px 2px rgba(14, 32, 56, 0.03);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-perfil .field input::placeholder,
#view-perfil .field textarea::placeholder{
  color: var(--slate-400);
}
#view-perfil .field input:focus,
#view-perfil .field select:focus,
#view-perfil .field textarea:focus{
  background: #FFFFFF;
  border-color: var(--safety);
  box-shadow: 0 0 0 3.5px rgba(224, 72, 23, 0.16), 0 2px 8px rgba(14, 32, 56, 0.04);
  outline: none;
}
#view-perfil .field input:disabled{
  background: rgba(241, 245, 249, 0.65);
  border-color: rgba(226, 232, 240, 0.85);
  color: var(--slate-600);
  cursor: not-allowed;
}

#view-perfil .modal-actions{
  border-top: 1px solid rgba(226, 230, 234, 0.75);
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* KPIs de Perfil con Frosted Mineral Tiles */
#view-perfil .kpi-grid{
  margin-top: 22px;
}
#view-perfil .kpi-card{
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 246, 252, 0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 6px 20px -2px rgba(14, 32, 56, 0.05),
              0 0 0 1px rgba(218, 226, 235, 0.75),
              inset 0 1px 0 #FFFFFF;
  padding: 18px 22px;
  transition: all .22s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-perfil .kpi-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 10px 28px -4px rgba(14, 32, 56, 0.08),
              0 0 0 1px rgba(198, 210, 224, 0.9),
              inset 0 1px 0 #FFFFFF;
}
#view-perfil .kpi-label{
  color: var(--slate-600);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
#view-perfil .kpi-value{
  color: var(--navy-900);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Alertas de clientes con seguimiento atrasado */
#view-perfil .alerta-row{
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 230, 234, 0.85);
  border-radius: 12px;
  color: var(--navy-900);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: all .16s ease;
}
#view-perfil .alerta-row:hover{
  background: #FFFFFF;
  border-color: rgba(203, 213, 225, 0.95);
  box-shadow: 0 4px 14px rgba(14, 32, 56, 0.05);
  transform: translateX(2px);
}
#view-perfil .alerta-row strong{
  color: var(--navy-900);
  font-weight: 700;
}
#view-perfil .alerta-row .btn-outline{
  background: #FFFFFF;
  border: 1.5px solid var(--safety);
  color: var(--safety);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(224, 72, 23, 0.08);
  transition: all .16s ease;
}
#view-perfil .alerta-row .btn-outline:hover{
  background: var(--safety);
  border-color: var(--safety);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(224, 72, 23, 0.25);
  transform: translateY(-1px);
}
#view-perfil .empty-note,
#view-perfil .loading-note{
  color: var(--slate-600);
  font-size: .84rem;
}

/* Tabla de mis cotizaciones en perfil */
#view-perfil .admin-table-wrap{
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 230, 234, 0.85);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(14, 32, 56, 0.03);
}
#view-perfil .admin-table th{
  background: rgba(241, 245, 249, 0.75);
  color: var(--slate-600);
  border-bottom: 1px solid rgba(226, 230, 234, 0.85);
  font-weight: 750;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#view-perfil .admin-table td{
  color: var(--navy-900);
  border-bottom: 1px solid rgba(226, 230, 234, 0.55);
  font-size: .86rem;
}
#view-perfil .admin-table tbody tr:hover{
  background: rgba(248, 250, 252, 0.95);
}
#view-perfil .empty-row td{
  color: var(--slate-600);
}

/* Indicadores de guardado y errores en perfil */
#view-perfil .save-state{
  font-size: .82rem;
  font-weight: 600;
  color: var(--slate-600);
}
#view-perfil .save-state.is-saved{
  color: var(--ok);
}
#view-perfil .save-state.is-saving{
  color: #0284C7;
}
#view-perfil .save-state.is-error{
  color: var(--danger);
}
#view-perfil .field-error{
  color: var(--danger);
  font-weight: 600;
  font-size: .76rem;
}

#view-perfil #perfilGuardarBtn{
  background: linear-gradient(135deg, #E04817 0%, #D03D0E 100%);
  color: #FFFFFF !important;
  font-weight: 750;
  letter-spacing: .01em;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(224, 72, 23, 0.35);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-perfil #perfilGuardarBtn:hover{
  background: linear-gradient(135deg, #EC5320 0%, #E04817 100%);
  box-shadow: 0 6px 18px rgba(224, 72, 23, 0.48);
  transform: translateY(-1px);
}

/* =========================================================
   8. MODO SOLO LECTURA
   Feedback visual. La restricción real está en el backend.
   ========================================================= */
.banner-readonly{
  background: #FFF8F1; border: 1px solid #F3C6A6;
  border-radius: var(--radius); padding: 12px 14px;
  font-size: var(--fs-sm); color: #7A3C05; margin-bottom: var(--sp-4);
}
body.is-readonly .btn-primary:not(#loginSubmitBtn):not(#registerSubmitBtn),
body.is-readonly .icon-btn.danger{
  opacity: .5; pointer-events: none;
}

/* =========================================================
   9. ACCESIBILIDAD
   ========================================================= */
:focus-visible{ outline: 2px solid var(--safety); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   10. FORMULARIO DE COTIZACIÓN
   Es la pantalla más usada del sistema y la más alta. Necesita
   jerarquía propia: pasos numerados, un total siempre visible y
   errores que se vean junto al campo, no solo en un toast.
   ========================================================= */

/* Pasos numerados: orientan sin agregar decoración. */
.cot-view#view-nueva .cot-card[data-paso]{ position: relative; }
.cot-view#view-nueva .cot-card[data-paso]::before{
  content: attr(data-paso);
  position: absolute; top: 18px; left: -13px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-900); color: #fff;
  font-size: .72rem; font-weight: 800;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 1100px){
  .cot-view#view-nueva .cot-card[data-paso]::before{
    position: static; margin-bottom: 10px;
  }
}

/* Tabla de ítems: el borde rojo señala que falta agregar productos. */
.items-table-wrap.has-error{
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
  padding: 4px;
}

/* Barra fija con el total mientras se arma la cotización en Dark Liquid Glass. */
.cot-sticky-bar{
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 24px;
  background: rgba(7, 18, 32, 0.92);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 45;
}
.cot-sticky-bar[hidden]{ display: none; }
.sticky-total{ display: flex; align-items: baseline; gap: 10px; }
.sticky-label{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #94A3B8;
}
.sticky-total strong{
  font-size: 1.34rem; letter-spacing: -.02em;
  color: #FFFFFF; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.2);
}

/* En escritorio la barra se alinea con el contenido, no con el sidebar. */
@media (min-width: 901px){
  .cot-sticky-bar{ left: var(--sidebar-w); }
}
/* En móvil se apoya sobre la barra de navegación inferior. */
@media (max-width: 900px){
  .cot-sticky-bar{
    bottom: var(--nav-mobile-h);
    padding: 9px 14px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  }
  .cot-main{ padding-bottom: calc(var(--nav-mobile-h) + 78px); }
  .sticky-total strong{ font-size: 1.12rem; }
}

/* Acciones del formulario: el estado de guardado a la izquierda. */
.form-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-actions .save-state{ margin-right: auto; }
.form-actions .btn{ display: inline-flex; align-items: center; gap: 7px; }

/* Tabla de ítems en móvil: tarjetas por línea, no scroll horizontal. */
@media (max-width: 720px){
  .items-table thead{ display: none; }
  .items-table, .items-table tbody, .items-table tr{ display: block; width: 100%; }
  .items-table tr{
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 12px; margin-bottom: 10px; background: #fff;
  }
  .items-table td{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 5px 0; border: none;
  }
  .items-table td::before{
    content: attr(data-label);
    flex: none; min-width: 92px;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--slate-600);
  }
  .items-table td[data-label=""]::before{ content: none; }
  .items-table td input[type="text"],
  .items-table td input[type="number"],
  .items-table td select{ flex: 1; min-width: 0; }
  .items-table td[data-label=""]{ justify-content: flex-end; }
  .items-table .row-total{ font-weight: 800; color: var(--navy-900); }

  .desc-global-row{ flex-wrap: wrap; gap: 8px; }
  .totals-panel{ flex-direction: column; }
  .totals-right{ width: 100%; }
}

/* El botón de quitar línea ahora lleva icono SVG, no una "✕" de texto. */
.row-remove{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  color: var(--slate-600); cursor: pointer;
}
.row-remove:hover{ background: var(--danger-bg); color: var(--danger); }
.row-remove svg{ width: 16px; height: 16px; }

/* =========================================================
   11. ESTÉTICA OBSIDIAN GLASS PARA TODOS LOS MENÚS
   (Idéntica a la estética del buscador de RUT)
   Garantiza que ningún menú se vea abajo de los otros apartados.
   ========================================================= */
.autocomplete-list {
  display: none;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(8, 20, 36, 0.95) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  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 !important;
  max-height: min(320px, 46vh) !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  margin-top: 2px !important;
  padding: 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

.autocomplete-list.is-visible {
  display: block !important;
  animation: dropdownGlassPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.autocomplete-item {
  padding: 10px 14px !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all .16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  background: transparent !important;
}

.autocomplete-item:last-child {
  border-bottom: none !important;
}

.autocomplete-item strong {
  display: block !important;
  font-size: .89rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.autocomplete-item span {
  font-size: .76rem !important;
  color: #94A3B8 !important;
  display: block !important;
  margin-top: 2px !important;
}

.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%) !important;
  transform: translateX(3px) !important;
  border-left: 3px solid var(--safety) !important;
}

.autocomplete-item:hover strong,
.autocomplete-item.is-highlighted strong {
  color: #FFFFFF !important;
}

.autocomplete-item:hover span,
.autocomplete-item.is-highlighted span {
  color: #CBD5E1 !important;
}

.autocomplete-empty {
  padding: 18px 14px !important;
  font-size: .84rem !important;
  color: #94A3B8 !important;
  text-align: center !important;
}

/* =========================================================
   MENÚS DESPLEGABLES <select> Y SUS OPCIONES
   (Estética Obsidian Glass de Buscar RUT)
   ========================================================= */
select,
.fsel-btn {
  background-color: rgba(248, 250, 252, 0.95);
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  padding: 10px 36px 10px 13px;
  color: var(--navy-900);
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E2038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

select:focus,
.fsel-btn.is-open {
  outline: none;
  border-color: var(--safety);
  background-color: #fff;
  box-shadow: 0 0 0 3.5px rgba(211,61,12,.13);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E04817' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select option {
  background-color: #081424 !important;
  color: #FFFFFF !important;
  font-weight: 500;
  padding: 11px 14px;
}

select option:checked {
  background: #E04817 !important;
  color: #FFFFFF !important;
  font-weight: 700;
}

select option:hover {
  background: rgba(224, 72, 23, 0.35) !important;
  color: #FFFFFF !important;
}

select optgroup {
  background-color: #050d18 !important;
  color: #94A3B8 !important;
  font-weight: 700;
}

/* =========================================================
   SELECT PROPIO (misma estética que .autocomplete-list): el botón
   .fsel-btn se ve exactamente como el <select> de arriba cuando
   está cerrado; al abrirse dibuja un menú .autocomplete-list, así
   que hereda gratis todo el vidrio esmerilado ya definido.
   ========================================================= */
.fsel-wrap { position: relative; width: 100%; }
.fsel-native {
  position: absolute !important;
  opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0;
  border: 0; overflow: hidden; pointer-events: none;
}
.fsel-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; font: inherit;
  background-image: none !important; /* la flecha ahora es .fsel-btn-arrow */
}
.fsel-btn:disabled { cursor: not-allowed; opacity: .6; }
.fsel-btn-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-btn-arrow {
  flex: none; display: flex; width: 15px; height: 15px; color: var(--navy-900);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.fsel-btn-arrow svg { width: 100%; height: 100%; }
.fsel-btn.is-open .fsel-btn-arrow { transform: rotate(180deg); color: var(--safety); }
.fsel-list { width: 100%; }
.fsel-optgroup {
  padding: 8px 14px 4px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
}
.fsel-item.is-disabled { opacity: .4 !important; cursor: not-allowed !important; }

/* El total de la cotización va sobre fondo oscuro: debe leerse en
   blanco, no en el azul de marca que se usa sobre fondo claro. */
.totals-row.big .val { color: #FFFFFF; }

/* =========================================================
   CONTROL DE APILAMIENTO: QUE LOS MENÚS NO SE VEAN ABAJO DE
   LOS OTROS APARTADOS / SECCIONES
   ========================================================= */
/* 1. Cuando un menú está desplegado dentro de un card, elevar el card completo */
.cot-card:has(.autocomplete-list.is-visible),
.cot-card.has-open-menu,
.cot-card[data-paso="2"]:focus-within {
  z-index: 500 !important;
  position: relative !important;
}

/* 2. Elevar el campo y los contenedores directos que alojan el menú */
.field:has(.autocomplete-list.is-visible),
.field.has-open-menu,
.grid-2:has(.autocomplete-list.is-visible),
.grid-2.has-open-menu,
.grid-3:has(.autocomplete-list.is-visible),
.grid-3.has-open-menu,
div[style*="position:relative"]:has(.autocomplete-list.is-visible),
div[style*="position: relative"]:has(.autocomplete-list.is-visible),
div.has-open-menu {
  z-index: 1000 !important;
  position: relative !important;
}

/* 3. Asegurar que los modales no recorten los menús ni queden tapados */
.modal-card:has(.autocomplete-list.is-visible),
.modal-card.has-open-menu {
  z-index: 1000 !important;
}
.modal-body {
  overflow: visible !important;
}

/* En móvil el teclado deja poco espacio: el desplegable se ajusta */
@media (max-width: 900px){
  .autocomplete-list{ max-height: min(250px, 40vh) !important; }
}

/* =========================================================
   12. REFRESCO VISUAL GENERAL
   No se cambian los colores de marca (van con la cotización y el
   PDF). Lo que se ajusta es la densidad, el contraste y el ritmo
   vertical, que es lo que hace que una interfaz se lea moderna.
   ========================================================= */

body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
}

/* Fondo transparente para que el ambient mesh brille a través de los cristales */
.cot-main{ background: transparent; }

.cot-card{
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px -2px rgba(14, 32, 56, 0.04), 0 0 0 1px rgba(226, 230, 234, 0.6);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cot-card:hover{
  box-shadow: 0 8px 28px -4px rgba(14, 32, 56, 0.08), 0 0 0 1px rgba(226, 230, 234, 0.8);
}

.card-title{
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.card-title-row{ margin-bottom: 14px; }

/* KPIs con Liquid Glass */
.kpi-card{
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 18px -2px rgba(14, 32, 56, 0.04), 0 0 0 1px rgba(226, 230, 234, 0.6);
  padding: 18px 20px;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(14, 32, 56, 0.08), 0 0 0 1px rgba(226, 230, 234, 0.8);
}
.kpi-label{
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-600);
}
.kpi-value{ font-size: 1.45rem; font-weight: 800; margin-top: 4px; }

/* Botones: menos altura, más peso tipográfico. */
.btn{
  border-radius: 9px;
  font-weight: 650;
  letter-spacing: -.005em;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ box-shadow: 0 1px 2px rgba(232,114,12,.25); }

/* Campos: foco visible y borde más suave en reposo. */
.field input, .field select, .field textarea{
  border-radius: 9px;
  border-color: #DDE2E9;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--safety);
  box-shadow: 0 0 0 3px rgba(232,114,12,.12);
  outline: none;
}
.field label{ font-weight: 650; }

/* Tablas: cabecera clara, esquinas redondeadas y filas interactivas */
.admin-table-wrap{
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 230, 234, 0.85);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(14, 32, 56, 0.03);
  overflow: hidden;
}
.admin-table thead th{
  font-size: .71rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-600);
  background: #F8FAFC;
  padding: 12px 14px;
}
.admin-table tbody tr{ transition: background .12s ease; }
.admin-table tbody tr:hover{ background: rgba(241, 245, 249, 0.7); }

/* Badges: pastilla moderna con contraste fino */
.badge{
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  padding: 3px 10px;
  letter-spacing: .01em;
}

/* Modales: Liquid Glass, sombra profunda y apertura fluida */
.modal-overlay{
  background: rgba(7, 18, 32, 0.58) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: opacity .2s ease;
}
.modal-card, .modal-card-lg{
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  box-shadow: 0 25px 65px -12px rgba(10, 22, 38, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: modalEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head h3{ letter-spacing: -.015em; }

/* Sidebar: separación por grupos y estado activo */
.cot-nav button{
  border-radius: 8px;
  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);
  transform: translateX(0) !important;
}

.nav-badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: auto;
  border-radius: 999px; background: var(--safety); color: #fff;
  font-size: .66rem; font-weight: 800;
}

/* =========================================================
   13. BÚSQUEDA GLOBAL
   ========================================================= */
.global-search{
  position: relative;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.global-search:focus-within{
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(224, 72, 23, 0.85);
  box-shadow: 0 0 0 3.5px rgba(224, 72, 23, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.global-search .ci{ color: rgba(255, 255, 255, 0.65); width: 17px; height: 17px; }
.global-search input{
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: #FFFFFF; font-size: .86rem; font-weight: 500;
}
.global-search input::placeholder{ color: rgba(255, 255, 255, 0.45); }
.search-hint{
  font-size: .64rem; font-weight: 750;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.global-search:has(.global-search-results.is-visible),
.global-search.has-open-menu{
  z-index: 1000 !important;
  position: relative !important;
}

.global-search-results{
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: rgba(8, 20, 36, 0.95) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 52px -6px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
  max-height: 420px; overflow-y: auto; z-index: 9999 !important;
  padding: 8px;
  animation: dropdownGlassPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.global-search-results.is-visible{ display: block !important; }
.gs-item{
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  transition: all .16s ease;
}
.gs-item:hover, .gs-item:focus-visible{
  background: linear-gradient(90deg, rgba(224, 72, 23, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  transform: translateX(3px) !important;
  border-left: 3px solid var(--safety) !important;
  outline: none;
}
.gs-badge{
  flex: none; margin-top: 2px;
  font-size: .63rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: #E2E8F0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px; padding: 3px 7px;
}
.gs-texto{ min-width: 0; }
.gs-texto strong{
  display: block; font-size: .88rem; font-weight: 700; color: #FFFFFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-texto small{ display: block; font-size: .75rem; color: #94A3B8; margin-top: 2px; }
.gs-empty{ padding: 18px; font-size: .84rem; color: #94A3B8; text-align: center; }

@media (max-width: 900px){
  /* En móvil el buscador se ubica de forma limpia */
  .global-search{ order: 2; width: 100%; margin: 10px 0 0; }
}

/* =========================================================
   14. PIPELINE KANBAN (LIQUID GLASS & MICRO-INTERACTIONS)
   ========================================================= */
.kanban-scroll{
  overflow-x: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.kanban{
  display: flex; gap: 14px; align-items: flex-start;
  min-width: min-content;
  padding: 4px 2px;
}
.kanban-col{
  flex: 0 0 280px; width: 280px;
  background: rgba(241, 245, 249, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 230, 234, 0.85);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 2px 8px rgba(14, 32, 56, 0.03);
}
.kanban-col-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.kanban-col-title{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 800; color: var(--navy-900);
}
.kanban-col-count{
  font-size: .68rem; font-weight: 800; color: var(--slate-600);
  background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(226, 230, 234, 0.8);
  border-radius: 999px; padding: 2px 8px;
  box-shadow: 0 1px 2px rgba(14, 32, 56, 0.04);
}
.kanban-col-total{
  font-size: .73rem; font-weight: 700; color: var(--slate-600);
  margin-bottom: 12px;
  padding-left: 2px;
}
.kanban-col-body{
  display: flex; flex-direction: column; gap: 10px;
  min-height: 100px; border-radius: 10px;
  transition: background .15s ease, outline-color .15s ease;
  outline: 2px dashed transparent; outline-offset: 3px;
}
.kanban-col-body.is-over{
  background: rgba(211, 61, 12, 0.08);
  outline-color: var(--safety);
}
.kanban-vacio{
  font-size: .76rem; color: #9AA5B2; text-align: center;
  padding: 24px 8px; margin: 0;
  border: 1px dashed rgba(203, 213, 225, 0.8);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
}

.kanban-card{
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 230, 234, 0.9);
  border-radius: 12px; padding: 13px 14px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(14, 32, 56, 0.04);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s ease;
  position: relative;
}
.kanban-card:hover{
  box-shadow: 0 8px 20px -4px rgba(14, 32, 56, 0.1);
  border-color: rgba(203, 213, 225, 1);
  transform: translateY(-2.5px);
}
.kanban-card:active{ cursor: grabbing; }
.kanban-card.is-dragging{
  opacity: .5;
  transform: rotate(2deg) scale(0.98);
  box-shadow: 0 16px 32px rgba(14, 32, 56, 0.2);
}
.kanban-card.is-estancada{
  border-left: 3.5px solid var(--danger);
}

.kc-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.kc-head strong{ font-size: .83rem; font-weight: 800; color: var(--navy-900); }
.kc-monto{ font-size: .85rem; font-weight: 800; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.kc-cliente{
  font-size: .78rem; color: var(--slate-600); margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4;
}
.kc-meta{ font-size: .72rem; color: var(--slate-600); display: flex; align-items: center; }
.kc-meta .avatar-sm, .kc-meta .avatar-sm-initial{ width: 20px; height: 20px; font-size: .6rem; margin-right: 6px; }
.kc-foot{
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(226, 230, 234, 0.8);
  font-size: .68rem; color: #98A3B0;
}
.kc-alerta{
  margin: 7px 0 0; font-size: .68rem; font-weight: 700; color: var(--danger);
}

/* Puntos de color por estado, mismos que los badges. */
.dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: #B7C0CB; }
.dot-borrador{ background: #B7C0CB; }
.dot-enviada{ background: #E8720C; }
.dot-esperando_respuesta{ background: #D9A407; }
.dot-en_proceso{ background: #2563EB; }
.dot-aceptada{ background: #1F9254; }
.dot-convertida{ background: #0F766E; }
.dot-rechazada{ background: #4B5563; }
.dot-vencida{ background: #DC2626; }

.badge-convertida{ background: #D6F0EC; color: #0F766E; }

@media (max-width: 720px){
  .kanban-col{ flex: 0 0 82vw; width: 82vw; }
  /* En celular arrastrar es incómodo: la tarjeta se abre y el estado
     se cambia desde el formulario de la cotización. */
  .kanban-card{ cursor: pointer; }
}

/* =========================================================
   15. LÍNEA DE TIEMPO / SEGUIMIENTOS (SEGMENTED TABS)
   ========================================================= */
.seg-tabs{
  display: inline-flex;
  background: rgba(241, 245, 249, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 20px;
  border: 1px solid rgba(226, 230, 234, 0.8);
}
.seg-tab{
  background: transparent; border: none; cursor: pointer;
  padding: 8px 16px; border-radius: 8px;
  font-size: .84rem; font-weight: 600; color: var(--slate-600);
  transition: all .16s cubic-bezier(0.16, 1, 0.3, 1);
}
.seg-tab:hover{ color: var(--navy-900); }
.seg-tab.is-active{
  background: #FFFFFF;
  color: var(--navy-900);
  font-weight: 750;
  box-shadow: 0 2px 8px rgba(14, 32, 56, 0.08);
}

.timeline{ display: flex; flex-direction: column; gap: 4px; }
.tl-item{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  transition: background .15s ease;
  border-bottom: 1px solid rgba(241, 245, 249, 0.85);
}
.tl-item:hover{
  background: rgba(241, 245, 249, 0.6);
}
.tl-item:last-child{ border-bottom: none; }
.tl-icono{
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(241, 245, 249, 0.9);
  color: var(--navy-800);
  box-shadow: 0 1px 3px rgba(14, 32, 56, 0.05);
  border: 1px solid rgba(226, 230, 234, 0.8);
}
.tl-icono .ci{ width: 16px; height: 16px; }
.tl-cuerpo{ flex: 1; min-width: 0; }
.tl-head{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.tl-head strong{ font-size: .84rem; color: var(--navy-900); }
.tl-cliente{ font-size: .78rem; color: var(--slate-600); }
.tl-desc{ margin: 0 0 5px; font-size: .84rem; line-height: 1.5; color: #2C3542; white-space: pre-wrap; }
.tl-foot{ display: flex; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: #98A3B0; }
.tl-acciones{ flex: none; display: flex; gap: 4px; align-items: center; }

.chip{
  font-size: .66rem; font-weight: 700; border-radius: 999px;
  padding: 2px 8px; background: var(--fog); color: var(--slate-600);
}
.chip-hoy{ background: #FFF1E3; color: #B4530A; }
.chip-alerta{ background: var(--danger-bg); color: var(--danger); }
.chip-ok{ background: #E6F2EA; color: #1F6B3D; }

@media (max-width: 640px){
  .tl-item{ flex-wrap: wrap; }
  .tl-acciones{ width: 100%; justify-content: flex-end; padding-top: 6px; }
}

/* Ficha de cliente: subtítulos de sección. */
.ficha-sub{
  margin: 20px 0 10px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-600);
}

/* Fila de filtros reutilizable. */
.filtros-row{
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.filtros-row .field{ flex: 1 1 160px; margin-bottom: 0; }

/* =========================================================
   16. INVENTARIO, DESPACHOS Y COBROS  (Fase 5)
   ========================================================= */

.inv-panel[hidden]{ display: none; }
.inv-panel .search-box{ max-width: 380px; }

/* Signo del movimiento: se lee de un vistazo si sumó o restó. */
.mov-mas{ color: var(--ok, #1F6B3D); font-variant-numeric: tabular-nums; }
.mov-menos{ color: var(--danger); font-variant-numeric: tabular-nums; }

/* Estados de despacho. Los colores siguen el avance del proceso:
   gris (no empieza) → naranja (en curso) → verde (cerrado). */
.badge-desp-pendiente{ background: #EEF1F5; color: #5A6675; }
.badge-desp-preparando{ background: #FFF1E3; color: #B4530A; }
.badge-desp-listo{ background: #E7EDF6; color: #1D4ED8; }
.badge-desp-despachado{ background: #E0F0FB; color: #0369A1; }
.badge-desp-entregado{ background: #E6F2EA; color: #1F6B3D; }
.badge-desp-incidente{ background: var(--danger-bg); color: var(--danger); }

/* Estados de cobranza. */
.badge-cob-pendiente{ background: #EEF1F5; color: #5A6675; }
.badge-cob-abono_parcial{ background: #FFF1E3; color: #B4530A; }
.badge-cob-pagado{ background: #E6F2EA; color: #1F6B3D; }
.badge-cob-vencido{ background: var(--danger-bg); color: var(--danger); }

/* Estado de órdenes de compra recibidas a medias. */
.badge-recibida_parcial{ background: #FFF1E3; color: #B4530A; }

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

.check-item{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; color: var(--slate-600); cursor: pointer;
}
.check-item input{ width: auto; margin: 0; }

.loading-note{
  font-size: .84rem; color: var(--slate-600);
  padding: 20px; text-align: center; margin: 0;
}

/* Las pestañas de sección se desbordan en pantallas chicas: se
   recorren horizontalmente en vez de romperse en varias líneas. */
@media (max-width: 720px){
  .seg-tabs{
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .seg-tabs::-webkit-scrollbar{ display: none; }
  .seg-tab{ white-space: nowrap; flex: none; }
  .topbar-actions{ width: 100%; }
  .topbar-actions .btn{ flex: 1; }
}

/* =========================================================
   17. ADMINISTRACIÓN Y REPORTES  (Fase 6)
   ========================================================= */
.admin-panel[hidden]{ display: none; }
.num-card{ background: #FAFBFC; }
.num-card .card-title{ margin-bottom: 12px; }

/* Aviso de acción destructiva: tiene que verse distinto a todo lo
   demás, porque es lo único que no se puede deshacer con un clic. */
.banner-peligro{
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #7F1D1D;
}
.banner-peligro strong{ display: block; margin-bottom: 4px; }

.btn-danger{
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover{ background: #B91C1C; border-color: #B91C1C; }

#chartReporte, #chartMargen{ max-height: 260px; }

@media (max-width: 720px){
  .num-card .grid-3{ grid-template-columns: 1fr; }
}

/* =========================================================
   18. INTEGRACIONES E IMPORTACIÓN  (Fase 7)
   ========================================================= */
.integ-card{ background: #FAFBFC; }
.integ-card .card-title-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.integ-card .hint{ margin-top: 0; }

.import-resumen{
  background: var(--fog);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 14px 0;
  font-size: var(--fs-sm);
}
.import-resumen p{ margin: 0 0 4px; }
.import-resumen p:last-child{ margin-bottom: 0; }

#impContenido{ font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .78rem; }