:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e2e4e9;
  --text: #1f2430;
  --text-muted: #6b7280;
  --primary: #2952e3;
  --primary-hover: #1f3fc0;
  --danger: #d63b3b;
  --danger-bg: #fdecec;
  --success: #1a9c5b;
  --success-bg: #e8f8ef;
  --warning: #b7791f;
  --warning-bg: #fdf3e0;
  --sidebar-w: 276px;
  --radius: 8px;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
#root { min-height: 100%; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Auth layout ---------- */
.auth-shell { min-height: 100vh; display: flex; }

/* ---------- Login: panel de marca (izq, oculto en mobile) + formulario (der) ---------- */
.auth-split { display: flex; width: 100%; min-height: 100vh; }

.auth-brand {
  flex: 1 1 46%;
  background: linear-gradient(135deg, #2952e3 0%, #1c3fc0 55%, #162e8f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}
.auth-brand::before, .auth-brand::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); pointer-events: none; }
.auth-brand::before { width: 420px; height: 420px; top: -150px; right: -130px; }
.auth-brand::after { width: 300px; height: 300px; bottom: -130px; left: -90px; background: rgba(255,255,255,.06); }
/* Textura de puntos (look SaaS estandar) en vez de un logo recortado -- se
   ve mas cuidado/intencional que un fragmento de imagen apenas visible, y
   no depende de la marca de ningun cliente en particular (esta pantalla es
   compartida por todas las empresas del sistema). */
.auth-brand-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
  pointer-events: none;
}
.auth-brand-inner { max-width: 420px; position: relative; z-index: 1; }
.auth-brand-badge {
  width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
  box-shadow: 0 8px 20px rgba(10,20,80,.25);
}
.auth-brand h1 { font-size: 32px; margin: 0 0 14px; font-weight: 800; letter-spacing: -.01em; }
.auth-brand-tag { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 0 0 34px; }
.auth-brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.auth-brand-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.94); line-height: 1.4; }
.auth-brand-check {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
}

.auth-form-side { position: relative; flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.auth-card-v2 { width: 100%; max-width: 400px; }
.auth-footer { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; font-size: 12px; color: var(--text-muted); padding: 0 16px; }
.auth-card-v2 h2 { font-size: 24px; margin: 0 0 6px; font-weight: 800; }
.auth-card-v2 p.subtitle { color: var(--text-muted); margin: 0 0 28px; font-size: 14px; }

.input-icon-field { position: relative; display: flex; }
.input-icon-field .field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); display: flex; pointer-events: none;
}
/* Especificidad reforzada (via "form") a proposito: esta regla y la generica
   .form-field input:not(...) (mas abajo en el archivo) empatan en
   especificidad -- sin este empujon, la generica gana por venir despues en
   el archivo y el padding-left del icono se pierde, dejando el texto
   escrito encima del icono. */
.auth-card-v2 form .input-icon-field input:not([type="checkbox"]) { padding: 11px 14px 11px 40px; font-size: 14px; border-radius: 9px; }
.auth-card-v2 .password-field .password-toggle { color: var(--text-muted); }

.auth-submit-btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; font-weight: 700; border-radius: 9px; box-shadow: 0 6px 16px rgba(41,82,227,.28); }

@media (max-width: 880px) {
  .auth-brand { display: none; }
  .auth-form-side { flex: 1 1 100%; }
}

