/* ═══════════════════════════════════════════════════════════
   SRI Facturas — Hoja de estilos principal
   Tipografía: DM Sans (UI) + IBM Plex Mono (números/código)
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --azul:        #1B3A6B;
  --azul-2:      #153060;
  --azul-med:    #2563EB;
  --azul-cl:     #EFF6FF;
  --verde:       #10B981;
  --verde-cl:    #ECFDF5;
  --ambar:       #F59E0B;
  --ambar-cl:    #FFFBEB;
  --rojo:        #EF4444;
  --rojo-cl:     #FEF2F2;
  --fondo:       #F1F5F9;
  --sup:         #FFFFFF;
  --texto:       #1E293B;
  --texto-s:     #64748B;
  --borde:       #E2E8F0;
  --sidebar-w:   264px;
  --r:           12px;
  --sombra:      0 1px 2px rgba(0,0,0,.05), 0 4px 18px rgba(0,0,0,.06);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.6;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono { font-family: 'IBM Plex Mono', 'Courier New', monospace; }

button { font-family: inherit; }
input, select { font-family: inherit; }
a { text-decoration: none; }

/* ── Layout ───────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--azul);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  /* textura de cuadrícula tenue */
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Línea de acento superior */
.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--azul-med), var(--verde));
}

/* Marca / logo */
.sidebar-marca {
  padding: 28px 22px 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.marca-icono { flex-shrink: 0; }

.marca-nombre {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.marca-desc {
  display: block;
  color: rgba(255,255,255,.38);
  font-size: 11px;
  letter-spacing: .03em;
  margin-top: 1px;
}

/* Navegación */
.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.5);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-enlace:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.nav-enlace.activo { background: rgba(255,255,255,.12); color: #fff; }

/* Info del período activo */
.sidebar-info {
  padding: 0 16px 16px;
}

.info-periodo {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 12px 14px;
}

.info-label {
  display: block;
  color: rgba(255,255,255,.4);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.info-valor {
  display: block;
  color: rgba(255,255,255,.9);
  font-size: 12px;
}

/* Pie del sidebar */
.sidebar-pie {
  padding: 16px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pie-seguridad {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.3);
  font-size: 11px;
}

.pie-version {
  color: rgba(255,255,255,.2);
  font-size: 10.5px;
  font-family: 'IBM Plex Mono', monospace;
}

/* ══════════════════════════════════════════════════════════
   ÁREA PRINCIPAL
   ══════════════════════════════════════════════════════════ */
.contenido {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 44px 48px;
  min-height: 100vh;
}

/* ── Vistas ───────────────────────────────────────────────── */
.vista { display: none; }
.vista.activa {
  display: block;
  animation: aparecer .28s cubic-bezier(.25,.46,.45,.94);
}

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

/* Encabezado de vista */
.vista-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  gap: 24px;
}

.vista-titulo {
  font-size: 27px;
  font-weight: 600;
  color: var(--texto);
  letter-spacing: -.025em;
  line-height: 1.2;
}

.vista-subtitulo {
  color: var(--texto-s);
  font-size: 14px;
  margin-top: 5px;
}

/* ── Tarjeta base ─────────────────────────────────────────── */
.tarjeta {
  background: var(--sup);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  padding: 36px 40px;
}

/* ══════════════════════════════════════════════════════════
   VISTA 1 — FORMULARIO
   ══════════════════════════════════════════════════════════ */

/* Bloque numerado */
.bloque-form {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--borde);
}
.bloque-form:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bloque-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.bloque-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--azul-med);
  background: var(--azul-cl);
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: .08em;
}

.bloque-titulo h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}

/* Campos en fila */
.campos-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.campo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-s);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.campo-input {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--borde);
  border-radius: 9px;
  font-size: 14px;
  color: var(--texto);
  background: #FAFBFC;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
  width: 100%;
}

.campo-input.mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: .04em; }

.campo-input:focus {
  border-color: var(--azul-med);
  background: #fff;
  box-shadow: 0 0 0 3.5px rgba(37,99,235,.1);
}

.campo-input:invalid:not(:placeholder-shown) {
  border-color: var(--rojo);
}

.campo-input[type="date"] { cursor: pointer; }

.campo-error {
  font-size: 12px;
  color: var(--rojo);
  display: none;
}
.campo-error.visible { display: block; }

/* Input password con botón de ojo */
.campo-password { position: relative; }
.campo-password .campo-input { padding-right: 48px; }

.btn-ojo {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-s);
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color .15s;
}
.btn-ojo:hover { color: var(--texto); }

/* Aviso de seguridad */
.aviso-seguridad {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #94a3b8;
  font-size: 12px;
}

