/* Ajustes propios del producto multi-empresa, sobre estilos.css (diseño heredado del sistema original). */

/* Marca del producto (logotipo ORDEX arriba del menú) y tarjeta de la empresa debajo. */
.marca-producto{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:0 8px 18px; }
.marca-lema{ font-size:12px; color:#A9B8D3; padding-left:2px; }

.tarjeta-empresa{ display:flex; flex-direction:column; gap:6px; padding:9px 12px; margin:0 0 18px; border-radius:10px; border:1px solid #1E4278; background:var(--navy-2); }
.tarjeta-empresa .etiqueta{ font-size:11px; color:#A9B8D3; }
.tarjeta-empresa b{ font-size:14px; font-weight:600; color:#fff; line-height:1.25; }
/* Logo de la empresa: sobre blanco para que se vea aunque sea oscuro o transparente. */
.marca-logo{ display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:8px 10px; }
.marca-logo img{ display:block; max-width:100%; max-height:52px; object-fit:contain; }
/* Pantalla de inicio de sesión. */
.marca{ flex-direction:column; align-items:flex-start; gap:2px; }
.marca-login{ justify-content:center; margin-bottom:8px; }

/* Cerrar sesión es un formulario POST (con protección CSRF) que se ve como enlace del menú. */
.boton-enlace{ width:100%; border:none; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }

/* Botón de ícono usado como enlace (editar, ver…). */
.icono-enlace{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

/* Fila de "sin resultados" en las tablas. */
.tabla-vacia{ text-align:center; color:var(--muted); padding:26px !important; }

/* Celda sin dato. */
.sin-dato{ color:var(--muted); font-weight:400; }

/* Casilla con su texto en una línea (formularios). */
.check-linea{ display:flex !important; align-items:center; gap:8px; text-transform:none !important; font-size:13px !important; cursor:pointer; }
.check-linea input{ width:auto !important; }

/* Casilla "Facturado" del listado de cotizaciones. */
.casilla-facturado{ width:16px; height:16px; cursor:pointer; vertical-align:middle; }

/* Documento de la cotización (sobre imprimir.css). */
.doc-empresa{ font-family:'Fraunces', Georgia, serif; font-size:24px; font-weight:600; color:var(--ink); line-height:1.15; }
.toolbar-acciones{ display:flex; gap:10px; align-items:center; }
.toolbar .btn-ghost{ border:1.5px solid #DDE1E2; color:var(--ink); padding:10px 16px; border-radius:8px; font-size:13.5px; }
.aviso-exito{ background:#E5F0EC; color:#2F6D5C; border:1px solid #BFDBD1; border-radius:8px; padding:10px 16px; font-size:13.5px; width:100%; }

/* Configuración: vista previa del logo e imágenes del pie. */
.caja-logo{ border:1.5px dashed var(--line); border-radius:8px; padding:12px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.caja-logo img{ max-height:52px; max-width:220px; }
.ayuda{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.45; }
.imagenes-pie{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.imagen-pie{ border:1px solid var(--line); border-radius:8px; padding:10px; text-align:center; background:#FBFBFA; }
.imagen-pie img{ max-height:60px; max-width:160px; display:block; margin:0 auto 8px; }

/* Logo de la empresa en el login y en el documento impreso. */
.logo-empresa-login{ max-height:64px; max-width:240px; }
.doc-logo{ max-height:56px; max-width:240px; display:block; }
.doc-imagenes-pie{ display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:26px; }
.doc-imagenes-pie img{ max-height:60px; max-width:180px; }

/* Avatar chico del listado de usuarios. */
.avatar-chico{ width:30px !important; height:30px !important; font-size:11.5px !important; }
.avatar-chico.vendedor{ background:var(--ink-2); color:#fff; }
.avatar-chico.inactivo{ background:#B4B2A9; }

/* Panel de la plataforma. */
.kpi-secundario{ font-size:16px; color:var(--muted); font-weight:500; }
.kpi-monto{ font-size:20px; line-height:1.3; }
.select-filtro{ padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px; background:#fff; }
.enlace-fila{ color:inherit; text-decoration:none; }
.enlace-fila:hover{ color:var(--gold-dark); text-decoration:underline; }
.campo-fijo{ padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:#F1F1EF; color:var(--muted); font-size:13.5px; }
.campo-sufijo{ display:flex; align-items:center; gap:8px; }
.campo-sufijo input{ flex:1; }
.campo-sufijo span{ color:var(--muted); font-size:13.5px; white-space:nowrap; }
.caja-credenciales{ background:#E5F0EC; border:1px solid #BFDBD1; border-radius:10px; padding:16px 20px; margin-bottom:20px; }
.caja-credenciales-titulo{ font-weight:700; color:var(--green); margin-bottom:10px; font-size:13.5px; }
.caja-credenciales dl, .ficha{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; font-size:13.5px; }
.caja-credenciales dt, .ficha dt{ color:var(--muted); font-weight:600; }
.caja-credenciales dd, .ficha dd{ margin:0; word-break:break-word; }
.caja-credenciales code{ background:#fff; border:1px solid #BFDBD1; border-radius:5px; padding:2px 8px; font-size:13.5px; user-select:all; }
.grid-ficha{ display:grid; grid-template-columns:3fr 2fr; gap:20px; margin-bottom:20px; }
.grid-ficha .panel{ margin:0; }
.ficha{ padding:18px 20px; }
.ficha-acciones{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.ficha-acciones .ayuda{ margin:-4px 0 6px; }
.fila-renovar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; }
.fila-renovar select{ padding:9px 10px; border:1px solid var(--line); border-radius:7px; font-size:13.5px; }
.btn-peligro{ background:none; border:1.5px solid var(--red); color:var(--red); padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; }
.btn-peligro:hover{ background:var(--red-suave); }
.btn-chico{ padding:6px 12px !important; font-size:12.5px !important; }
@media (max-width: 900px){ .grid-ficha{ grid-template-columns:1fr; } }

/* Aviso de vencimiento dentro del sistema de la empresa. */
.aviso-vencimiento{ background:var(--amber-suave); border:1px solid #FEDF89; color:var(--amber); border-radius:9px; padding:10px 16px; font-size:13px; margin-bottom:18px; }

/* Mantenimiento: salida de los comandos y migraciones pendientes. */
.salida-comando{ background:var(--navy); color:#E8ECF1; border-radius:10px; padding:14px 18px; font-size:12.5px; line-height:1.5; white-space:pre-wrap; margin:0 0 20px; max-height:260px; overflow:auto; }
.lista-migraciones{ margin:0; padding-left:18px; font-size:12.5px; }
.aviso-subdominio{ color:var(--amber); background:var(--amber-suave); border:1px solid #FEDF89; border-radius:7px; padding:8px 12px; }

/* Órdenes de compra: filtro de estado del listado y extras del documento impreso. */
.search select{ padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:13px; background:#fff; color:var(--ink); }
.doc{ position:relative; }
.doc-tipo{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark); }
.doc-anulada{
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); pointer-events:none;
  font-size:76px; font-weight:800; letter-spacing:.12em; color:rgba(180,69,58,.16); border:6px solid rgba(180,69,58,.16);
  border-radius:12px; padding:4px 28px;
}
.doc-firmas{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:56px 0 8px; font-size:12px; color:var(--muted); text-align:center; }
.doc-firmas span{ display:block; border-top:1px solid var(--ink); margin-bottom:6px; }

.barra-movil{ display:none; }

/* ============ CELULAR Y TABLET (complementa la sección responsive de estilos.css) ============ */
@media (max-width: 800px){
  /* El menú cerrado no debe dejar su sombra en el borde izquierdo. */
  .sidebar{ box-shadow:none; padding-top:66px; }
  .sidebar.open{ box-shadow:0 0 40px rgba(0,0,0,.35); }
  /* Con el menú abierto, el botón ✕ pasa al lado del panel para no tapar el logo. */
  .menu-toggle[aria-expanded="true"]{ left:calc(min(250px, 80vw) + 10px); background:#fff; color:var(--ink); }
  .main{ min-width:0; }

  /* Barra fija arriba con el nombre, detrás del botón ☰ (que es fijo). */
  .barra-movil{
    display:flex; align-items:center; position:fixed; top:0; left:0; right:0; z-index:240; height:66px;
    padding:0 16px 0 66px; background:var(--paper); border-bottom:1px solid var(--line);
    font-family:var(--titulos); font-weight:700; font-size:16px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .barra-movil span{ overflow:hidden; text-overflow:ellipsis; }
  .main{ padding-top:86px; }

  .topbar h2{ font-size:22px; }
  .kpi{ padding:12px 14px; }
  .kpi .val{ font-size:22px; }

  /* Líneas del detalle (cotización y orden de compra) como tarjetas: la
     descripción ocupa todo el ancho y los demás campos van de a tres, cada uno
     con su rótulo (data-etiqueta). */
  .items-table{ display:block; overflow:visible; white-space:normal; }
  .items-table thead{ display:none; }
  .items-table tbody{ display:block; }
  .items-table tr.item-row{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px 10px;
    border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; background:#FBFBFA;
  }
  .items-table tr.item-row:hover{ background:#FBFBFA; }
  .items-table tr.item-row td{ display:block; width:auto !important; padding:0; border:none; min-width:0; }
  .items-table tr.item-row td::before{
    content:attr(data-etiqueta); display:block; margin-bottom:4px;
    font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  }
  .items-table tr.item-row td.desc{ grid-column:1 / -1; order:-1; }
  .items-table tr.item-row td.sub, .items-table tr.item-row td.ganancia{ align-self:center; }
  .items-table tr.item-row td.acciones{ grid-column:-2 / -1; display:flex; justify-content:flex-end; gap:8px; align-items:flex-end; }
  .items-table tr.item-row td.acciones::before{ content:none; }
  .items-table .detalle-toggle, .items-table .row-del{ width:32px; height:32px; }
  .items-table input{ font-size:16px; } /* 16px evita que el iPhone acerque la pantalla al escribir */
  .field-sm input, .field-sm select, .field-sm textarea, .search input{ font-size:16px; }

  /* Botones de arriba del documento (editar, generar orden, imprimir). */
  .toolbar{ flex-wrap:wrap; gap:10px; padding-left:16px; padding-right:16px; }
  .toolbar-acciones{ flex-wrap:wrap; }
  .toolbar-acciones > *{ white-space:nowrap; }

  /* Ficha de empresa (panel de la plataforma) en una columna. */
  .grid-ficha{ grid-template-columns:1fr; }
  .form-actions{ flex-wrap:wrap; }
}

@media (max-width: 480px){
  .kpis{ grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:20px; }
  .kpi .lbl{ font-size:11.5px; }
  .topbar > .btn-gold{ width:100%; justify-content:center; }
  .form-actions > *{ flex:1; justify-content:center; }
}

/* Título de grupo en el menú lateral (Administración). */
.nav-grupo{ margin:16px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#A9B8D3; }
.nav-grupo:first-of-type{ margin-top:4px; }

/* Matriz de permisos de un rol: un bloque por módulo con sus casillas. */
.permisos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.permisos-modulo{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; }
.permisos-modulo h4{ margin:0 0 8px; font-size:13.5px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.permisos-modulo .check-linea{ padding:5px 0; }
.permisos-todos{ font-size:12px; font-weight:600; color:var(--gold-dark); background:none; border:none; cursor:pointer; padding:4px 0; }
.permisos-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-block; padding:3px 9px; border-radius:999px; background:#F1F3F4; color:var(--ink); font-size:12px; }

/* Historial (auditoría) de un documento o registro. */
.historial{ list-style:none; margin:0; padding:0; }
.historial li{ display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.historial li:first-child{ border-top:none; }
.historial .cuando{ flex:0 0 120px; color:var(--muted); font-size:12px; }
.historial .que b{ font-weight:600; }
.historial .cambios{ margin:6px 0 0; padding:0; list-style:none; }
.historial .cambios li{ border:none; padding:2px 0; font-size:12.5px; display:block; color:var(--muted); }
.historial .cambios .campo{ color:var(--ink); font-weight:600; }
.historial .cambios del{ color:var(--red); text-decoration:line-through; }
.historial .cambios ins{ color:var(--green); text-decoration:none; }
@media (max-width: 640px){
  .historial li{ flex-direction:column; gap:4px; }
  .historial .cuando{ flex:none; }
}

/* Tabla de series de numeración. */
.tabla-form td{ vertical-align:middle; }
.tabla-form input[type=text], .tabla-form input[type=number]{ width:100%; padding:8px 10px; border:1.5px solid #DDE1E2; border-radius:7px; font:inherit; font-size:13px; box-sizing:border-box; }
.folio-ejemplo{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px; }

/* Historial bajo el documento (no se imprime). */
.historial-doc{ max-width:820px; margin:-40px auto 60px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 24px; box-sizing:border-box; }
.historial-doc h4{ margin:0 0 6px; font-size:14px; }
.historial-doc .historial a{ color:inherit; }

/* Filtros rápidos (Todos / Bajo mínimo / Agotados). */
.filtro-chips{ display:inline-flex; gap:4px; background:#F1F3F4; border-radius:9px; padding:3px; flex-wrap:wrap; }
.chip-filtro{ padding:7px 13px; border-radius:7px; font-size:13px; color:var(--ink); text-decoration:none; }
.chip-filtro.activo{ background:var(--ink); color:#fff; font-weight:600; }

/* Stock de la línea en el formulario de cotización. */
.stock-linea{ display:block; margin-top:4px; font-size:11.5px; font-weight:600; }
.stock-linea:empty{ display:none; }
.stock-linea.ok{ color:var(--green); }
.stock-linea.poco{ color:var(--gold-dark); }
.stock-linea.sin{ color:var(--red); }
.stock-linea.na{ color:var(--muted); font-weight:400; }

/* Tabla de recepción y de ajuste. */
.tabla-form input.cantidad-recibir, .tabla-form input.input-chico{ max-width:110px; text-align:right; }

/* Inicio de sesión: la marca en una fila (T + nombre). */
.marca-login{ flex-direction:row; align-items:center; gap:10px; }
.marca-login{ margin-bottom:18px; }

/* El menú puede ser más alto que la pantalla (sobre todo en el celular). */
.sidebar{ overflow-y:auto; }
.sidebar .who b{ display:block; color:#fff; font-size:14px; font-weight:600; }

/* ============ PANEL GENERAL (inicio) ============ */
.solo-lector{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.panel-acciones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.buscador-general{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; background:#fff; border:1px solid #D0D5DD; border-radius:10px; color:var(--muted); min-width:260px; box-sizing:border-box; }
.buscador-general input{ border:0; outline:none; font:inherit; font-size:14px; flex:1; min-width:0; background:transparent; color:var(--ink); padding:10px 0; }
.buscador-general:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--acento-suave); }
.buscador-grande{ max-width:720px; margin-bottom:20px; padding-right:4px; }
.buscador-grande .btn-gold{ min-height:36px; padding:7px 14px; }
.selector-periodo{ display:flex; background:#fff; border:1px solid #D0D5DD; border-radius:10px; padding:3px; }
.selector-periodo a{ display:flex; align-items:center; min-height:36px; padding:0 14px; border-radius:8px; font-size:14px; color:var(--ink-2); }
.selector-periodo a.activo{ background:var(--ink); color:#fff; font-weight:600; }
.kpi-nota{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.kpi-nota.sube{ color:var(--green); }
.kpi-nota.baja{ color:var(--red); }
.kpi-nota.alerta{ color:var(--amber); }

.panel-fila{ display:flex; flex-wrap:wrap; gap:16px; }
.panel-bloque{ padding:20px; display:flex; flex-direction:column; gap:12px; overflow:visible; }
.embudo-bloque{ flex:2 1 520px; min-width:0; }
.atencion-bloque{ flex:1 1 300px; min-width:0; }
.bloque-cabeza{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.bloque-cabeza h3{ margin:0; font-size:17px; font-weight:600; }
.enlace-fuerte{ font-size:14px; font-weight:600; color:var(--gold); }
.enlace-fuerte:hover{ color:var(--acento-hover); text-decoration:underline; }

.embudo{ display:flex; flex-direction:column; gap:12px; }
.embudo-fila{ display:grid; grid-template-columns:110px 1fr 130px; align-items:center; gap:12px; }
.embudo-etapa{ font-size:14px; color:var(--ink-2); }
.embudo-barra{ height:28px; background:var(--acento-suave); border-radius:6px; overflow:hidden; }
.embudo-barra span{ display:block; height:100%; border-radius:6px; min-width:2px; }
.embudo-barra .tono-0{ background:#0B2A5B; }
.embudo-barra .tono-1{ background:#3B6CF0; }
.embudo-barra .tono-2{ background:#6E92F5; }
.embudo-barra .tono-3{ background:#A4BCF9; }
.embudo-monto{ font-size:14px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.embudo-nota{ font-size:12px; margin:4px 0 0; }

.atencion{ display:flex; gap:12px; padding:12px; border-radius:10px; color:var(--ink); font-size:14px; line-height:1.4; }
.atencion:hover{ filter:brightness(.97); }
.atencion-etiqueta{ font-size:12px; font-weight:700; min-width:88px; padding-top:1px; }
.atencion-ambar{ background:var(--amber-suave); } .atencion-ambar .atencion-etiqueta{ color:var(--amber); }
.atencion-rojo{ background:var(--red-suave); } .atencion-rojo .atencion-etiqueta{ color:var(--red); }
.atencion-azul{ background:var(--acento-suave); } .atencion-azul .atencion-etiqueta{ color:var(--gold); }
.atencion-gris{ background:#F2F4F7; } .atencion-gris .atencion-etiqueta{ color:var(--ink-2); }
.atencion-vacia{ margin:0; font-size:14px; color:var(--green); background:var(--green-suave); padding:12px; border-radius:10px; }

.tabla-simple td{ padding:12px; border-bottom:1px solid #F2F4F7; }
.tabla-simple thead th{ padding:10px 12px; background:transparent; }
.tabla-simple tbody tr:last-child td{ border-bottom:none; }
.tabla-simple .fol a{ color:var(--ink); }
.tabla-simple .fol a:hover{ color:var(--gold); }
.badge.facturada{ background:#F4F3FF; color:#5925DC; }
.resultado-grupo{ margin-bottom:16px; }

@media (max-width: 800px){
  .panel-acciones{ width:100%; }
  .buscador-general{ flex:1 1 100%; min-width:0; }
  .embudo-fila{ grid-template-columns:80px 1fr 100px; gap:8px; }
}

/* ============ FICHA DEL CLIENTE ============ */
.ficha-cliente{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.ficha-datos{ flex:1 1 380px; min-width:0; }
.ficha-lado{ flex:1.4 1 420px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.ficha-kpis{ grid-template-columns:repeat(2, 1fr); margin-bottom:0; }
.ficha-kpis .val{ font-size:24px; }
.ficha-cabeza{ display:flex; gap:12px; align-items:center; }
.ficha-cabeza b{ display:block; font-family:var(--titulos); font-size:20px; line-height:1.2; }
.ficha-cabeza span{ font-size:13px; color:var(--muted); }
.ficha-iniciales{ width:46px; height:46px; border-radius:12px; background:var(--acento-suave); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--titulos); flex-shrink:0; }
.ficha-lista{ display:grid; grid-template-columns:150px 1fr; gap:8px 12px; margin:4px 0 0; font-size:14px; }
.ficha-lista dt{ color:var(--muted); }
.ficha-lista dd{ margin:0; color:var(--ink); overflow-wrap:anywhere; }
.enlace-cliente{ color:var(--ink); }
.enlace-cliente:hover{ color:var(--gold); text-decoration:underline; }
.aviso-lista{ margin-top:6px; color:var(--gold); font-weight:600; }
@media (max-width: 480px){ .ficha-lista{ grid-template-columns:1fr; gap:2px; } .ficha-lista dd{ margin-bottom:8px; } }

/* Avance de despacho de una orden de venta. */
.avance{ height:6px; background:#F2F4F7; border-radius:999px; overflow:hidden; margin-bottom:4px; }
.avance span{ display:block; height:100%; background:var(--gold); border-radius:999px; }
.avance span.completo{ background:var(--green); }
.btn-convertir{ display:inline-flex; align-items:center; height:32px; padding:0 10px; border-radius:8px; background:var(--green-suave); color:var(--green); font-size:12.5px; font-weight:600; vertical-align:middle; }
.btn-convertir:hover{ filter:brightness(.96); }

/* Montos en varias monedas (cuentas por cobrar): uno por línea, sin mezclar. */
.linea-moneda{ display:block; }
.kpi .val:has(.linea-moneda + .linea-moneda){ font-size:clamp(18px, 1.7vw, 22px); line-height:1.25; }
.embudo-barras-moneda{ display:flex; flex-direction:column; gap:3px; }
.embudo-barras-moneda .embudo-barra{ height:12px; }

/* Aviso de la consulta de RUC en SUNAT. */
.aviso-ruc{ font-size:12.5px; margin:-6px 0 12px; padding:6px 10px; border-radius:8px; background:#F2F4F7; color:var(--ink-2); }
.aviso-ruc.bien{ background:var(--green-suave); color:var(--green); }
.aviso-ruc.mal{ background:var(--red-suave); color:var(--red); }
.aviso-ruc.cargando{ color:var(--muted); }
.aviso-ruc .sin-dato{ color:var(--ink-2); }
.enlace-boton{ background:none; border:0; padding:0; color:var(--gold); font-weight:600; cursor:pointer; text-decoration:underline; font-size:inherit; }

/* ============ MENÚ LATERAL CON GRUPOS DESPLEGABLES ============ */
.nav-icono{ flex-shrink:0; color:#7D8FB0; }
.nav-principal{ margin-bottom:8px; }
.nav-principal.active .nav-icono{ color:#fff; }
.nav-desplegable{ margin-bottom:2px; }
.nav-titulo{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; list-style:none;
  font-size:14px; font-weight:500; color:#C7D2E5; cursor:pointer; user-select:none;
}
.nav-titulo::-webkit-details-marker{ display:none; }
.nav-titulo::marker{ content:''; }
.nav-titulo:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-titulo:focus-visible{ outline:2px solid #93C5FD; outline-offset:-2px; }
.nav-titulo span{ flex:1; }
.nav-flecha{ flex-shrink:0; width:16px; height:16px; color:#7D8FB0; transition:transform .15s ease; }
.nav-desplegable[open] > .nav-titulo .nav-flecha{ transform:rotate(180deg); }
.nav-desplegable[open] > .nav-titulo,
.nav-desplegable.tiene-activa > .nav-titulo{ color:#fff; }
.nav-desplegable.tiene-activa > .nav-titulo .nav-icono{ color:#93C5FD; }
.nav-lista{ margin:2px 0 8px 20px; padding-left:12px; border-left:1px solid #1E4278; }
.nav-lista .nav-item{ padding:7px 12px; font-size:13.5px; font-weight:400; }
.nav-lista .nav-item.active{ font-weight:600; }

/* ============ REPORTES FINANCIEROS (flujo de caja, ingresos y gastos) ============ */
.tabla-flujo th, .tabla-flujo td{ white-space:nowrap; }
.tabla-flujo td.monto{ text-align:right; }
.tabla-flujo td:first-child{ position:sticky; left:0; background:#fff; z-index:1; }
.tabla-flujo .sub-th{ display:block; font-size:11px; font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; }
.tabla-flujo .col-aparte{ background:#FAFAF8; }
.tabla-flujo .fila-total td{ font-weight:700; border-top:1.5px solid var(--ink); background:#FAFAF8; }
.tabla-flujo .fila-subtotal td{ font-weight:600; border-top:1px solid var(--line); }
.tabla-flujo .fila-grupo td{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:#FAFAF8; padding-top:12px; }
.flujo-detalle{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:20px; margin-top:20px; }
.flujo-detalle .panel{ margin:0; }
.bar-ingreso{ background:var(--green); }
.bar-egreso{ background:#F04438; }
@media (max-width: 800px){ .flujo-detalle{ grid-template-columns:1fr; } }

/* ============ EMISIÓN ELECTRÓNICA ============ */
.tabla-items-fe textarea, .tabla-items-fe input, .tabla-items-fe select{ width:100%; box-sizing:border-box; }
.tabla-items-fe textarea{ resize:vertical; min-height:38px; font:inherit; }
.tabla-items-fe td{ vertical-align:top; }
.totales-fe{ margin:14px 0 0 auto; max-width:300px; font-size:14px; }
.totales-fe > div{ display:flex; justify-content:space-between; padding:4px 0; }
.totales-fe > div[hidden], #bloqueCuotas[hidden], #campoCodigoDetraccion[hidden]{ display:none; }
.totales-fe .total-final{ border-top:1.5px solid var(--ink); margin-top:4px; padding-top:8px; font-size:16px; }
.opcion-pago{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:8px; font-size:14px; cursor:pointer; }
.opcion-pago:has(input:checked){ background:var(--ink); color:#fff; font-weight:600; }
.opcion-pago input{ accent-color:#fff; }
[hidden]{ display:none !important; }
.field-sm .opcion-pago{ display:inline-flex; flex-direction:row; text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; margin:0; color:var(--ink-2); }
.field-sm .opcion-pago:has(input:checked){ color:#fff; }
.field-sm .opcion-pago input{ width:auto; min-height:0; margin:0; padding:0; }

/* ---------- Seguimiento de la cotización (diagrama y línea de tiempo) ---------- */
.seg-sub{ color:var(--muted); font-size:13.5px; margin-top:2px; }
.seg-resumen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; margin-bottom:16px; }
.seg-resumen-grupo{ margin:0; }
.seg-resumen-titulo{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:8px; }
.seg-resumen dl{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin:0; }
.seg-resumen dt{ font-size:12px; color:var(--muted); }
.seg-resumen dd{ margin:2px 0 0; font-family:var(--numeros); font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; color:var(--ink); }

.seg-carril{ padding:14px 0; border-top:1px solid var(--line); }
.seg-carril:first-of-type{ border-top:none; padding-top:4px; }
.seg-carril-titulo{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:12px; }
.seg-vacio{ margin:0; font-size:13.5px; color:var(--ink-2); }
.seg-etapas{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:0; }
.seg-etapa{ position:relative; padding:0 10px 0 0; min-width:0; }
/* Línea que une cada etapa con la siguiente. */
.seg-etapas .seg-etapa:not(:last-child)::after{ content:""; position:absolute; top:13px; left:30px; right:4px; height:2px; background:var(--line); }
.seg-etapas .seg-etapa.hecho:not(:last-child)::after{ background:var(--green); }
.seg-punto{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--line); background:var(--paper-2); color:var(--muted); font-size:13px; font-weight:700; line-height:1; flex:none; }
.seg-etapa.hecho .seg-punto{ background:var(--green); border-color:var(--green); color:#fff; }
.seg-etapa.curso .seg-punto{ background:var(--amber-suave); border-color:var(--amber); color:var(--amber); }
.seg-etapa.omitido .seg-punto{ border-style:dashed; }
.seg-etapa.detenido .seg-punto{ background:var(--red); border-color:var(--red); color:#fff; }
.seg-etapa-cuerpo{ margin-top:8px; }
.seg-etapa-titulo{ font-weight:600; font-size:13.5px; color:var(--ink); }
.seg-etapa.pendiente .seg-etapa-titulo, .seg-etapa.omitido .seg-etapa-titulo{ color:var(--muted); }
.seg-etapa-detalle{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.seg-etapa.detenido .seg-etapa-detalle{ color:var(--red); }
.seg-etapa.curso .seg-etapa-detalle{ color:var(--amber); }
.seg-doc{ font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.seg-doc span{ color:var(--muted); }
.seg-leyenda{ display:flex; flex-wrap:wrap; gap:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.seg-leyenda .seg-etapa{ display:inline-flex; align-items:center; gap:6px; padding:0; }
.seg-leyenda .seg-punto{ width:18px; height:18px; font-size:10px; }

.bloque-cabeza .seg-filtros{ display:inline-flex; gap:4px; background:#F2F4F7; padding:3px; border-radius:8px; }
.seg-filtros button{ border:none; background:none; padding:5px 12px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit; }
.seg-filtros button.sel{ background:var(--paper-2); color:var(--gold); box-shadow:0 1px 2px rgba(16,24,40,.08); }
.seg-tiempo{ list-style:none; margin:0; padding:0; }
.seg-evento{ display:grid; grid-template-columns:96px 22px minmax(0, 1fr) auto; gap:0 10px; align-items:start; position:relative; padding:10px 0; }
.seg-evento[hidden]{ display:none; }
/* Línea vertical que une los eventos. */
.seg-evento::before{ content:""; position:absolute; left:116px; top:0; bottom:0; width:2px; background:var(--line); }
.seg-evento:first-child::before{ top:16px; }
.seg-evento:last-child::before{ bottom:calc(100% - 16px); }
.seg-fecha{ font-size:12.5px; color:var(--ink-2); font-weight:600; padding-top:1px; white-space:nowrap; }
.seg-fecha.mismo-dia{ color:var(--muted); font-weight:400; }
.seg-marca{ position:relative; z-index:1; width:12px; height:12px; margin:3px 0 0 5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--paper-2); }
.seg-evento.venta .seg-marca{ background:var(--green); }
.seg-evento.compra .seg-marca{ background:var(--amber); }
.seg-evento-linea{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.seg-flujo{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.seg-evento-titulo{ font-weight:600; font-size:13.5px; color:var(--ink); }
a.seg-evento-titulo:hover{ color:var(--gold); }
.seg-evento-detalle{ font-size:12.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.seg-monto{ font-family:var(--numeros); font-variant-numeric:tabular-nums; font-weight:600; font-size:13.5px; white-space:nowrap; padding-top:1px; }

@media (max-width: 800px){
  /* En el celular las etapas van una debajo de otra, unidas por una línea vertical. */
  .seg-etapas{ grid-auto-flow:row; gap:0; }
  .seg-etapa{ display:grid; grid-template-columns:26px minmax(0, 1fr); gap:0 12px; padding:0 0 14px; }
  .seg-etapas .seg-etapa:not(:last-child)::after{ top:26px; bottom:0; left:12px; right:auto; width:2px; height:auto; }
  .seg-etapa-cuerpo{ margin-top:3px; }
  .seg-evento{ grid-template-columns:22px minmax(0, 1fr); }
  .seg-evento::before{ left:10px; }
  .seg-fecha{ grid-column:2; grid-row:1; }
  .seg-marca{ grid-column:1; grid-row:1 / span 3; margin-left:5px; }
  .seg-evento-cuerpo{ grid-column:2; }
  .seg-monto{ grid-column:2; padding-top:2px; }
  .seg-fecha.mismo-dia{ display:none; }
}
@media print{
  .seg-evento[hidden]{ display:grid; }
}

/* ---------- Números de serie (recepción, despacho, ajustes y buscador) ---------- */
.fila-series td{ padding-top:0 !important; border-top:none; }
.series-etiqueta{ display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin:2px 0 4px; }
.series-cuenta{ font-weight:600; color:var(--green); }
.series-cuenta.mal{ color:var(--red); }
textarea.series-input{ width:100%; padding:7px 9px; border-radius:6px; border:1.5px solid var(--line); font-family:var(--numeros); font-size:13px; text-transform:uppercase; resize:vertical; background:#fff; }
textarea.series-input:focus{ outline:none; border-color:var(--gold); }
.series-disponibles{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.series-disponibles-titulo{ font-size:12px; color:var(--muted); margin-right:2px; }
.series-filtro{ width:140px; padding:4px 8px; border:1.5px solid var(--line); border-radius:6px; font-size:12.5px; }
.serie-disponible{ border:1.5px solid var(--line); background:#fff; color:var(--ink-2); border-radius:999px; padding:3px 10px; font-size:12px; font-family:var(--numeros); cursor:pointer; }
.serie-disponible:hover{ border-color:var(--gold); color:var(--gold); }
.serie-disponible.sel{ background:var(--gold); border-color:var(--gold); color:#fff; }
.serie-disponible[hidden]{ display:none; }
.series-ajuste{ margin-top:8px; }
.series-linea{ display:block; font-size:12px; color:var(--ink-2); margin-top:2px; overflow-wrap:anywhere; }
.serie-numero{ white-space:nowrap; font-family:var(--numeros); }
.serie-recorrido{ list-style:none; margin:0; padding:0; font-size:12.5px; }
.serie-recorrido li{ display:flex; gap:8px; padding:2px 0; }
.serie-recorrido li .cuando{ color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.serie-recorrido li.entra::before, .serie-recorrido li.sale::before{ content:"↓"; color:var(--green); font-weight:700; }
.serie-recorrido li.sale::before{ content:"↑"; color:var(--amber); }

/* Equivalente en soles bajo un monto en dólares (detracción o retención). */
.equivalente-soles{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; }

/* ---------- Importar desde Excel ---------- */
.importar-pasos{ margin:0 0 18px; padding-left:20px; font-size:14px; line-height:1.7; color:var(--ink-2); }
.importar-tipos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.importar-tipo{ display:flex; flex-direction:column; gap:10px; margin:0; }
.importar-subir{ display:flex; flex-direction:column; gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.importar-subir label{ font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.importar-subir input[type=file]{ font-size:13px; max-width:100%; }
.importar-subir .btn-gold{ align-self:flex-start; }

/* ---------- Ayuda y soporte ---------- */
.nav-ayuda{ margin-top:auto; }
.soporte-canales{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; max-width:980px; }
.soporte-canal{ display:flex; flex-direction:column; gap:10px; margin:0; }
.soporte-canal h3{ margin:0; font-family:var(--titulos); font-size:18px; }
.soporte-canal p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.soporte-principal{ border:1.5px solid var(--acento-borde); background:var(--acento-suave); }
.soporte-boton{ align-self:flex-start; }
.soporte-dato{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:13px; color:var(--ink-2); }
.soporte-dato-grande{ font-size:18px; color:var(--ink); }
.soporte-consejos{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.7; color:var(--ink-2); }
.login-ayuda{ text-align:center; margin:8px 0 0; font-size:12.5px; color:var(--muted); }
.login-ayuda a{ color:var(--gold-dark); font-weight:600; }
.nav-ayuda + .user{ margin-top:8px; }