/* ---------- App layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1a1e35 0%, #12152580 100%), #10121f;
  color: #cbd1e6;
  padding: 14px 0 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width .18s ease;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #333a5c transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #333a5c; border-radius: 3px; }
.sidebar nav { flex: 1; padding-top: 6px; }
.sidebar.collapsed { width: 72px; }

.sidebar-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
  margin: 0 0 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar.collapsed .sidebar-top-row { flex-direction: column; padding: 0 0 14px; }

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  color: inherit;
}
.sidebar.collapsed .brand { flex: none; }
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand:hover .brand-name { color: #fff; }
.sidebar .brand-logo {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; overflow: hidden;
}
.sidebar .brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.sidebar .brand-text { min-width: 0; }
.sidebar .brand-name {
  font-weight: 700; color: #fff; font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.sidebar .brand-ruc { font-size: 11px; color: #7d84ac; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.collapsed .brand-text { display: none; }

.sidebar-collapse-btn {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(28,63,192,.45);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.sidebar-collapse-btn:hover { box-shadow: 0 3px 12px rgba(41,82,227,.6); transform: translateY(-1px); }
.sidebar-collapse-btn:active { transform: scale(.92); }
.sidebar-collapse-btn .icon-chevron { display: flex; transition: transform .18s ease; }
.sidebar-collapse-btn.is-collapsed .icon-chevron { transform: rotate(180deg); }

.mobile-menu-btn {
  display: none; width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.mobile-menu-btn:hover { background: #f0f1f4; }
.mobile-menu-btn .icon-menu { display: flex; }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 18, 32, .5); z-index: 90;
}
.sidebar-backdrop.visible { display: block; }

.sidebar nav .nav-icon,
.sidebar .nav-group-icon,
.sidebar-logout .nav-icon {
  font-size: 14px; width: 28px; height: 28px; line-height: 28px; text-align: center;
  border-radius: 8px; background: rgba(255,255,255,.05); flex-shrink: 0;
  transition: background .15s ease;
}

.sidebar nav a.nav-toplink {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: #aab2d5;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar nav a.nav-toplink:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar nav a.nav-toplink.active {
  background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(28,63,192,.35);
}
.sidebar nav a.nav-toplink.active .nav-icon { background: rgba(255,255,255,.18); }

.sidebar.collapsed nav a.nav-toplink,
.sidebar.collapsed .nav-group-toggle,
.sidebar.collapsed .sidebar-logout { justify-content: center; padding-left: 0; padding-right: 0; margin-left: 10px; margin-right: 10px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-group-label,
.sidebar.collapsed .nav-group-chevron { display: none; }
.sidebar.collapsed .nav-submenu { display: none; }

.sidebar-logout {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 10px 0; padding: 12px 10px 0; border: none; border-top: 1px solid rgba(255,255,255,.08);
  background: none; cursor: pointer; border-radius: 0;
  color: #d98787; font-size: 13.5px; font-weight: 500; text-align: left; flex-shrink: 0;
}
.sidebar-logout:hover { color: #ff9b9b; }
.sidebar-logout:hover .nav-icon { background: rgba(255,155,155,.18); }

.nav-group-toggle {
  width: calc(100% - 20px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 10px 2px;
  background: none;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  padding: 8px 10px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7d84ac;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.nav-group-toggle:hover { color: #cdd3ee; background: rgba(255,255,255,.04); }
.nav-group-label { flex: 1; }
.nav-group-chevron { font-size: 12px; color: #5b6289; transition: transform .18s ease; }
.nav-group-toggle.open .nav-group-chevron { transform: rotate(90deg); }

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  margin: 0 10px 0 24px;
  border-left: 2px solid rgba(255,255,255,.08);
  transition: max-height .22s ease;
}
.nav-submenu.open { max-height: 480px; }
.nav-submenu a.nav-sublink {
  display: block;
  margin: 2px 0 2px 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #aab2d5;
  font-size: 12.5px;
}
.nav-submenu a.nav-sublink:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-submenu a.nav-sublink.active { background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff; font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-fecha { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.topbar-ambiente-slot { margin: 0 auto; }
@media (max-width: 640px) { .topbar-fecha { display: none; } }

@media (max-width: 880px) {
  .mobile-menu-btn { display: flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 95;
    width: var(--sidebar-w) !important;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed .sidebar-top-row { flex-direction: row; padding: 0 20px 16px; }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-group-label,
  .sidebar.collapsed .nav-group-chevron { display: block; }
  .sidebar.collapsed .brand { flex: 1; }
  .sidebar.collapsed nav a.nav-toplink,
  .sidebar.collapsed .nav-group-toggle,
  .sidebar.collapsed .sidebar-logout { justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
  .sidebar.collapsed .nav-submenu { display: block; }
  .sidebar-collapse-btn { display: none; }
}
.content { padding: 24px; flex: 1; overflow: auto; }

.btn-soporte {
  display: inline-flex; align-items: center; gap: 6px; background: #25d366; color: #fff;
  border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1;
}
.btn-soporte:hover { background: #1ebe5a; }

.bell-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 15px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; color: var(--text);
}
.bell-btn:hover { background: #f5f6fa; }
.bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 100px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  border: 2px solid #fff;
}
.alertas-panel { width: 320px; max-height: 380px; overflow-y: auto; }
.alertas-panel-header { padding: 12px 14px 8px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); }
.alertas-panel-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.alertas-panel-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text);
}
.alertas-panel-item:last-child { border-bottom: none; }
.alertas-panel-item:hover { background: #f7f8fa; }
.alertas-panel-item .icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.alertas-panel-item .text { font-size: 12.5px; line-height: 1.4; }

.user-menu-trigger {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 100px; padding: 4px 12px 4px 4px; cursor: pointer;
}
.user-menu-trigger:hover { background: #f5f6fa; }
.user-menu-trigger .nombre { font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu-trigger .chevron { font-size: 9px; color: var(--text-muted); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}

.perfil-identidad { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.perfil-form .form-field input:not([type="checkbox"]) { max-width: 320px; }
.perfil-form .form-field .password-field { max-width: 320px; }
.perfil-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px;
}
.perfil-nombre { font-size: 17px; font-weight: 700; }

.user-menu-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .4px; padding: 8px 10px 6px; }
.user-menu-sucursal {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #f5f6fa;
  border-radius: 8px; margin: 0 4px 4px; font-size: 12.5px;
}
.user-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 10px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--text); text-decoration: none;
}
.icon-whatsapp { display: inline-flex; color: #25d366; flex-shrink: 0; }
.btn-soporte .icon-whatsapp { color: #fff; }
.icon-imprimir { display: inline-flex; }
.user-menu-item:hover { background: #f0f1f4; }
.user-menu-item.danger { color: var(--danger); }
.user-menu-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu-version { font-size: 10.5px; color: var(--text-muted); padding: 2px 10px 6px; }

/* ---------- Generic UI ---------- */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.page-header h2 { margin: 0; font-size: 20px; font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { background: #f0f1f4; }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, #2952e3, #1c3fc0); border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(28,63,192,.28);
}
.btn-primary:hover { background: linear-gradient(135deg, #345eea, #2247cc); box-shadow: 0 4px 12px rgba(28,63,192,.4); }
.btn-danger { background: var(--danger-bg); border-color: #f3caca; color: var(--danger); }
.btn-danger:hover { background: #fadcdc; }
.btn-success { background: var(--success-bg); border-color: #b9ecd3; color: var(--success); }
.btn-success:hover { background: #d3f5e4; }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(16,18,32,.04);
}
.panel h3 { margin: 0 0 12px; font-size: 15px; }
.dash-section-title { font-size: 19px; font-weight: 700; margin: 0 0 12px; }

table.data-table { width: 100%; border-collapse: collapse; background: var(--panel); }
table.data-table th, table.data-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
/* Encabezado en azul suave (el color primario de la app) para separarlo con
   claridad de las filas de datos. */
table.data-table th { background: #e6ecfc; color: var(--primary-hover); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid #c3d0f6; }
table.data-table tbody tr:nth-child(even) { background: #fafbfd; }
table.data-table tbody tr:hover { background: #eef2fc; }
.table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; box-shadow: 0 1px 3px rgba(16,18,32,.04); }
.table-wrap table.data-table { border: none; }
.table-wrap table.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.table-wrap table.data-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.actions-cell { display: flex; gap: 6px; white-space: nowrap; }

.inline-edit-cell { cursor: text; border-radius: 5px; padding: 3px 6px; margin: -3px -6px; }
.inline-edit-cell:hover { background: #eef1f8; }
.inline-edit-cell.inline-edit-strong .inline-edit-text { font-weight: 700; }
.inline-edit-input {
  width: 160px; max-width: 100%; font: inherit; padding: 3px 7px; border: 1px solid var(--border);
  border-radius: 5px; background: #fff; color: inherit; outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.inline-edit-input[type="number"] { width: 80px; }
.inline-edit-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41, 82, 227, .12); }
.inline-edit-input:disabled { opacity: .6; }
.inline-edit-input[type="number"]::-webkit-inner-spin-button,
.inline-edit-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inline-edit-input[type="number"] { -moz-appearance: textfield; }

.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.4; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-muted { background: #eceef2; color: var(--text-muted); }
.badge-info { background: #e8edfd; color: var(--primary); }

/* Tag de Estado SUNAT (Comprobantes) -- pastilla con fondo tenue del mismo
   color que el texto, para ubicarlo de un vistazo en una tabla densa (antes
   tenia un borde-izquierdo + border-radius que a tamano chico se veia como
   un parentesis pegado al texto). */
.estado-sunat-tag {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 100px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.estado-sunat-tag.tag-success { color: var(--success); background: var(--success-bg); }
.estado-sunat-tag.tag-danger { color: var(--danger); background: var(--danger-bg); }
.estado-sunat-tag.tag-warning { color: var(--warning); background: var(--warning-bg); }
.estado-sunat-tag.tag-muted { color: var(--text-muted); background: #eceef2; }

.dropdown-menu-portal {
  position: fixed; z-index: 300;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 170px; padding: 4px;
}
.dropdown-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; font-size: 12.5px; border-radius: 6px; cursor: pointer; color: var(--text);
}
.dropdown-item:hover { background: #f0f1f4; }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.tint-orange { color: #c8620c; }
.dropdown-item.tint-blue { color: #1c3fc0; }
.dropdown-item.tint-teal { color: #0f7d72; }
.dropdown-item.disabled, .dropdown-item:disabled { color: var(--text-muted); cursor: not-allowed; }
.dropdown-item.disabled:hover, .dropdown-item:disabled:hover { background: none; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 2px; }

.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; cursor: pointer; font-size: 13px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; color: var(--text);
}
.icon-btn:hover { filter: brightness(0.97); }
.icon-btn.tint-danger { background: var(--danger-bg); border-color: #f3caca; color: var(--danger); }
.icon-btn.tint-warning { background: var(--warning-bg); border-color: #f0dba0; color: var(--warning); }
.icon-btn.tint-info { background: #e8edfd; border-color: #c7d3f9; color: var(--primary); }
.icon-btn.tint-success { background: var(--success-bg); border-color: #b9ecd3; color: var(--success); }
.icon-btn.solid-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.icon-btn:disabled { background: #f0f1f4; border-color: var(--border); color: var(--text-muted); cursor: not-allowed; filter: none; }
.icon-btn-group { display: flex; gap: 4px; align-items: center; }

/* ---------- Fila "PDF: [Ver] [Descargar] ..." en el detalle de un comprobante ---------- */
.doc-accion-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.doc-accion-row + .doc-accion-row { border-top: 1px solid var(--border); }
.doc-accion-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); min-width: 70px; }
.doc-pill {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent;
  border-radius: 100px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #eceef2; color: var(--text);
}
.doc-pill:hover { filter: brightness(0.97); }
.doc-pill.tint-danger { background: var(--danger-bg); color: var(--danger); }
.doc-pill.tint-warning { background: var(--warning-bg); color: var(--warning); }
.doc-pill.tint-info { background: #e8edfd; color: var(--primary); }
.doc-pill.tint-success { background: var(--success-bg); color: var(--success); }
.doc-pill:disabled { background: #f0f1f4; color: var(--text-muted); cursor: not-allowed; }

/* ---------- Tarjeta de color con el ultimo intento de envio a SUNAT ---------- */
.envio-sunat-card { border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.envio-sunat-card.tint-success { background: var(--success-bg); color: var(--success); }
.envio-sunat-card.tint-danger { background: var(--danger-bg); color: var(--danger); }
.envio-sunat-card.tint-warning { background: var(--warning-bg); color: var(--warning); }
.envio-sunat-card.tint-muted { background: #eceef2; color: var(--text-muted); }

/* ---------- Modal "Generar guia desde comprobante" (guias-remision.js) ---------- */
.banner-info-verde {
  background: var(--success-bg); color: var(--success); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.guia-destinatario-fijo {
  background: #f4f6fa; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.guia-destinatario-fijo div:first-child { font-weight: 700; }

.thumb-box {
  width: 36px; height: 36px; border-radius: 6px; background: #eef0f4;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.thumb-box img { width: 100%; height: 100%; object-fit: cover; }

/* align-items:start (no el "stretch" por defecto de grid): sin esto, un
   campo con etiqueta flotante (una sola caja de alto) quedaba estirado a
   la altura del vecino de al lado con etiqueta arriba (dos lineas), mas
   alto -- la caja crecia y el texto flotante terminaba descentrado,
   pegado abajo en vez de centrado. Cada campo ahora mide su propio alto. */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.form-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.form-field { display: flex; flex-direction: column; gap: 4px; }

/* Interruptor Beta/Produccion (Empresa > Datos): azul (color primario del
   sistema) = Beta, verde (exito) = Produccion -- la confirmacion al pasar a
   Produccion (ver renderAmbienteToggle) ya cubre la advertencia de riesgo,
   asi que el color aca sigue la paleta del sistema en vez de rojo/alerta. */
.ambiente-toggle-wrap { display: flex; align-items: center; gap: 10px; height: 34px; }
.ambiente-toggle {
  width: 46px; height: 26px; border-radius: 999px; border: none; padding: 3px;
  background: var(--primary); cursor: pointer; flex-shrink: 0; position: relative; transition: background .15s ease;
}
.ambiente-toggle.is-on { background: #22c55e; }
.ambiente-toggle-thumb {
  display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease;
}
.ambiente-toggle.is-on .ambiente-toggle-thumb { transform: translateX(20px); }
/* El texto (Beta/Produccion) queda neutro en gris oscuro en los dos
   estados -- el color solo lo lleva el interruptor en si. */
.ambiente-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ambiente-toggle-label-on { color: var(--danger); }

.password-field { position: relative; display: flex; }
.form-field .password-field input:not([type="checkbox"]) { flex: 1; padding-right: 34px; }
.password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 5px; border-radius: 6px;
}
.password-toggle:hover { background: #f0f1f4; color: var(--text); }
.form-section-title {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 6px;
  margin-top: 10px;
}
.form-section-title:first-child { margin-top: 0; }
.form-section-title .icon { font-size: 14px; }
.barcode-scan-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; padding: 0; flex-shrink: 0;
  color: var(--primary); background: #eef1ff; border-color: #d7ddfb;
}
.barcode-scan-btn:hover { background: #dfe4fe; }

.etiquetas-dialogo .form-field { margin-bottom: 10px; }
.etiquetas-opciones-row { display: flex; gap: 12px; }
.etiquetas-opciones-row .form-field { flex: 1; }
.etiquetas-resumen {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.etiquetas-resumen-success { background: var(--success-bg); color: var(--success); }
.etiquetas-resumen-warning { background: #fdf3e3; color: #a9660a; }
.etiquetas-resumen-icono { font-size: 15px; flex-shrink: 0; }
.etiquetas-lista {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.etiquetas-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-bottom: 1px solid var(--border);
}
.etiquetas-fila:last-child { border-bottom: none; }
.etiquetas-fila-icono {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #eef1ff; color: var(--primary);
}
.etiquetas-fila-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.etiquetas-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiquetas-codigo {
  font-family: 'DejaVu Sans Mono', monospace; font-size: 11.5px; letter-spacing: .03em;
  color: var(--text-muted); width: fit-content;
}
.etiquetas-stepper { display: flex; align-items: center; gap: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.etiquetas-stepper-btn {
  width: 26px; height: 28px; border: none; background: #f5f6f8; color: var(--text);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.etiquetas-stepper-btn:hover { background: #e9ebef; }
.etiquetas-cantidad {
  width: 38px; flex-shrink: 0; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  -moz-appearance: textfield; border-radius: 0; padding: 0;
}
.etiquetas-cantidad::-webkit-outer-spin-button, .etiquetas-cantidad::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.image-upload-box {
  display: flex; align-items: center; justify-content: center;
  height: 84px; border: 1.5px dashed var(--border); border-radius: 8px;
  cursor: pointer; background: #fafbfc; overflow: hidden;
}
.image-upload-box:hover { border-color: var(--primary); }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
/* Formulario denso (modal-xl, ej. Productos): cajas y espaciados mas chicos
   para que entre todo en una pantalla sin necesidad de scroll. */
.modal-xl .form-grid { gap: 10px; }
.modal-xl .form-field { gap: 3px; }
.modal-xl .form-field label { font-size: 11.5px; }
.modal-xl .form-field input:not([type="checkbox"]):not([type="radio"]), .modal-xl .form-field select, .modal-xl .form-field textarea {
  padding: 5px 8px;
  font-size: 12.5px;
}
.modal-xl .form-section-title { margin-top: 6px; padding-bottom: 4px; }
.modal-xl .image-upload-box { height: 62px; }
.modal-xl .barcode-scan-btn { height: 28px; width: 32px; }

/* La grilla de 6 columnas asume una ventana ancha (escritorio maximizado).
   En una ventana angosta se reacomoda en menos columnas en vez de apretar
   6 campos ilegibles uno al lado del otro -- con muy poco ancho, entra
   menos por fila y vuelve a aparecer scroll, eso es esperable. */
@media (max-width: 980px) {
  .modal-xl .form-grid.cols-6, .form-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .modal-xl .form-grid.cols-6, .form-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .form-actions .btn { min-width: 84px; }
}
@media (max-width: 420px) {
  .modal-xl .form-grid.cols-6 { grid-template-columns: 1fr; }
}

.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13.5px;
  background: #fff;
}
/* Campo + boton en la misma fila (ej. Categoria + "nueva", Codigo de barras
   + generar): el campo debe ocupar todo el espacio sobrante, no encogerse
   a su ancho de contenido como hace un select/input por defecto en flex. */
.form-field .field-with-button { display: flex; gap: 6px; }
.form-field .field-with-button input, .form-field .field-with-button select { flex: 1; min-width: 0; }
.buscar-doc-banner:empty { display: none; }
.buscar-doc-banner { margin-top: 6px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}
/* Sin scope a .form-field a proposito: formBanner() y otros usos de
   .field-error (busqueda de RUC/DNI, aviso de monto minimo en
   Comprobantes, etc.) lo ponen fuera de un .form-field, y se quedaban sin
   el color rojo -- un mensaje de error tiene que verse como error siempre,
   no solo cuando esta anidado en ese contexto especifico. */
.field-error { color: var(--danger); font-size: 12px; }
.form-field.has-error input, .form-field.has-error select { border-color: var(--danger); }
.checkbox-field { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-field label { font-weight: 500; color: var(--text); }

/* ---------- Etiqueta flotante, TODO el sistema: ver el() en ui.js -- un
   <input> de texto simple sin placeholder propio recibe la clase
   .campo-flotante automaticamente. La etiqueta arranca DENTRO de la caja
   (como un placeholder) y, al enfocar el campo o apenas tiene contenido,
   SUBE y se achica para quedar como una etiqueta chica arriba -- nunca
   desaparece del todo, asi nunca se pierde de vista que campo es cada uno.
   El .form-field reserva arriba (padding-top, ver valores abajo) el mismo
   espacio que ocuparia una etiqueta normal, y ahi mismo es donde "sube" la
   etiqueta -- la caja queda exactamente a la misma altura que la de un
   select/checkbox vecino en la misma fila, sin importar el estado. */
.form-field:has(> input.campo-flotante) {
  position: relative;
  padding-top: 20px;
}
.modal-xl .form-field:has(> input.campo-flotante) { padding-top: 17px; }
.form-field:has(> input.campo-flotante) > label {
  position: absolute;
  left: 10px;
  top: 36px;
  transform: translateY(-50%);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
  margin: 0;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
}
.modal-xl .form-field:has(> input.campo-flotante) > label { top: 30.5px; font-size: 11.5px; }

.form-field:has(> input.campo-flotante:focus) > label,
.form-field:has(> input.campo-flotante:not(:placeholder-shown)) > label {
  top: 10px;
  font-size: 10px;
}
.modal-xl .form-field:has(> input.campo-flotante:focus) > label,
.modal-xl .form-field:has(> input.campo-flotante:not(:placeholder-shown)) > label {
  top: 8.5px;
  font-size: 9.5px;
}
.form-field:has(> input.campo-flotante:focus) > label {
  color: var(--primary);
}

.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-actions .btn { min-width: 96px; justify-content: center; }
.modal-xl .form-actions { margin-top: 6px; }

.filters-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(16,18,32,.04);
}
.filters-bar .form-field { min-width: 160px; }
.filters-bar .form-field-wide { min-width: 320px; flex: 1; max-width: 480px; }
/* El primer boton/link suelto (no .form-field) despues de los campos se
   empuja a la derecha -- separa visualmente "filtros" de "acciones" sin
   que cada vista tenga que armar un spacer a mano. */
.filters-bar > .btn:first-of-type,
.filters-bar > a:first-of-type { margin-left: auto; }

.crud-search-bar { margin-bottom: 18px; }
.crud-search-input { max-width: 540px; }
.pos-search-wrap.crud-search-input input {
  width: 100%;
  height: 46px;
  padding: 0 36px 0 40px !important;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14.5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.crud-search-input input::placeholder { color: #9aa1b1; }
.crud-search-input input:hover { border-color: #c7cbd6; }
.crud-search-input input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(41, 82, 227, .12);
}
.crud-search-input input[type="search"]::-webkit-search-cancel-button { display: none; }
.crud-search-input .pos-search-icon { left: 14px; font-size: 15px; opacity: .45; transition: opacity .15s ease; }
.crud-search-input input:focus ~ .pos-search-icon { opacity: .85; }
.search-clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 12px; line-height: 1; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.search-clear-btn:hover { background: #eef0f4; color: var(--text); }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }

.pagination { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 10px 12px; font-size: 13px; color: var(--text-muted); }

.col-picker { position: relative; display: inline-block; }
.col-picker-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 10px; min-width: 210px; z-index: 60;
  flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto;
}
.col-picker-menu.open { display: flex; }
.col-picker-menu label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 5px; }
.col-picker-menu label:hover { background: #f0f1f4; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,22,35,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 16px; overflow: auto; z-index: 100;
}
.modal {
  background: var(--panel);
  border-radius: var(--radius);
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.modal.modal-sm { max-width: 440px; }
.modal.modal-lg { max-width: 1000px; }
.modal.modal-xl { max-width: 1160px; padding: 18px 30px; }
.modal-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-xl .modal-header { margin-bottom: 10px; }
/* flex + space-between: cuando el title de openModal() trae mas de una
   parte (ej. "Cotizacion" + badge del numero), la primera queda pegada al
   texto y el resto se empuja a la derecha, contra el boton de cerrar. Con
   un title de un solo string (el caso normal) no cambia nada visualmente
   -- no hay nada que "espaciar" entre un unico elemento. */
.modal-header h3 { margin: 0; font-size: 16px; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding-right: 14px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }

.confirm-modal-backdrop { align-items: center; z-index: 200; }
.confirm-modal {
  background: var(--panel); border-radius: 14px; padding: 32px 28px; width: 100%;
  max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.confirm-modal-icon {
  width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--primary);
  color: var(--primary); font-size: 28px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 18px;
}
.confirm-modal h3 { margin: 0 0 8px; font-size: 19px; }
.confirm-modal p { margin: 0 0 22px; color: var(--text-muted); font-size: 13.5px; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-modal-actions .btn { min-width: 120px; justify-content: center; }

/* ---------- Items editor (comprobantes/cotizaciones/pedidos) ---------- */
table.items-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 10px 0; }
table.items-table th, table.items-table td { padding: 6px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
table.items-table th { background: #e6ecfc; color: var(--primary-hover); font-weight: 700; }
table.items-table select, table.items-table input { width: 100%; padding: 5px 6px; border: 1px solid var(--border); border-radius: 5px; }
table.items-table .col-actions { width: 36px; }

.pct-field { position: relative; }
.pct-field input { padding-right: 20px !important; -moz-appearance: textfield; }
.pct-field input::-webkit-outer-spin-button, .pct-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-suffix {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--text-muted); pointer-events: none;
}

.producto-buscador { position: relative; min-width: 180px; }
table.items-table .producto-buscador input { padding: 9px 10px; font-size: 13.5px; }
.producto-buscador-lista {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 20px rgba(20,20,40,.12); max-height: 220px; overflow-y: auto;
}
.producto-buscador-item {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; cursor: pointer; font-size: 12.5px;
}
.producto-buscador-item:hover { background: #f0f1f4; }
.producto-buscador-item .nombre { font-weight: 600; }
.producto-buscador-item .codigo { font-size: 11px; color: var(--text-muted); }
.producto-buscador-empty { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

.totals-box { text-align: right; margin-top: 8px; font-size: 14px; }
.totals-box strong { font-size: 16px; }

/* ---------- Emision de comprobante (modal) ---------- */
.emision-form .form-grid { margin-bottom: 4px; }
.items-panel { margin-top: 4px; padding: 14px 16px; }
.items-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.items-panel-header h3 { margin: 0; }
.items-panel-add {
  display: flex; align-items: center; gap: 5px; padding: 6px 12px;
  background: #eef1ff; border: 1px solid #d7ddfb; color: var(--primary);
  border-radius: 8px; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.items-panel-add:hover { background: #dfe4fe; }
.items-panel table.items-table { margin: 0 0 12px; }
.emision-totals { max-width: 300px; margin-left: auto; padding-top: 8px; border-top: 1px dashed var(--border); }

/* ---------- Toasts ---------- */
/* Arriba al centro (no a la derecha): ahi tapaban los botones de accion del
   encabezado (ej. "+ Nuevo"). Varios avisos seguidos van uno al lado del otro,
   en una sola linea, en vez de apilarse hacia abajo sobre el contenido. */
.toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90vw; gap: 8px; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  padding: 9px 18px 9px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 90vw;
  box-shadow: 0 8px 24px rgba(31,36,48,.14), 0 1px 3px rgba(31,36,48,.08);
  animation: toast-entra .22s ease-out;
}
.toast.toast-saliendo { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.toast-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--primary);
}
.toast-texto { overflow: hidden; text-overflow: ellipsis; }
.toast.toast-success { border-color: #bfe8d1; }
.toast.toast-success .toast-icon { background: var(--success); }
.toast.toast-error { border-color: #f3caca; border-radius: 14px; white-space: normal; max-width: min(90vw, 560px); }
.toast.toast-error .toast-icon { background: var(--danger); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- Misc ---------- */
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.mt-16 { margin-top: 16px; }
.form-hint { font-size: 12.5px; color: var(--text-muted); margin: -8px 0 12px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 3px rgba(16,18,32,.04); }
.stat-card .label { color: var(--text-muted); font-size: 12.5px; margin-bottom: 6px; }
.stat-card .value { font-size: 22px; font-weight: 700; }

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

/* ---------- Inicio: KPIs del dia/mes + accesos rapidos ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.kpi-card { border-radius: 10px; padding: 8px 12px; color: #fff; }
.kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.kpi-label { font-size: 11px; font-weight: 600; opacity: .92; }
.kpi-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.kpi-valor { font-size: 16px; font-weight: 700; margin-bottom: 1px; }
.kpi-nota { font-size: 9.5px; opacity: .85; }
.kpi-verde { background: linear-gradient(135deg, #1a9c5b, #16824c); }
.kpi-azul { background: linear-gradient(135deg, #2952e3, #1c3fc0); }
.kpi-naranja { background: linear-gradient(135deg, #e07b1f, #c8620c); }
.kpi-morado { background: linear-gradient(135deg, #7c3aed, #6023c0); }
.kpi-rojo { background: linear-gradient(135deg, #dc4c4c, #b02e2e); }

.kpi-groups { display: flex; flex-direction: column; gap: 16px; }
.kpi-group-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.kpi-groups-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.kpi-groups-row .kpi-group { min-width: 0; }
.kpi-groups-row .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Grid explicito (no auto-fit): asi las 3 donas quedan en columnas del
   EXACTO mismo ancho pase lo que pase, y la columna de tarjetas queda fija
   y angosta aparte -- con auto-fit, el panel de SUNAT quedaba mas angosto
   que los otros dos porque compartia su columna con las tarjetas. */
.documentos-emitidos-row { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)) 140px; gap: 16px; align-items: stretch; }
.documentos-emitidos-row .panel { display: flex; flex-direction: column; margin-bottom: 0; }
/* flex-start (no center): el donut debe arrancar a la MISMA altura en las 3
   tarjetas -- si se centra el bloque completo (donut+leyenda), una leyenda
   de 2 lineas (Tipo de comprobante) empuja su donut mas arriba que las
   leyendas de 1 linea de las otras dos, desalineando los 3 anillos entre si. */
.documentos-emitidos-row .donut-chart-wrap { flex: 1; justify-content: flex-start; }
@media (max-width: 900px) {
  .documentos-emitidos-row { grid-template-columns: repeat(2, 1fr); }
  .documentos-emitidos-row .sunat-donut-cards-mini { grid-column: span 2; flex-direction: row; }
}

.sunat-donut-cards-mini { display: flex; flex-direction: column; gap: 8px; }
.sunat-donut-cards-mini .kpi-soft-card {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 7px 9px; border-radius: 8px;
}
.sunat-donut-cards-mini .kpi-valor { font-size: 14px; }
.sunat-donut-cards-mini .kpi-label { font-size: 10px; }
.sunat-donut-cards-mini .kpi-nota { font-size: 8.5px; }
.sunat-donut-cards-mini .kpi-icon { width: 24px; height: 24px; font-size: 11px; }

/* ---------- Variante "suave" (fondo pastel) -- paneles con muchas tarjetas juntas (Reporte de Ventas y Compras) ---------- */
.kpi-soft-card { border-radius: 10px; padding: 8px 12px; border: 1px solid transparent; }
.kpi-soft-card .kpi-icon { background: rgba(0,0,0,.07); }
.kpi-soft-card .kpi-nota { opacity: .75; }
.kpi-soft-verde { background: #e7f7ee; border-color: #cdeedd; color: #16824c; }
.kpi-soft-azul { background: #e8edfd; border-color: #d2dbfa; color: #1c3fc0; }
.kpi-soft-morado { background: #f1ebfe; border-color: #e1d3fc; color: #6023c0; }
.kpi-soft-rosa { background: #fdeaf1; border-color: #fad0e2; color: #c23a6e; }
.kpi-soft-naranja { background: #fdf1e3; border-color: #fbe0bd; color: #c8620c; }
.kpi-soft-teal { background: #e3f6f4; border-color: #c3ece7; color: #0f7d72; }
.kpi-soft-amarillo { background: #fdf8e3; border-color: #f8ecb8; color: #92720c; }
.kpi-soft-rojo { background: #fdecec; border-color: #f8caca; color: #c23a3a; }

.kpi-trend { font-size: 10px; font-weight: 700; margin-top: 5px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 100px; width: fit-content; }
.kpi-trend.up { background: rgba(26,156,91,.12); color: #16824c; }
.kpi-trend.down { background: rgba(198,58,58,.12); color: #c23a3a; }

.accesos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.acceso-card {
  display: block; width: 100%; text-align: left; border: none; font: inherit; cursor: pointer;
  border-radius: 14px; padding: 18px; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.acceso-card,
.acceso-card:hover,
.acceso-card:focus,
.acceso-card:active,
.acceso-card:visited { text-decoration: none; color: var(--text); }
.acceso-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,20,40,.08); }
.acceso-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acceso-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.acceso-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; flex-shrink: 0; }
.acceso-badge {
  display: inline-block; background: #fff; color: var(--primary); font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--border); cursor: pointer;
}
.acceso-badge,
.acceso-badge:hover,
.acceso-badge:focus,
.acceso-badge:active,
.acceso-badge:visited { text-decoration: none; color: var(--primary); }
.acceso-badge:hover { background: #f5f6fa; }
.acceso-titulo { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.acceso-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.acceso-verde { background: #e8f8ef; }
.acceso-verde .acceso-icon { background: var(--success); }
.acceso-azul { background: #e8edfd; }
.acceso-azul .acceso-icon { background: var(--primary); }
.acceso-rosa { background: #fdeaf1; }
.acceso-rosa .acceso-icon { background: #d6336c; }
.acceso-morado { background: #f1e9fd; }
.acceso-morado .acceso-icon { background: #7c3aed; }
.acceso-naranja { background: #fdf1e3; }
.acceso-naranja .acceso-icon { background: #e07b1f; }
.acceso-gris { background: #eceef2; }
.acceso-gris .acceso-icon { background: #4b5261; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tabs button { background: none; border: none; padding: 9px 14px; cursor: pointer; font-size: 13.5px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }

/* Encabezado de resumen del modulo Empresa: nombre/RUC + estado de un
   vistazo (ambiente, certificado) sin tener que abrir cada panel. */
.empresa-summary {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(16,18,32,.04);
}
.empresa-summary-logo { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #f5f6fa; border: 1px solid var(--border); padding: 4px; flex-shrink: 0; }
.empresa-summary-logo-placeholder {
  width: 52px; height: 52px; border-radius: 10px; background: #e8edfd; color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.empresa-summary-id { min-width: 180px; flex: 1 1 auto; }
.empresa-summary-id h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.empresa-summary-id .ruc { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.empresa-summary-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }

/* Modulo Empresa reorganizado en pestañas: cada grupo de paneles vive en
   un bloque que se oculta con [hidden] en vez de desmontarse -- evita
   volver a pedir datos a la API solo por cambiar de pestaña. */
.empresa-tab-panel[hidden] { display: none; }
pre.json-block { background: #171b2b; color: #d6dcff; padding: 14px; border-radius: 6px; overflow: auto; font-size: 12px; }
.empresa-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.empresa-picker button { text-align: left; padding: 10px 14px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-lg { display: inline-block; width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 200px; color: var(--text-muted); font-size: 13px; }

/* ---------- Guia de importacion CSV (Productos) ---------- */
.mono { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }

.csv-sheet-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.csv-sheet-scroll { overflow-x: auto; }
table.csv-sheet { border-collapse: collapse; width: 100%; min-width: 900px; }
table.csv-sheet td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 9px; font-size: 12px; white-space: nowrap; text-align: left; }
table.csv-sheet .corner, table.csv-sheet .col-letter, table.csv-sheet .row-num { background: #f4f5f7; color: var(--text-muted); text-align: center; font-weight: 700; font-size: 10.5px; }
table.csv-sheet tr.header-row td:not(.row-num) { background: var(--warning-bg); color: var(--warning); font-weight: 800; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
table.csv-sheet tbody tr:nth-child(even) td:not(.row-num) { background: #fafbfc; }
.csv-sheet-caption { padding: 10px 14px; margin: 0; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border); }

.csv-col-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.csv-col-row { display: grid; grid-template-columns: 150px 80px 1fr; gap: 12px; align-items: start; background: var(--panel); padding: 10px 14px; }
.csv-col-row .col-desc { font-size: 12.5px; }
.csv-col-row .example { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 620px) { .csv-col-row { grid-template-columns: 1fr; } }

/* ---------- POS (Venta rapida) ---------- */
.pos-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } }
/* Sin esto, en pantallas angostas el contenido ancho de un panel estira la columna y la pagina se sale por la derecha. */
.pos-layout > * { min-width: 0; }

.lista-simple { display: flex; flex-direction: column; gap: 8px; }
.lista-simple-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }

/* ---------- Ranking (Dashboard del vendedor: clientes/productos top) ---------- */
.rank-fila { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.rank-fila:last-child { border-bottom: none; }
.rank-pos { font-size: 16px; width: 26px; flex-shrink: 0; text-align: center; }
.rank-info { flex: 1; min-width: 0; }
.rank-nombre { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.rank-bar-track { height: 5px; background: var(--border); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.rank-bar-fill { height: 100%; border-radius: 3px; }
.rank-bar-fill.azul { background: var(--primary); }
.rank-bar-fill.naranja { background: var(--warning); }
.rank-monto { font-weight: 700; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }

.dash-empty-mini { text-align: center; padding: 28px 12px; color: var(--text-muted); }
.dash-empty-mini .icono { font-size: 26px; opacity: .35; margin-bottom: 6px; }
.dash-empty-mini p { margin: 0; font-size: 12.5px; }

.pos-search-wrap { position: relative; }
.pos-search-wrap input { padding-left: 34px !important; }
.pos-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none; }

/* Fila de categorias: chips en una sola linea desplazable + boton "Todas" que
   abre la lista completa. */
.pos-cat-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pos-categorias { display: flex; gap: 8px; flex: 1; min-width: 0; padding: 2px; }
.pos-chip {
  flex: 0 1 auto; min-width: 0; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, border-color .12s, color .12s;
}
.pos-chip:hover { background: #f0f1f4; border-color: #cfd3dc; }
.pos-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-todas-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
  border-radius: 10px; border: 1px solid var(--primary); background: var(--panel);
  color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pos-todas-btn:hover { background: #eef2fd; }
.pos-todas-btn span { display: inline-flex; }

/* Lista completa de categorias (modal del boton "Todas"). */
.pos-cat-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.pos-cat-modal-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel);
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.pos-cat-modal-item .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cat-modal-item .cantidad {
  flex-shrink: 0; min-width: 24px; padding: 1px 8px; border-radius: 100px; text-align: center;
  background: #eef0f4; color: var(--text-muted); font-size: 11px; font-weight: 700;
}
.pos-cat-modal-item:hover { background: #f0f1f4; }
.pos-cat-modal-item.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pos-cat-modal-item.active .cantidad { background: rgba(255,255,255,.24); color: #fff; }

/* Buscador + lector de codigo de barras + vista tarjetas/lista. */
.pos-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pos-search { position: relative; flex: 1; min-width: 0; }
.pos-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: inline-flex; pointer-events: none; }
.pos-search input { width: 100%; padding: 11px 14px 11px 42px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: var(--panel); }
.pos-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41,82,227,.12); }
.pos-scan-btn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pos-scan-btn:hover { background: #eef2fd; border-color: var(--primary); color: var(--primary); }
.pos-vista-toggle { display: inline-flex; flex-shrink: 0; padding: 3px; gap: 3px; border-radius: 12px; background: #eef0f4; border: 1px solid var(--border); }
.pos-vista-btn {
  width: 38px; height: 36px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.pos-vista-btn.active { background: var(--primary); color: #fff; }

/* Vista de lista: una fila por producto (miniatura, nombre/codigo/stock, precio). */
.pos-grid.lista { grid-template-columns: 1fr; gap: 8px; }
.pos-grid.lista .pos-product-card { height: 68px; flex-direction: row; align-items: stretch; border-radius: 10px; }
.pos-grid.lista .pos-product-img { width: 68px; height: 100%; flex-shrink: 0; }
.pos-grid.lista .pos-product-img .icon-placeholder { font-size: 24px; }
.pos-grid.lista .pos-product-body { flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px; flex-wrap: nowrap; }
.pos-grid.lista .pos-product-nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; display: block; }
.pos-grid.lista .pos-product-meta { margin-top: 0; flex-shrink: 0; }
.pos-grid.lista .pos-product-precio { margin-top: 0; padding-top: 0; flex-shrink: 0; min-width: 84px; text-align: right; }

/* ---------- Chips de periodo (Hoy/Ayer/Semana/Mes anterior) -- Reportes >
   Ventas y Comprobantes. Mismo ancho para todos (no importa el largo del
   texto) y un color propio por chip, para que se identifiquen de un vistazo
   y no una fila pareja pero sosa. ---------- */
.periodo-chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters-bar .periodo-chips-row { margin-bottom: 0; }
.periodo-chip {
  min-width: 104px; text-align: center; padding: 7px 14px; border-radius: 100px;
  border: 1.5px solid transparent; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.periodo-chip:hover { transform: translateY(-1px); }
.periodo-chip:active { transform: translateY(0); }

.periodo-chip-hoy { background: #e3f7ea; color: #16824c; }
.periodo-chip-hoy.active { background: linear-gradient(135deg, #1a9c5b, #16824c); color: #fff; box-shadow: 0 3px 10px rgba(26,156,91,.35); }

.periodo-chip-ayer { background: #e8edfd; color: #1c3fc0; }
.periodo-chip-ayer.active { background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff; box-shadow: 0 3px 10px rgba(41,82,227,.35); }

.periodo-chip-semana { background: #fdf0e3; color: #b3651a; }
.periodo-chip-semana.active { background: linear-gradient(135deg, #e08a2e, #b3651a); color: #fff; box-shadow: 0 3px 10px rgba(179,101,26,.35); }

.periodo-chip-mes_actual { background: #f1ebfe; color: #6023c0; }
.periodo-chip-mes_actual.active { background: linear-gradient(135deg, #8b4fe0, #6023c0); color: #fff; box-shadow: 0 3px 10px rgba(96,35,192,.35); }

.periodo-chip-mes_anterior { background: #e3f6f4; color: #0f7d72; }
.periodo-chip-mes_anterior.active { background: linear-gradient(135deg, #14a396, #0f7d72); color: #fff; box-shadow: 0 3px 10px rgba(15,125,114,.35); }

@media (max-width: 560px) { .periodo-chip { min-width: 0; flex: 1 1 calc(50% - 8px); } }

.pos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px;
  max-height: calc(100vh - 340px); min-height: 200px; overflow-y: auto; padding: 4px 6px 4px 2px;
}
.pos-product-card {
  /* Alto fijo (no solo min-height): con grid, una fila con una tarjeta mas
     alta solo estira a las de ESA fila -- un alto fijo por tarjeta es lo
     unico que garantiza el mismo tamano en TODA la grilla, no fila por fila. */
  height: 240px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; user-select: none;
}
.pos-product-card:hover { box-shadow: 0 6px 16px rgba(20,20,40,.1); transform: translateY(-2px); border-color: #d5d9e6; }
.pos-product-card:active { transform: scale(.96); }
.pos-product-img {
  width: 100%; height: 130px; flex-shrink: 0;
  background: linear-gradient(135deg, #f4f5f8, #e9ebf1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Las fotos de producto ya traen fondo blanco -- se pisa el degradado gris
   del placeholder para que la foto se funda con la tarjeta en vez de verse
   con un marco gris alrededor. */
.pos-product-img.tiene-foto { background: #fff; }
.pos-product-img .icon-placeholder { font-size: 34px; opacity: .4; }
.pos-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pos-product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pos-product-nombre {
  font-size: 13px; font-weight: 650; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pos-product-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.pos-product-codigo { font-size: 10.5px; color: var(--text-muted); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-product-meta .badge { font-size: 10.5px; padding: 3px 8px; flex-shrink: 0; }
.pos-product-precio { font-size: 17.5px; font-weight: 800; color: var(--primary); margin-top: auto; padding-top: 5px; }

.pos-cliente-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; background: #f7f8fa; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 14px; font-size: 12.5px;
}

.pos-cart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pos-cart-list {
  max-height: calc(100vh - 430px); min-height: 90px; overflow-y: auto;
  padding-right: 2px; margin-right: -2px;
}
.pos-cart-vaciar {
  background: none; border: none; color: var(--danger); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 4px 6px; display: flex; align-items: center; gap: 3px;
}
.pos-cart-vaciar:hover { text-decoration: underline; }

.pos-cart-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
  margin-bottom: 8px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.pos-cart-icon {
  width: 38px; height: 38px; border-radius: 8px; background: #f4f5f7;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.pos-cart-info { flex: 1; min-width: 0; }
.pos-cart-info .nombre { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-info .detalle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; margin-bottom: 6px; }
.pos-cart-badge {
  min-width: 30px; text-align: center; padding: 4px 8px; font-size: 12.5px; font-weight: 600;
  color: var(--primary); background: #e8edfd; border-radius: 7px; flex-shrink: 0;
}
.pos-qty { display: flex; align-items: center; gap: 8px; }
.pos-qty button {
  width: 24px; height: 24px; border-radius: 6px; border: none; color: #fff;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.pos-qty button:first-child { background: #1a1a1a; }
.pos-qty button:first-child:hover { background: #000; }
.pos-qty button:last-child { background: var(--primary); }
.pos-qty button:last-child:hover { background: #1c3fc0; }
.pos-qty span {
  min-width: 28px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 0; background: #fff;
}

.pos-manual-btn {
  display: block; width: 100%; text-align: center; padding: 10px; margin: 4px 0 12px;
  background: #fdf6e3; border: 1px dashed #d9b84a; color: #92700c;
  border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.pos-manual-btn:hover { background: #fbeecb; }

.pos-totals { padding-top: 6px; border-top: 1px solid var(--border); }
.pos-totals-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); padding: 3px 0; }
.pos-totals-row.total { font-size: 17px; font-weight: 700; color: var(--text); padding-top: 6px; }

/* ---------- Modal "Procesar pago" ---------- */
.pos-doc-row .btn, .pos-medio-row .btn { padding: 6px 8px; border-radius: 8px; font-size: 12px; flex: 0 1 auto; }
.pos-doc-row { flex-wrap: nowrap !important; }
.pos-medio-row .btn {
  justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 11.5px; gap: 5px;
}
.pos-serie-info { margin-top: 6px; font-size: 13px; color: var(--text); font-weight: 700; }
.pos-pago-resumen { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pos-pago-resumen > * { border-radius: 10px; padding: 9px 14px; }
.pos-pago-resumen .label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pos-pago-resumen .valor { font-size: 20px; font-weight: 800; margin-top: 4px; }

.pos-pago-campo { background: #f7f8fa; border: 1.5px solid var(--border); transition: border-color .12s ease, box-shadow .12s ease; }
.pos-pago-campo:focus-within { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); background: #fff; }
.pos-pago-campo input { font-size: 16px; font-weight: 700; border: none; background: none; padding: 0; width: 100%; }
.pos-pago-campo input:focus { outline: none; }

.pos-pago-vuelto { display: flex; align-items: center; justify-content: space-between; }
.pos-pago-vuelto.positivo { background: #fdf3d9; color: #92600a; }
.pos-pago-vuelto.negativo { background: var(--danger-bg); color: var(--danger); }
.pos-pago-vuelto.exacto { background: var(--success-bg); color: var(--success); justify-content: center; }
.pos-pago-vuelto .label { opacity: .85; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pos-pago-vuelto .valor { font-size: 16px; font-weight: 800; margin-top: 0; }

.pos-pago-total {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff;
}
.pos-pago-total .label { opacity: .85; }
.pos-pago-total .valor { font-size: 22px; margin-top: 0; }

.pos-btn-cobrar {
  flex: 1 1 auto; background: linear-gradient(135deg, #2952e3, #1c3fc0); color: #fff;
  border: none; border-radius: 10px; padding: 12px 22px; font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(28,63,192,.3); transition: transform .12s ease, box-shadow .12s ease;
}
.pos-btn-cobrar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(28,63,192,.38); }
.pos-btn-cobrar:active { transform: translateY(0); }
.pos-btn-cobrar:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.pos-cobrar-btn {
  width: 100%; justify-content: center; padding: 13px; font-size: 15px; border-radius: 10px;
  margin-top: 10px; background: var(--primary); border-color: var(--primary); color: #fff;
}
.pos-cobrar-btn:hover:not(:disabled) { background: #1c3fc0; }
.pos-cobrar-btn:disabled { background: #aebbf0; border-color: #aebbf0; color: #fff; cursor: not-allowed; }

.pos-flash { animation: pos-flash-anim .5s ease; }
@keyframes pos-flash-anim { 0% { box-shadow: 0 0 0 2px var(--primary); } 100% { box-shadow: none; } }

/* ---------- Cotizaciones: buscador de productos (reemplaza el <select>
   nativo gigante) + items en formato carrito, mismo lenguaje visual que el
   POS (.pos-cart-item/.pos-qty) para que se sienta familiar. ---------- */
.cot-buscador { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; position: relative; }
.cot-buscador-input-wrap { position: relative; flex: 1; min-width: 0; }
.cot-buscador-input-wrap input {
  width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 14px; background: var(--panel);
}
.cot-buscador-input-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41,82,227,.12); }
.cot-buscador-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.cot-buscador-scan, .cot-buscador-nuevo {
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: #fff;
  font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.cot-buscador-scan:hover, .cot-buscador-nuevo:hover { background: #f4f5f7; }

.cot-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,.14); max-height: 320px; overflow-y: auto; padding: 6px;
}
.cot-resultado-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; border: none; background: none; width: 100%; text-align: left;
}
.cot-resultado-item:hover, .cot-resultado-item:focus { background: #f4f5f7; outline: none; }
.cot-resultado-nombre { font-size: 13.5px; font-weight: 650; color: var(--text); }
.cot-resultado-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.cot-resultado-precio { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0; }
.cot-resultado-vacio { padding: 14px 10px; text-align: center; font-size: 13px; color: var(--text-muted); }
.cot-resultado-vacio .btn { margin-top: 8px; }

.cot-items-vacio { text-align: center; padding: 32px 10px; color: var(--text-muted); }
.cot-items-vacio .ico { font-size: 34px; margin-bottom: 6px; }

.cot-item-row {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap;
}
.cot-item-info { flex: 1 1 180px; min-width: 0; }
.cot-item-nombre { font-size: 13.5px; font-weight: 650; }
.cot-item-precio-unit { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cot-item-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cot-item-qty button {
  width: 26px; height: 26px; border-radius: 7px; border: none; color: #fff; cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.cot-item-qty button:first-child { background: #1a1a1a; }
.cot-item-qty button:first-child:hover { background: #000; }
.cot-item-qty button:last-child { background: var(--primary); }
.cot-item-qty button:last-child:hover { background: #1c3fc0; }
.cot-item-qty input {
  width: 56px; text-align: center; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 2px;
}
.cot-item-precio-edit { width: 76px; text-align: right; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; flex-shrink: 0; }
.cot-item-subtotal { width: 86px; text-align: right; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.cot-item-quitar {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--danger);
  cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.cot-item-quitar:hover { background: var(--danger-bg); border-color: var(--danger); }

.cot-totales { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: #f7f8fa; border: 1px solid var(--border); }
.cot-totales-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); padding: 3px 0; }
.cot-totales-row.total {
  font-size: 19px; font-weight: 800; color: var(--text); padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--border);
}

/* ---------- Cotizaciones: version compacta de .form-field/.form-grid para
   los formularios de datos del cliente -- de a 2 columnas las cajas de
   texto quedaban enormes y vacias en el modal ancho; 3 columnas + padding
   mas chico (mismo criterio que .modal-xl) se ve mas prolijo y profesional
   sin perder legibilidad. ---------- */
.cot-form-compacta .form-grid { gap: 10px; }
.cot-form-compacta .form-field { gap: 3px; }
.cot-form-compacta .form-field label { font-size: 11.5px; }
.cot-form-compacta .form-field input:not([type="checkbox"]):not([type="radio"]), .cot-form-compacta .form-field select {
  padding: 6px 9px;
  font-size: 12.5px;
}
@media (max-width: 760px) {
  .cot-form-compacta .form-grid.cols-3, .cot-form-compacta .form-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .cot-form-compacta .form-grid.cols-3, .cot-form-compacta .form-grid.cols-4 { grid-template-columns: 1fr; }
}

/* Filas Nombre/Correo/Telefono(/Valida hasta): anchos distintos en vez de
   columnas iguales -- el correo necesita mas espacio, el telefono entra
   comodo bastante mas angosto. */
.cot-fila-contacto { grid-template-columns: 1fr 1.3fr 0.75fr; }
.cot-fila-contacto-4 { grid-template-columns: 1fr 1.3fr 0.75fr 0.9fr; }
@media (max-width: 760px) {
  .cot-fila-contacto, .cot-fila-contacto-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .cot-fila-contacto, .cot-fila-contacto-4 { grid-template-columns: 1fr; }
}

/* ---------- Catalogo de Preventa: mismos componentes del POS, pero mas
   grandes -- pensado para usarse con el dedo en un celular, no con mouse. */
.preventa-touch .pos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.preventa-touch .pos-product-card { height: auto; min-height: 195px; }
.preventa-touch .pos-product-precio { font-size: 19px; }
.preventa-touch .pos-chip { padding: 10px 18px; font-size: 14px; }
.preventa-touch .pos-qty button { width: 38px; height: 38px; font-size: 19px; border-radius: 9px; }
.preventa-touch .pos-qty span { min-width: 36px; font-size: 15px; padding: 7px 0; }
.preventa-touch .pos-cart-icon { width: 44px; height: 44px; font-size: 19px; }
.preventa-touch .pos-cliente-box { padding: 12px 14px; font-size: 13.5px; }
.preventa-touch .pos-cliente-box .btn, .preventa-touch .pos-cobrar-btn { min-height: 44px; }
.preventa-touch .pos-cart-vaciar { font-size: 13.5px; padding: 8px; }
@media (max-width: 480px) {
  .preventa-touch .pos-grid { grid-template-columns: repeat(2, 1fr); max-height: none; }
}

.caja-abrir-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.caja-abrir-row .caja-monto-campo { flex: 1 1 200px; max-width: 240px; }
.caja-abrir-row .form-field { flex: 1 1 160px; }
.caja-abrir-row textarea { min-height: 52px; height: 52px; }

.caja-monto-campo {
  background: var(--success-bg);
  border: 1px solid #b9ecd3;
  border-radius: 10px;
  padding: 12px 16px;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.caja-monto-campo:focus-within { border-color: var(--success); box-shadow: 0 0 0 3px rgba(26,156,91,.14); }
.caja-monto-label { font-size: 11px; font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.caja-monto-input-wrap { display: flex; align-items: center; gap: 6px; }
.caja-monto-symbol { font-size: 20px; font-weight: 800; color: var(--text); }
.caja-monto-input-wrap input {
  border: none; background: none; padding: 0; outline: none;
  font-size: 20px; font-weight: 800; color: var(--text); width: 100%;
}

.caja-estado-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.caja-estado-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.caja-estado-tag.abierta { color: var(--success); background: var(--success-bg); }
.caja-estado-tag.abierta .dot { background: var(--success); }
.caja-estado-tag.cerrada { color: var(--danger); background: var(--danger-bg); }
.caja-estado-tag.cerrada .dot { background: var(--danger); }

/* ---------- Dashboard (por empresa) ---------- */
.dash-header {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #171b2b, #262c49);
  color: #fff; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px;
}
.dash-header .dash-logo {
  width: 52px; height: 52px; border-radius: 10px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: 22px;
}
.dash-header .dash-logo img { width: 100%; height: 100%; object-fit: cover; }
.dash-header .dash-title { flex: 1; min-width: 0; }
.dash-header h2 { margin: 0 0 3px; font-size: 19px; color: #fff; }
.dash-header .dash-sub { font-size: 12.5px; color: #aab2d5; }
.dash-header .dash-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-header .badge-pill {
  padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.12); color: #fff; white-space: nowrap;
}
.dash-header .badge-pill.on { background: var(--success); }
.dash-header .badge-pill.off { background: var(--danger); }

.dash-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .dash-two-col { grid-template-columns: 1fr; } }

.dash-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0 0; }

.dash-chart-wrap { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding-top: 10px; }
.dash-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dash-chart-bar { width: 100%; max-width: 22px; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 3px; transition: opacity .12s; }
.dash-chart-bar:hover { opacity: .75; }
.dash-chart-day { font-size: 10px; color: var(--text-muted); margin-top: 5px; white-space: nowrap; }
.dash-chart-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 30px 0; }

.dash-alerts { display: flex; flex-direction: column; gap: 8px; }
.dash-alert-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--panel);
  transition: box-shadow .15s ease, transform .15s ease;
}
.dash-alert-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.dash-alert-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.dash-alert-icon.severity-danger { background: var(--danger-bg); }
.dash-alert-icon.severity-warning { background: var(--warning-bg); }
.dash-alert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dash-alert-empresa { font-weight: 700; font-size: 13.5px; }
.dash-alert-motivos { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-alert-ok { display: flex; align-items: center; gap: 10px; padding: 14px 12px; color: var(--success); font-size: 13.5px; }

.dash-mini-table { display: flex; flex-direction: column; }
.dash-mini-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dash-mini-row:last-child { border-bottom: none; }
.dash-mini-rank {
  width: 22px; height: 22px; border-radius: 50%; background: #eceef2; color: var(--text-muted);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-mini-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-mini-sub { font-size: 11px; color: var(--text-muted); }
.dash-mini-value { font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ---------- Reportes > Ventas: desglose por tipo de documento ---------- */
.tipo-venta-barra {
  display: flex; width: 100%; height: 16px; border-radius: 8px; overflow: hidden;
  background: #eceef2; margin-bottom: 14px;
}
.tipo-venta-barra > div { height: 100%; min-width: 2px; }
.tipo-venta-leyenda { display: flex; flex-direction: column; gap: 8px; }
.tipo-venta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tipo-venta-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tipo-venta-item .nombre { flex: 1; min-width: 0; font-weight: 600; }
.tipo-venta-item .cant { color: var(--text-muted); font-size: 12px; }
.tipo-venta-item .monto { font-weight: 700; min-width: 90px; text-align: right; }

/* ---------- Donut chart (SVG) reutilizable ---------- */
.donut-charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .donut-charts-row { grid-template-columns: 1fr; } }

.top-lists-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.top-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.top-list-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.top-list-item:last-child { border-bottom: none; }
.top-list-rank { color: var(--text-muted); font-weight: 700; font-size: 11.5px; width: 22px; flex-shrink: 0; }
.top-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list-value { font-weight: 600; flex-shrink: 0; }

.reporte-cabecera-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.donut-chart-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.donut-chart-wrap svg circle { transition: stroke-width .15s ease; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; }
.donut-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.donut-legend-item .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.panel-sub { font-size: 12px; color: var(--text-muted); margin-top: -8px; margin-bottom: 4px; }

/* ---------- Libros Electronicos ---------- */
.libros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 16px 0 20px; }
.libro-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.libro-card-head { display: flex; align-items: center; gap: 12px; }
.libro-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.libro-card-icon-ventas { background: #e5edff; }
.libro-card-icon-compras { background: #fdeade; }
.libro-card-title { font-size: 15px; font-weight: 700; }
.libro-card-sub { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.libro-card-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 12px 0 16px; }
.libro-card-form .form-grid { margin-bottom: 0; }
.libro-periodo-input { max-width: 160px; }
.libro-tipo-cell { display: flex; align-items: center; gap: 10px; }
.libro-tipo-icono { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.libro-tipo-ventas { background: #e5edff; }
.libro-tipo-compras { background: #fdeade; }
.evolucion-chart-wrap { position: relative; height: 300px; margin-top: 10px; }

/* Tarjeta KPI con titulo, valor y nota centrados (Kardex); el icono queda en
   la esquina para no correr el texto. */
.kpi-card-centrado { text-align: center; position: relative; }
.kpi-card-centrado .kpi-card-top { justify-content: center; }
.kpi-card-centrado .kpi-label { padding: 0 30px; }
.kpi-card-centrado .kpi-icon { position: absolute; top: 8px; right: 12px; }

/* ---------- Vista de tarjetas del CRUD (Productos) ---------- */
.crud-toolbar-busqueda { margin-bottom: 18px; }
.crud-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.crud-card {
  position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  overflow: hidden; transition: box-shadow .12s ease, border-color .12s ease;
}
.crud-card:hover { box-shadow: 0 6px 16px rgba(20,20,40,.1); border-color: #d5d9e6; }
.crud-card-inner { display: flex; flex-direction: column; height: 100%; }
.crud-card-inner.inactivo { opacity: .6; }
.crud-card-img {
  height: 130px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, #f4f5f8, #e9ebf1);
}
.crud-card-img.tiene-foto { background: #fff; }
.crud-card-img .icon-placeholder { font-size: 34px; opacity: .4; }
.crud-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.crud-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crud-card-nombre {
  font-size: 13px; font-weight: 700; line-height: 1.3; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crud-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); }
.crud-card-codigo { font-weight: 600; letter-spacing: .02em; flex-shrink: 0; }
.crud-card-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crud-card-precios { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding-top: 6px; border-top: 1px dashed var(--border); }
.crud-card-precios > div { display: flex; flex-direction: column; gap: 1px; }
.crud-card-precios .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.crud-card-precios strong { color: var(--primary); font-size: 15px; }
.crud-card-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.crud-card-menu {
  position: absolute; top: 8px; right: 8px; z-index: 1; border-radius: 8px;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(20,20,40,.18);
}

/* ---------- Celular: barra superior y POS sin amontonar ---------- */
@media (max-width: 640px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-left { gap: 8px; }
  .topbar-right { gap: 6px; }
  /* Soporte tambien esta en el menu del usuario; aca solo ocupaba lugar. */
  .topbar .btn-soporte { display: none; }
  .topbar-ambiente-slot { margin: 0; }
  .topbar .ambiente-toggle-label { display: none; }
  .user-menu-trigger .nombre, .user-menu-trigger .chevron { display: none; }
  .user-menu-trigger { padding: 3px; }
  .topbar .btn-primary.btn-sm { white-space: nowrap; padding: 7px 10px; }
  .content { padding: 14px; }

  /* Categorias del POS: solo "Todas" + la categoria activa + el boton
     "Categorias" (el resto se elige ahi) -- cuatro botones apretados en una
     fila de 390 px quedaban cortados ("To", "AE", "CO"). */
  .pos-cat-row { gap: 8px; }
  .pos-categorias .pos-chip:not(.active):not(:first-child) { display: none; }
  .pos-chip, .pos-todas-btn { padding: 9px 12px; }
}
@media (max-width: 640px) {
  /* Dos productos por fila y sin recuadro con scroll propio: se desplaza la pagina. */
  .pos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: none; overflow: visible; padding: 2px; }
  .pos-product-card { height: 205px; }
  .pos-product-img { height: 100px; }
  .pos-product-nombre { font-size: 12px; }
  .pos-product-precio { font-size: 15.5px; }
}
@media (max-width: 640px) {
  .crud-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .crud-card-img { height: 96px; }
  .crud-card-nombre { font-size: 12px; }
}

/* ---------- POS: venta por peso / medida (kg, m, L) ---------- */
.pos-medida-info { margin-bottom: 12px; }
.pos-medida-info .text-muted { font-size: 12.5px; margin-top: 2px; }
.pos-medida-rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pos-medida-rapidos .btn { justify-content: center; font-weight: 700; padding: 10px 6px; font-size: 14px; }
.pos-medida-rapidos .btn:hover { background: #eef2fd; border-color: var(--primary); color: var(--primary); }

/* Boton de tijera en la tarjeta del POS: vender por fraccion o corte a medida. */
.pos-product-card { position: relative; }
.pos-card-medida {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(255,255,255,.95); color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(20,20,40,.18);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.pos-card-medida:hover { background: #eef2fd; border-color: var(--primary); color: var(--primary); }
.pos-grid.lista .pos-card-medida { top: 50%; transform: translateY(-50%); right: 96px; }

/* "Todas" nunca se recorta: las demas categorias ceden el espacio. */
.pos-categorias .pos-chip:first-child { flex-shrink: 0; }

/* "Mostrar mas productos": ocupa toda la fila al final de la grilla del POS / preventa. */
.pos-mas-btn {
  grid-column: 1 / -1; padding: 12px; border-radius: 10px; border: 1px dashed var(--primary);
  background: #eef2fd; color: var(--primary); font-weight: 700; font-size: 13px; cursor: pointer;
}
.pos-mas-btn:hover { background: #e2e9fb; }
.pos-mas-btn:disabled { opacity: .6; cursor: wait; }

/* POS: descuento en S/ o % */
.pos-descuento-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pos-descuento-modo { display: inline-flex; gap: 4px; }
.pos-descuento-modo .btn { min-width: 38px; }

/* Version del sistema al pie del menu lateral */
.sidebar-version { font-size: 10.5px; color: rgba(255, 255, 255, .45); text-align: center; padding: 2px 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sidebar-version { display: none; }

/* Lector de codigos con la camara (POS) */
.lector-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.lector-cam { position: relative; height: 200px; border-radius: 12px; overflow: hidden; background: #0f1628; display: flex; align-items: center; justify-content: center; }
.lector-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.lector-marco { position: absolute; left: 50%; top: 50%; width: 66%; height: 42%; transform: translate(-50%, -50%); border-radius: 8px; box-shadow: 0 0 0 999px rgba(8, 12, 24, .35); display: none; pointer-events: none; outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; }
.lector-activar { position: relative; z-index: 1; }
.lector-estado { font-size: 13.5px; font-weight: 600; color: var(--text-muted); min-height: 20px; text-align: center; }
.lector-acciones { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lector-sonido { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }

.lector-estado-error { color: var(--danger); }
.lector-estado-ok { color: var(--success); }

/* ---------- Diseño responsivo (celular, tablet, laptop) ---------- */
/* Ningun boton se parte en dos lineas ni se aprieta: el texto manda el ancho. */
.btn { white-space: nowrap; }
/* Pantallas tactiles: objetivos de toque de al menos 40 px. */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
}
/* Acciones de cabecera: en tablet se acomodan en filas; en celular, el boton
   principal (+ Nuevo) va arriba a todo el ancho y el resto en cuadricula. */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
  .page-header { align-items: stretch; }
  .page-header h2 { width: 100%; }
  .page-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); justify-content: stretch; }
  .page-actions > .btn-primary { order: -1; grid-column: 1 / -1; min-height: 44px; font-size: 14px; justify-content: center; }
  .page-actions > .btn { justify-content: center; }
  .page-actions .col-picker { width: 100%; }
  .page-actions .col-picker > .btn { width: 100%; }
}

.imagen-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Imagen de producto: miniatura compacta con las acciones al lado */
.imagen-fila { display: flex; align-items: center; gap: 12px; }
.imagen-miniatura { width: 120px; height: 60px; flex: none; padding: 0; border: 1px dashed #c9d1e3; border-radius: 12px; background: #f7f8fb; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; color: var(--text-muted); }
.imagen-miniatura:hover { border-color: var(--primary); }
.imagen-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.imagen-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 0; }

/* Menu compacto (opciones de la foto del producto) */
.dropdown-menu-portal.menu-compacto { min-width: 0; padding: 4px; }
.dropdown-menu-portal.menu-compacto .dropdown-item { font-size: 12px; padding: 5px 10px; min-height: 0; white-space: nowrap; }

/* Catalogo para clientes: ventana de compartir */
.cat-pdf { display: flex; flex-direction: column; gap: 14px; }
.cat-pdf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 720px) { .cat-pdf-grid { grid-template-columns: minmax(0, 1fr); } }
.cat-pdf-tarjeta { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cat-pdf-tarjeta-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cat-pdf-titulo { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.cat-pdf-titulo-sep { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.cat-pdf-resumen { font-size: 12px; font-weight: 600; color: var(--primary-hover); background: #e8edfd; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cat-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cat-pdf-buscar-caja { position: relative; display: flex; align-items: center; }
.cat-pdf-buscar-caja .cat-ico { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.cat-pdf-buscar { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px 0 32px; font-size: 13.5px; background: #fafbfd; }
.cat-pdf-buscar:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(41,82,227,.12); }
.cat-pdf-lista { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.cat-pdf-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.cat-pdf-item:hover { background: #f5f7fc; }
.cat-pdf-item[hidden] { display: none; }
.cat-pdf-todas { border: 1px solid var(--border); border-radius: 10px; font-weight: 700; background: #fafbfd; }
.cat-pdf-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cat-pdf-cuenta { font-size: 11.5px; color: var(--text-muted); background: #eef2fb; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-pdf-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-pdf-acciones .btn { justify-content: center; min-height: 40px; }
.cat-pdf-principal { font-weight: 700; }
.cat-pdf-principal-sec { background: #fff; }
.cat-pdf-enlaces { display: flex; flex-direction: column; gap: 10px; }
.cat-pdf-enlace { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; min-width: 0; }
.cat-pdf-enlace-cuerpo { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
@media (max-width: 480px) { .cat-pdf-enlace-cuerpo { flex-direction: column; align-items: center; } }
.cat-pdf-qr-caja { flex: none; width: 140px; height: 140px; border-radius: 10px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 4px; }
.cat-pdf-qr-caja canvas, .cat-pdf-qr-caja img { width: 132px !important; height: 132px !important; }
.cat-pdf-qr-carga { font-size: 12px; text-align: center; }
.cat-pdf-enlace-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cat-pdf-enlace-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cat-pdf-enlace-fecha { font-size: 12px; color: var(--text-muted); }
.cat-pdf-url { font-size: 11.5px; font-family: 'JetBrains Mono', monospace; background: #f5f7fc; border-radius: 8px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pdf-enlace-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cat-pdf-enlace-acciones .btn { justify-content: center; }
.cat-wa { background: #25d366; border-color: #25d366; color: #06210f; font-weight: 700; justify-content: center; }
.cat-wa:hover { background: #20bd5a; }
.btn-danger-suave { color: var(--danger); border-color: #f2c4c4; background: #fff; }
.btn-danger-suave:hover { background: #fdecec; }
.cat-pdf-vacio { font-size: 13px; padding: 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }
.cat-pdf-lista .cat-pdf-vacio { border: 0; }
.cat-pdf-nombre-input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; font-size: 13.5px; background: #fafbfd; }
.cat-pdf-nombre-input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(41,82,227,.12); }
.cat-pdf-enlace-nombre { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pdf-enlace-detalle { font-size: 12px; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }