/* ============================================================
   StreamCore ERP — sistema de diseño (web V5)
   ============================================================ */
:root{
  --azul:#2563EB;      --azul-oscuro:#1D4ED8;  --celeste:#0EA5E9;
  --navy:#2C3E50;      --navy-800:#1E2B38;     --navy-900:#16212C;
  --tinta:#1E293B;     --gris:#64748B;         --gris-claro:#94A3B8;
  --linea:#E2E8F0;     --fondo:#F4F7F9;        --tarjeta:#FFFFFF;
  --ok:#10B981;        --info:#3B82F6;         --alerta:#F59E0B;   --peligro:#EF4444;
  --radio:10px;        --radio-sm:6px;
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --sombra-fuerte:0 8px 30px rgba(16,24,40,.12);
  --sidebar:280px;
  --fuente:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--fuente);color:var(--tinta);background:var(--fondo);font-size:14px;line-height:1.5}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;font-weight:700;color:var(--tinta)}
h1{font-size:1.6rem}h2{font-size:1.15rem}h3{font-size:1rem}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}

/* ---------- estructura ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar);flex-shrink:0;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar__marca{padding:22px 22px 16px;display:flex;flex-direction:column;gap:4px}
.sidebar__empresa{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:.2px;line-height:1.2}
.sidebar__sub{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--celeste)}
.sidebar__user{font-size:.8rem;color:#cbd5e1;margin-top:8px}
.sidebar__bloque{margin:0 14px 14px;background:var(--navy-800);border-radius:12px;padding:8px}
.sidebar__titulo{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;padding:8px 12px 4px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#e2e8f0;
  font-weight:600;font-size:.9rem;
}
.nav a:hover{background:var(--navy-900);text-decoration:none;color:#fff}
.nav a.activo{background:var(--celeste);color:#fff}
.sidebar__pie{margin-top:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.sidebar__salir{color:#fff;background:var(--peligro);border:0;font-weight:800}
.sidebar__salir:hover{background:#DC2626;color:#fff;text-decoration:none}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:70px;background:var(--tarjeta);border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:5;
  overflow:hidden;
}
.topbar__titulo{font-weight:700;font-size:1.05rem}
.topbar__logo{height:42px;max-height:42px;width:auto;flex-shrink:0}
.contenido{padding:24px;max-width:1280px;width:100%;margin:0 auto}

/* ---------- componentes ---------- */
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta__cuerpo{padding:20px}
.tarjeta__titulo{padding:16px 20px;border-bottom:1px solid var(--linea);font-weight:700}

