/* Paleta y tipografía tomadas como referencia visual del panel de vendedor
   de Boncor (/root/boncor/panel_vendedor.py, solo lectura, nunca se linkea
   ni se toca ese repo): fondo casi negro, acento ámbar, tarjetas en
   #18181c con borde #2e2e38. Reescrito acá para el visor de LISTAS. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'DM Sans',sans-serif;
  background:#0f0f11;
  color:#e8e8f0;
  min-height:100vh;
}

/* ---------------------------------------------------------------- login */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-box{
  background:#18181c;
  border:1px solid #2e2e38;
  border-radius:12px;
  padding:32px;
  width:100%;
  max-width:360px;
}
.login-box h1{font-size:18px;font-weight:700;color:#ffb800;margin-bottom:4px;letter-spacing:.02em;}
.login-box .sub{font-size:13px;color:#8888a0;margin-bottom:24px;}
.login-box label{display:block;font-size:12px;color:#8888a0;margin-bottom:6px;font-weight:600;}
.login-box input[type=password]{
  background:#0f0f11;border:1px solid #2e2e38;border-radius:8px;color:#e8e8f0;
  font-family:'DM Sans',sans-serif;font-size:14px;padding:11px 14px;outline:none;width:100%;
  margin-bottom:16px;
}
.login-box input[type=password]:focus{border-color:#ffb800;}
.login-box button{
  background:#ffb800;color:#000;border:none;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  padding:12px 20px;cursor:pointer;width:100%;
}
.login-box button:hover{background:#ffc933;}
.login-error{color:#ef4444;font-size:13px;margin-bottom:16px;}

/* ----------------------------------------------------------------- grid */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid #2e2e38;background:#18181c;
}
.top-bar h1{font-size:16px;font-weight:700;color:#ffb800;letter-spacing:.02em;}
.top-bar .sub{font-size:12px;color:#8888a0;margin-top:2px;}
.top-bar-right{display:flex;align-items:center;gap:10px;}

input[type=text].filtro-rapido{
  background:#0f0f11;border:1px solid #2e2e38;border-radius:8px;color:#e8e8f0;
  font-family:'DM Sans',sans-serif;font-size:13px;padding:9px 12px;outline:none;
  width:260px;
}
input[type=text].filtro-rapido:focus{border-color:#ffb800;}

select.selector-proveedor{
  background:#0f0f11;border:1px solid #2e2e38;border-radius:8px;color:#e8e8f0;
  font-family:'DM Sans',sans-serif;font-size:13px;padding:9px 12px;outline:none;
  max-width:280px;
}
select.selector-proveedor:focus{border-color:#ffb800;}

button.btn{
  background:transparent;color:#e8e8f0;border:1px solid #2e2e38;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  padding:9px 14px;cursor:pointer;
}
button.btn:hover{border-color:#ffb800;color:#ffb800;}

#panel-columnas{
  position:absolute;top:56px;right:20px;background:#18181c;border:1px solid #2e2e38;
  border-radius:8px;padding:12px 16px;max-height:70vh;overflow-y:auto;z-index:20;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#panel-columnas.oculto{display:none;}
#panel-columnas label{display:flex;align-items:center;gap:8px;font-size:12px;color:#e8e8f0;
  padding:4px 0;cursor:pointer;}

#grid-wrap{height:calc(100vh - 60px);width:100%;padding:10px 20px 20px;}
#grid{height:100%;width:100%;}

#estado-guardado{font-size:11px;color:#6a6a7a;}

#panel-fila{
  position:fixed;top:0;right:0;height:100vh;width:420px;background:#18181c;
  border-left:1px solid #2e2e38;box-shadow:-8px 0 24px rgba(0,0,0,.5);
  z-index:30;display:flex;flex-direction:column;
}
#panel-fila.oculto{display:none;}
.panel-fila-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #2e2e38;
  font-size:13px;font-weight:700;color:#ffb800;letter-spacing:.02em;
}
#panel-fila-contenido{
  flex:1;overflow:auto;padding:16px;margin:0;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;
  color:#e8e8f0;white-space:pre-wrap;word-break:break-word;
}

a.btn{text-decoration:none;display:inline-flex;align-items:center;}

/* -------------------------------------------------------------- /columnas */
#col-wrap{padding:16px 20px;overflow:auto;height:calc(100vh - 60px);}
table.tabla-col{width:100%;border-collapse:collapse;font-size:12.5px;}
table.tabla-col thead th{
  position:sticky;top:0;background:#18181c;text-align:left;padding:8px 10px;
  border-bottom:1px solid #2e2e38;color:#8888a0;font-weight:600;white-space:nowrap;
}
table.tabla-col{table-layout:fixed;}
table.tabla-col th:nth-child(1){width:110px;}   /* estado */
table.tabla-col th:nth-child(2){width:150px;}   /* proveedor */
table.tabla-col th:nth-child(3){width:220px;}   /* archivo */
table.tabla-col th:nth-child(4){width:140px;}   /* hoja */
table.tabla-col th:nth-child(5){width:90px;}    /* descripción */
table.tabla-col th:nth-child(6){width:80px;}    /* códigos */
table.tabla-col th:nth-child(7){width:80px;}    /* precios */
table.tabla-col th:nth-child(8){width:90px;}    /* pertenencia */
table.tabla-col th:nth-child(9){width:60px;}    /* filas */
table.tabla-col th:nth-child(10){width:340px;}  /* motivo */
table.tabla-col tbody td{
  padding:7px 10px;border-bottom:1px solid #1c1c22;vertical-align:top;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
table.tabla-col tbody tr{cursor:pointer;}
table.tabla-col tbody tr:hover{background:#18181c;}
table.tabla-col td.motivo{color:#8888a0;}
tr.fila-estado-sospechoso td:first-child{color:#ef4444;font-weight:700;}
tr.fila-estado-sin-detectar td:first-child{color:#ffb800;font-weight:700;}
tr.fila-estado-confirmado td:first-child{color:#22c55e;}
tr.fila-estado-propuesto td:first-child{color:#8888a0;}
tr.fila-estado-no-es-lista td:first-child{color:#6a6a7a;font-style:italic;}

#panel-detalle{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;
  display:flex;align-items:flex-start;justify-content:center;padding:32px 20px;
}
#panel-detalle.oculto{display:none;}
#panel-detalle.pantalla-completa{padding:0;}
.panel-detalle-inner{
  background:#18181c;border:1px solid #2e2e38;border-radius:12px;
  width:100%;max-width:1100px;max-height:calc(100vh - 64px);display:flex;flex-direction:column;
}
.panel-detalle-inner.pantalla-completa{
  max-width:none;max-height:none;width:100vw;height:100vh;border-radius:0;
}
.panel-fila-header-botones{display:flex;gap:8px;}
#detalle-cuerpo{padding:16px;overflow:auto;flex:1;}
.detalle-fila-motivo{font-size:13px;color:#ffb800;margin-bottom:12px;}
.detalle-control{
  display:flex;align-items:center;gap:10px;margin:14px 0;font-size:13px;flex-wrap:wrap;
}
.detalle-control select{
  background:#0f0f11;border:1px solid #2e2e38;border-radius:6px;color:#e8e8f0;
  font-family:'DM Sans',sans-serif;font-size:13px;padding:6px 8px;
}
#resultado-previsualizacion,#resultado-confirmar{font-size:12.5px;color:#8888a0;}
button.btn-confirmar{background:#22c55e;color:#000;border-color:#22c55e;font-weight:700;}
button.btn-confirmar:hover{background:#4ade80;}
button.btn:disabled{opacity:.5;cursor:not-allowed;}

#resultado-confirmar.banner-exito{
  display:block;background:rgba(34,197,94,.15);color:#4ade80;border:1px solid #22c55e;
  border-radius:8px;padding:10px 14px;font-weight:600;margin-top:4px;
}
#resultado-confirmar.banner-error{
  display:block;background:rgba(239,68,68,.15);color:#ef4444;border:1px solid #ef4444;
  border-radius:8px;padding:10px 14px;font-weight:600;margin-top:4px;
}
.aviso-no-lista{
  background:rgba(255,184,0,.12);color:#ffb800;border:1px solid #ffb800;border-radius:8px;
  padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:12px;
}
.aviso-no-lista.oculto{display:none;}

tr.fila-resaltada td{
  background:rgba(255,184,0,.25) !important;
  transition:background 2s ease-out;
}

.panel-detalle-inner.pantalla-completa #crudo-wrap{max-height:none;flex:1;}
#crudo-wrap{overflow:auto;max-height:52vh;border:1px solid #2e2e38;border-radius:8px;}
#tabla-crudo{border-collapse:collapse;font-size:12px;table-layout:fixed;min-width:100%;}
#tabla-crudo th{
  background:#0f0f11;padding:6px 8px;border-bottom:1px solid #2e2e38;
  border-right:1px solid #1c1c22;vertical-align:top;position:sticky;top:0;
  width:150px;
}
#tabla-crudo th div{color:#8888a0;font-weight:600;margin-bottom:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
#tabla-crudo select{
  background:#0f0f11;border:1px solid #2e2e38;border-radius:6px;color:#ffb800;
  font-family:'DM Sans',sans-serif;font-size:12px;padding:3px 4px;width:100%;
}
#tabla-crudo th.col-numero-fila,
#tabla-crudo td.col-numero-fila{
  width:52px;color:#6a6a7a;text-align:right;font-variant-numeric:tabular-nums;
}
#tabla-crudo td{padding:5px 8px;border-bottom:1px solid #1c1c22;border-right:1px solid #1c1c22;
  white-space:nowrap;color:#e8e8f0;overflow:hidden;text-overflow:ellipsis;max-width:0;}
#tabla-crudo tr.fila-crudo-encabezado td{color:#6a6a7a;background:#141417;}

/* --------------------------------------------------- columnas redimensionables */
.resizer{
  position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;
  user-select:none;touch-action:none;
}
.resizer:hover,body.redimensionando-columna .resizer{background:#ffb800;opacity:.6;}
body.redimensionando-columna{cursor:col-resize;user-select:none;}

/* ---------------------------------------------------- /columnas/ver (hoja completa) */
#ver-wrap{height:calc(100vh - 90px);overflow:auto;}
table.tabla-completa{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;}
table.tabla-completa thead th{
  position:sticky;top:0;background:#18181c;color:#ffb800;font-weight:700;
  padding:6px 10px;border-bottom:1px solid #2e2e38;border-right:1px solid #1c1c22;
  text-align:center;z-index:2;
}
table.tabla-completa th.esquina-fija{position:sticky;top:0;left:0;z-index:3;background:#18181c;}
table.tabla-completa th.fila-fija{
  position:sticky;left:0;background:#18181c;color:#8888a0;font-weight:600;
  padding:5px 10px;border-right:1px solid #2e2e38;border-bottom:1px solid #1c1c22;
  text-align:right;z-index:1;
}
table.tabla-completa tbody td{
  padding:5px 10px;border-bottom:1px solid #1c1c22;border-right:1px solid #1c1c22;
  color:#e8e8f0;max-width:320px;overflow:hidden;text-overflow:ellipsis;
}
table.tabla-completa tbody tr:hover td{background:#141417;}