/* Pills de rango */
.pills-contenedor {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 20px 8px;
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  background: transparent;
  color: var(--texto-s);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
  line-height: 1.3;
}

.pill-label { font-weight: 500; }

.pill-mes {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  opacity: .6;
  margin-top: 1px;
}
.pill.activa .pill-mes { opacity: .8; }

.pill:hover {
  border-color: var(--azul-med);
  color: var(--azul-med);
  background: var(--azul-cl);
}

.pill.activa {
  border-color: var(--azul-med);
  background: var(--azul-med);
  color: #fff;
  font-weight: 600;
}

/* Fechas personalizadas */
.fechas-personalizadas { margin-top: 18px; }
.fechas-personalizadas.oculto { display: none; }

/* Footer del formulario */
.form-footer {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--borde);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-rango-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-s);
  font-size: 13px;
}

/* Botón primario */
.btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: var(--azul-med);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
  letter-spacing: -.01em;
}

.btn-primario:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,.3);
}
.btn-primario:active { transform: translateY(0); box-shadow: none; }
.btn-primario:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════════════
   VISTA 2 — PROGRESO
   ══════════════════════════════════════════════════════════ */
.tarjeta-progreso {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Barra de progreso */
.barra-bloque { display: flex; flex-direction: column; gap: 9px; }

.barra-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.barra-estado { color: var(--texto-s); }
.barra-fraccion { color: var(--texto-s); font-size: 12px; }

.barra-track {
  height: 9px;
  background: var(--fondo);
  border-radius: 100px;
  overflow: hidden;
  border: 1px solid var(--borde);
}

.barra-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--azul-med) 0%, var(--verde) 100%);
  background-size: 300% 100%;
  transition: width .5s ease;
  animation: barra-shimmer 2.5s linear infinite;
}

@keyframes barra-shimmer {
  0%   { background-position: 300% center; }
  100% { background-position: -100% center; }
}

.barra-pct {
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-med);
  text-align: right;
}

/* Log en vivo */
.log-wrap {
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}

.log-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--borde);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-s);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.log-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
}
.log-dot.activo {
  background: var(--verde);
  animation: pulso 1.8s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.log-cuerpo {
  background: #FAFBFC;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 14px 16px;
  min-height: 240px;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scroll-behavior: smooth;
}

/* Scrollbar discreta */
.log-cuerpo::-webkit-scrollbar { width: 5px; }
.log-cuerpo::-webkit-scrollbar-track { background: transparent; }
.log-cuerpo::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 10px; }

/* ── Estado de conexión (badges) ─────────────────────────── */
.estado-conexion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid;
  transition: all .2s;
}

.ec-idle {
  background: #F8FAFC;
  color: var(--texto-s);
  border-color: var(--borde);
}
.ec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}

.ec-conectando {
  background: var(--azul-cl);
  color: var(--azul-med);
  border-color: rgba(37,99,235,.2);
}

.ec-conectado {
  background: var(--verde-cl);
  color: #059669;
  border-color: rgba(16,185,129,.25);
}
.ec-conectado strong { color: #047857; }

.ec-error {
  background: var(--rojo-cl);
  color: #dc2626;
  border-color: rgba(239,68,68,.2);
}

/* ── Banner de confirmación de rango ─────────────────────── */
.rango-confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--azul-cl);
  border: 1.5px solid rgba(37,99,235,.15);
  border-radius: 10px;
  color: var(--azul-med);
}

.rc-titulo {
  font-size: 12px;
  color: var(--texto-s);
  margin-bottom: 2px;
}

.rc-fechas {
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-med);
  letter-spacing: .02em;
}

/* Entrada individual del log */
.log-entrada {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: log-slide .22s ease;
}

@keyframes log-slide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.log-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Ícono OK */
.ico-ok { color: var(--verde); }

/* Ícono Error */
.ico-err { color: var(--rojo); }

/* Ícono Spinner */
.ico-spin {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(37,99,235,.2);
  border-top-color: var(--azul-med);
  border-radius: 50%;
  animation: girar .75s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.log-txt {
  color: var(--texto);
  line-height: 1.5;
}
.log-txt.err { color: var(--rojo); }

/* Pie de progreso */
.progreso-pie { display: flex; justify-content: flex-end; }

.btn-cancelar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--borde);
  border-radius: 8px;
  color: var(--texto-s);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-cancelar:hover {
  border-color: var(--rojo);
  color: var(--rojo);
  background: var(--rojo-cl);
}

/* ══════════════════════════════════════════════════════════
   VISTA 3 — RESULTADOS
   ══════════════════════════════════════════════════════════ */

/* Acciones del encabezado */
.resultados-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  transition: all .15s;
}