.rejilla{display:grid;gap:16px}
.rejilla--kpi{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

.kpi{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;box-shadow:var(--sombra)}
.kpi__label{font-size:.8rem;font-weight:600;color:var(--gris);margin-bottom:6px}
.kpi__valor{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.kpi--ok .kpi__valor{color:var(--ok)}
.kpi--info .kpi__valor{color:var(--info)}
.kpi--alerta .kpi__valor{color:var(--alerta)}
.kpi--neg .kpi__valor{color:var(--peligro)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--radio-sm);border:1px solid transparent;
  font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s;
}
.btn--primario{background:var(--azul);color:#fff}
.btn--primario:hover{background:var(--azul-oscuro);text-decoration:none}
.btn--fantasma{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--fantasma:hover{background:var(--fondo);text-decoration:none}
.btn--peligro{background:var(--peligro);color:#fff}
.btn--peligro:hover{background:#DC2626;text-decoration:none}
.btn--bloque{width:100%}
/* colores para las acciones de fila (como el escritorio) */
.btn--wa{background:#25D366;color:#fff}
.btn--wa:hover{background:#1EA854;text-decoration:none}
.btn--info{background:var(--azul);color:#fff}
.btn--info:hover{background:var(--azul-oscuro);text-decoration:none}
.btn--gris{background:#64748B;color:#fff}
.btn--gris:hover{background:#475569;text-decoration:none}
.btn--oscuro{background:#334155;color:#fff}
.btn--oscuro:hover{background:#1E293B;text-decoration:none}
.btn[disabled],.btn.deshab{background:#CBD5E1;color:#fff;cursor:not-allowed;pointer-events:none}

.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;margin-bottom:6px;font-size:.88rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 12px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--tinta);min-height:42px;
}
.campo textarea{min-height:auto;line-height:1.55}
textarea{width:100%;font-family:inherit;font-size:.95rem;padding:11px 12px;border:1px solid var(--linea);border-radius:var(--radio-sm);color:var(--tinta);background:#fff;line-height:1.55}
textarea.observaciones{display:block;width:100%;min-height:180px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)}

.aviso{padding:12px 16px;border-radius:var(--radio-sm);margin-bottom:16px;font-size:.9rem;font-weight:600}
.aviso--error{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.aviso--ok{background:#F0FDF4;color:#166534;border:1px solid #BBF7D0}

.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;padding:10px 12px;color:var(--gris);font-weight:700;border-bottom:2px solid var(--linea)}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea)}
.tabla tr:hover td{background:var(--fondo)}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700}
.badge--ok{background:#DCFCE7;color:#166534}
.badge--alerta{background:#FEF3C7;color:#92400E}
.badge--peligro{background:#FEE2E2;color:#991B1B}

.badge-doc{display:inline-block;padding:8px 16px;border-radius:8px;font-weight:800;font-size:.95rem;
  background:#E0F2FE;color:var(--azul)}
.badge-doc.editando{background:#B91C1C;color:#fff}

/* Estado del documento: color por valor */
.estado-sel,.estado-chip{
  border:0;color:#fff;font-weight:700;border-radius:6px;padding:6px 10px;font:inherit;
  font-size:.8rem;background:#94A3B8;cursor:pointer;
}
.estado-chip{display:inline-block;cursor:default}
.estado-sel option{color:#1E293B;background:#fff}
[data-estado="Pendiente"],[data-estado="Emitida"]{background:#F59E0B !important}
[data-estado="Aprobada"],[data-estado="Pagada"]{background:#10B981 !important}
[data-estado="Rechazada"],[data-estado="Anulada"]{background:#EF4444 !important}
[data-estado="Recibida - Por Pagar"]{background:#3B82F6 !important}

.pie{color:var(--gris-claro);font-size:.78rem;text-align:center;padding:24px 0}

/* ---------- login ---------- */
.login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--fondo) url("../img/fondo-login.jpg") center/cover no-repeat;
}
.login__tarjeta{
  width:100%;max-width:400px;background:#fff;border-radius:14px;box-shadow:var(--sombra-fuerte);
  padding:40px 36px;text-align:center;
}
.login__logo{max-width:190px;margin:0 auto 8px;display:block}
.login__sub{color:var(--gris);margin-bottom:26px;font-size:.9rem}
.login .campo{text-align:left}
.login__pie{margin-top:22px;color:var(--gris-claro);font-size:.76rem}

/* ---------- responsivo ---------- */
/* ---------- utilidades ---------- */
.barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.barra .crece{flex:1}
/* inputs sueltos dentro de .barra (no van dentro de .campo) -> misma altura que los botones */
.barra input,.barra select{
  height:46px;padding:0 14px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--tinta);
}
.barra input:focus,.barra select:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.barra .btn{height:46px}
/* campo de búsqueda: ancho cómodo, nunca de lado a lado ni parte el botón */
.buscador{flex:0 0 340px;width:340px}
/* buscador que ocupa el ancho disponible (Historial, como el escritorio) */
.barra--ancho .buscador{flex:1 1 auto;width:auto}
.barra--split{justify-content:space-between;flex-wrap:wrap;row-gap:12px}
.barra--split .grupo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.barra--split .grupo--buscar{flex-wrap:nowrap;flex-shrink:0}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.entre{display:flex;justify-content:space-between;align-items:center;gap:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1 / -1}
.der{text-align:right}
.muted{color:var(--gris)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--fondo);border:1px solid var(--linea);font-size:.8rem}
.totales{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:.95rem}
.totales .grande{font-size:1.35rem;font-weight:800}
.tabla input,.tabla select{padding:6px 8px;border:1px solid var(--linea);border-radius:6px;font:inherit;width:100%}
.mini{padding:6px 10px;font-size:.8rem}
select{background:#fff}
.paginador{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:14px}
.paginador a,.paginador span{padding:6px 12px;border:1px solid var(--linea);border-radius:6px;font-weight:600;font-size:.85rem}
.paginador a:hover{background:var(--fondo);text-decoration:none}
/* Historial: cada documento como tarjeta (igual que el escritorio) */
.doc-lista{display:flex;flex-direction:column;gap:10px}
.doc-card{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 16px;box-shadow:var(--sombra);
}
.doc-card__id{min-width:220px;flex:1 1 220px}
.doc-card__num{font-weight:800;font-size:.98rem}
.doc-card__meta{color:var(--gris);font-size:.82rem;margin-top:2px}
.doc-card__monto{font-weight:800;color:var(--azul);font-size:1rem;white-space:nowrap}
.doc-card__estado{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-card__acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.doc-vacio{color:var(--gris);padding:24px;text-align:center;background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio)}
@media (max-width:900px){
  .doc-card__acciones{margin-left:0;width:100%;justify-content:flex-start}
}

.info-tercero{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:10px 12px;font-size:.85rem;color:#1E40AF;margin-top:8px}
.info-tercero.no{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}

/* RUT: número + guión + dígito verificador */
.rut-box{display:flex;gap:8px;align-items:center;max-width:280px}
.rut-box input[data-rut]{flex:1;text-align:right;letter-spacing:.3px}
.rut-box input[data-dv]{width:54px;text-align:center;font-weight:700}
.rut-box span{font-weight:700;color:var(--gris)}

/* Bloque "agregar ítem": campos con altura cómoda, no una tira larga */
.item-add{display:grid;grid-template-columns:1fr 150px 128px auto;gap:12px;align-items:end}
.item-add .btn{height:42px}
.item-add label{font-size:.8rem}
.tabla--items td,.tabla--items th{padding:12px}
.tabla--items tbody td{font-size:.92rem}

/* Selector de cantidad con flechas - / + */
.cant{display:flex;align-items:stretch;border:1px solid var(--linea);border-radius:var(--radio-sm);overflow:hidden;height:42px}
.cant button{width:38px;border:0;background:var(--fondo);color:var(--tinta);font-size:1.1rem;font-weight:700;cursor:pointer;line-height:1}
.cant button:hover{background:#E2E8F0}
.cant input{width:100%;border:0;text-align:center;font:inherit;min-height:auto;padding:0;-moz-appearance:textfield}
.cant input::-webkit-outer-spin-button,.cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Barra inferior fija (acciones + totales) al crear documento */
.barra-fija{
  position:sticky;bottom:0;z-index:8;margin:16px -24px 0;
  background:var(--tarjeta);border-top:1px solid var(--linea);
  box-shadow:0 -4px 16px rgba(16,24,40,.08);
}
.barra-fija__inner{max-width:1280px;margin:0 auto;padding:14px 24px}
@media (max-width:900px){
  .barra-fija{margin:16px -16px 0}
  .barra-fija__inner{padding:12px 16px}
  .barra-fija__inner{flex-direction:column;align-items:stretch;gap:10px}
  .barra-fija .totales{align-items:flex-start}
}

/* Popup / modal */
.modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;background:rgba(15,23,42,.55);overflow-y:auto;
}
.modal[hidden]{display:none !important}   /* gana al display:flex de arriba */
.modal__panel{
  width:100%;max-width:640px;background:var(--tarjeta);border-radius:var(--radio);
  box-shadow:var(--sombra-fuerte);overflow:hidden;
}
.modal__cab{padding:14px 20px;border-bottom:1px solid var(--linea);background:var(--azul);color:#fff;
  display:flex;justify-content:space-between;align-items:center}
.modal__cab b{font-size:1rem}
.modal__titulo{font-size:1.15rem;font-weight:800;text-align:center;margin:16px 0 4px}
.modal__rut{text-align:center;color:var(--azul);font-weight:700;margin-bottom:6px}
.modal__x{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:#fff}
.modal__x:hover{color:#E0F2FE}
.modal__cuerpo{padding:20px}
.modal__pie{display:flex;gap:10px;padding:16px 20px;border-top:1px solid var(--linea);background:var(--fondo)}

/* Dashboard / métricas */
.grafico{position:relative;width:100%;height:320px}
.grafico--chico{height:330px}
.rejilla--2{grid-template-columns:1fr 1fr}
@media (max-width:900px){
  .item-add{grid-template-columns:1fr 1fr}
  .item-add .btn{grid-column:1 / -1}
  .rejilla--2{grid-template-columns:1fr}
}

@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:column}
  .sidebar__bloque{margin:0 14px 10px}
  .contenido{padding:16px}
  .topbar{padding:0 16px}
  .topbar__logo{height:30px}
  .form-grid{grid-template-columns:1fr}
  .buscador{flex:1 1 auto;width:auto}
  .barra--split .grupo--buscar{flex:1 1 100%}
}