.btn-excel {
  color: var(--verde);
  border-color: rgba(16,185,129,.35);
  background: var(--verde-cl);
}
.btn-excel:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

.btn-csv {
  color: var(--texto-s);
  border-color: var(--borde);
  background: #fff;
}
.btn-csv:hover { border-color: var(--texto-s); color: var(--texto); }

.btn-nueva {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--texto-s);
  transition: all .15s;
}
.btn-nueva:hover { border-color: var(--azul-med); color: var(--azul-med); background: var(--azul-cl); }

.btn-secundario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--borde);
  background: #fff;
  color: var(--texto-s);
  transition: all .15s;
  white-space: nowrap;
}
.btn-secundario:hover {
  border-color: var(--azul-med);
  color: var(--azul-med);
  background: var(--azul-cl);
}
.btn-secundario svg { flex-shrink: 0; }

/* Tarjetas KPI */
.resumen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.tarjeta-kpi {
  border-radius: var(--r);
  padding: 22px 24px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kpi-valor {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  display: block;
}

.kpi-verde  { background: var(--verde-cl); border-color: rgba(16,185,129,.18); }
.kpi-verde  .kpi-label { color: #065f46; }
.kpi-verde  .kpi-valor { color: #059669; }

.kpi-azul   { background: var(--azul-cl);  border-color: rgba(37,99,235,.15); }
.kpi-azul   .kpi-label { color: #1e3a8a; }
.kpi-azul   .kpi-valor { color: var(--azul-med); }

.kpi-ambar  { background: var(--ambar-cl); border-color: rgba(245,158,11,.18); }
.kpi-ambar  .kpi-label { color: #78350f; }
.kpi-ambar  .kpi-valor { color: #d97706; }

.kpi-oscura { background: var(--azul);     border-color: transparent; }
.kpi-oscura .kpi-label { color: rgba(255,255,255,.45); }
.kpi-oscura .kpi-valor { color: #fff; }

/* Tabla */
.tabla-shell {
  background: var(--sup);
  border-radius: var(--r);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow: auto;
  max-height: calc(100vh - 380px);
}

/* Scrollbar de la tabla */
.tabla-shell::-webkit-scrollbar { height: 5px; width: 5px; }
.tabla-shell::-webkit-scrollbar-track { background: transparent; }
.tabla-shell::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 10px; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.tabla th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-s);
  background: #F8FAFC;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.th-monto { text-align: right; }

.tabla tbody tr {
  border-bottom: 1px solid #F1F5F9;
  transition: background .1s;
}
.tabla tbody tr:last-child { border-bottom: none; }
.tabla tbody tr:hover { background: #F8FAFB; }

.tabla td {
  padding: 12px 16px;
  color: var(--texto);
  vertical-align: middle;
  white-space: nowrap;
}

.td-monto {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  text-align: right;
}

/* Columnas IVA destacadas */
.col-iva0-h,
.tabla td.col-iva0-td { background: rgba(16,185,129,.04); }

.col-iva15-h,
.tabla td.col-iva15-td { background: rgba(37,99,235,.04); }

/* Fila de totales */
.tabla tfoot {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.tabla tfoot tr { background: var(--azul) !important; }

.tabla tfoot td {
  padding: 14px 16px;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.tabla tfoot td:first-child {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-align: left;
}

.tabla tfoot td.col-iva0-td  { background: rgba(16,185,129,.12); }
.tabla tfoot td.col-iva15-td { background: rgba(37,99,235,.12); }

/* ══════════════════════════════════════════════════════════
   BOTÓN CONECTAR + ESTADO DE CONEXIÓN
   ══════════════════════════════════════════════════════════ */

.conectar-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.btn-conectar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--azul);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s, box-shadow .15s;
  flex-shrink: 0;
}
.btn-conectar:hover:not(:disabled) {
  background: var(--azul-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,58,107,.3);
}
.btn-conectar:active { transform: translateY(0); }
.btn-conectar:disabled { opacity: .55; cursor: not-allowed; }

/* Estado de conexión */
.estado-conexion {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  min-height: 24px;
}

.ec-conectando { color: var(--azul-med); }
.ec-conectado  { color: #059669; }
.ec-error      { color: var(--rojo); }

.ec-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(37,99,235,.2);
  border-top-color: var(--azul-med);
  border-radius: 50%;
  animation: girar .75s linear infinite;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   VISTA 4 — ANALIZAR LOCAL
   ══════════════════════════════════════════════════════════ */

.upload-zona {
  border: 2px dashed var(--borde);
  border-radius: 12px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: #FAFBFC;
  transition: border-color .2s, background .2s;
  cursor: default;
}

.upload-zona.drag-over {
  border-color: var(--azul-med);
  background: var(--azul-cl);
}

.upload-icono { margin-bottom: 4px; }

.upload-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}

.upload-desc {
  font-size: 13px;
  color: var(--texto-s);
  max-width: 360px;
}

.upload-botones {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* inputs de archivo ocultos */
#input-archivos,
#input-carpeta { display: none; }

.btn-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: var(--azul-med);
  color: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s;
  user-select: none;
}
.btn-upload-label:hover { background: #1d4ed8; transform: translateY(-1px); }

.btn-upload-sec {
  background: #fff;
  color: var(--texto-s);
  border: 1.5px solid var(--borde);
}
.btn-upload-sec:hover {
  background: var(--fondo);
  border-color: var(--texto-s);
  color: var(--texto);
  transform: translateY(-1px);
}

.upload-contador {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  background: var(--verde-cl);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 20px;
  color: #059669;
  font-size: 13px;
  font-weight: 600;
}

.upload-limpiar {
  background: none;
  border: none;
  color: #059669;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  opacity: .6;
  transition: opacity .15s;
}
.upload-limpiar:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   VISTA 5 — RESULTADOS ANÁLISIS LOCAL
   ══════════════════════════════════════════════════════════ */

/* Tabla con scroll horizontal para 12 columnas */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-local {
  min-width: 900px;
  font-size: 12.5px;
}

.tabla-local th,
.tabla-local td {
  padding: 9px 11px;
  white-space: nowrap;
}

/* Columnas con texto largo: truncar con ellipsis y tooltip al hover */
.col-clave,
.col-razon,
.col-detalle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}
.col-clave   { max-width: 130px; min-width: 80px; }
.col-razon   { max-width: 160px; min-width: 100px; }
.col-detalle { max-width: 160px; min-width: 100px; }

/* ══════════════════════════════════════════════════════════
   UTILIDADES
   ══════════════════════════════════════════════════════════ */
.oculto { display: none !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .resumen-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 220px; }
  .contenido { padding: 32px 28px; }
  .tarjeta { padding: 28px; }
  .campos-fila { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sidebar { display: none; }
  .contenido { margin-left: 0; }
  .resultados-acciones { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   PANTALLA DE AUTENTICACIÓN
   ══════════════════════════════════════════════════════════ */
#pantalla-auth {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

#pantalla-auth.oculta { display: none; }

.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  width: 100%;
  max-width: 420px;
  padding: 40px;
  margin: 16px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.auth-logo-texto { display: flex; flex-direction: column; }

.auth-logo-nombre {
  font-size: 17px;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: -.02em;
}

.auth-logo-desc {
  font-size: 12px;
  color: var(--texto-s);
}

.auth-tabs {
  display: flex;
  background: var(--fondo);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  padding: 9px 16px;
  border: none;
  background: none;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto-s);
  cursor: pointer;
  transition: all .15s;
}

.auth-tab.activa {
  background: #fff;
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-error {
  font-size: 13px;
  color: var(--rojo);
  min-height: 18px;
  font-weight: 500;
}

.auth-error.ok { color: var(--verde); }

.auth-btn-submit {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  margin-top: 4px;
}

/* ── Usuario en sidebar ───────────────────────────────────── */
.sidebar-usuario {
  margin: 0 14px 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.usuario-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--azul-med);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.usuario-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.usuario-nombre {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-email {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-logout {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.btn-logout:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* ── Selector de empresa ─────────────────────────────────── */
.sidebar-empresa {
  margin: 0 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empresa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.empresa-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.btn-nueva-empresa {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.btn-nueva-empresa:hover { color: #fff; background: rgba(255,255,255,.1); }

.empresa-opciones {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.empresa-opcion {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.empresa-opcion:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.08);
}
.empresa-opcion.activa {
  background: rgba(37,99,235,.25);
  border-color: rgba(37,99,235,.4);
}

.emp-nombre {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.emp-ruc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,.45);
}

.empresa-vacia {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
}
.empresa-vacia span {
  font-size: 12px;
  color: rgba(255,255,255,.35);
}
.empresa-link {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding: 0;
  text-decoration: underline;
}
.empresa-link:hover { color: #fff; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(15,23,42,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}

.modal-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 380px;
  padding: 28px;
}

.modal-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
}

.modal-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-s);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.modal-cerrar:hover { color: var(--texto); background: var(--fondo); }

.modal-form { display: flex; flex-direction: column; gap: 16px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ── Badges admin ────────────────────────────────────────── */
.badge-rol, .badge-estado {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}
.badge-admin    { background: #EDE9FE; color: #6D28D9; }
.badge-contador { background: var(--azul-cl); color: var(--azul); }
.badge-activo   { background: var(--verde-cl); color: #059669; }
.badge-inactivo { background: var(--rojo-cl); color: var(--rojo); }