:root {
  --fondo: #f4f5f7; --panel: #ffffff; --texto: #1f2328; --suave: #5b6470; --borde: #d6dae0;
  --marca: #0d3b66; --turquesa: #14a89a; --acento: #1f6feb; --ok: #1a7f37; --pend: #9a6700; --mal: #cf222e;
  --beta: #cf222e; --prod: #1f6feb;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
a { color: var(--acento); }

.barra { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--marca); color: #fff; flex-wrap: wrap; }
.marca { display: flex; align-items: center; background: #fff; border-radius: 8px; padding: 3px 8px; }
.marca img { height: 30px; display: block; }
.barra { border-bottom: 3px solid var(--turquesa); }
.logo-login { width: 100%; max-width: 300px; margin: 0 auto 4px; display: block; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; }
.menu a { color: #dfe7f2; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.menu a:hover { background: rgba(255,255,255,.12); }
.menu a.activo { background: #fff; color: var(--marca); }
.ambiente { padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 11px; background: var(--beta); color: #fff; }
body.amb-produccion .ambiente { background: var(--prod); }
.presencia { display: flex; gap: 6px; flex: 1; overflow-x: auto; min-width: 0; }
.persona { white-space: nowrap; background: rgba(255,255,255,.14); padding: 3px 8px; border-radius: 999px; font-size: 11px; }
.persona.yo { opacity: .6; }
.persona b { color: #ffd166; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.usuario a, .usuario .enlace { color: #dfe7f2; background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.usuario form { margin: 0; }

.hoja { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 8px; }
.herramientas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.herramientas input[type=search] { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 6px; min-width: 220px; }
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; }
.pestana { border: 1px solid var(--borde); background: var(--panel); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-weight: 600; }
.pestana.activo { background: var(--marca); color: #fff; border-color: var(--marca); }
.estado { color: var(--suave); margin-left: auto; }
#grilla { flex: 1; min-height: 300px; background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; }

.boton { border: 1px solid var(--borde); background: var(--panel); color: var(--texto); border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 600; }
.boton:hover { border-color: var(--acento); }
.boton.primario { background: var(--acento); color: #fff; border-color: var(--acento); }
.boton:disabled { opacity: .5; cursor: wait; }

.tabulator { font-size: 12px; }
.tabulator .tabulator-header .tabulator-col { background: #e9edf3; }
.tabulator .tabulator-header .tabulator-col-title { font-weight: 700; }
.tabulator-row .tabulator-cell.celda-auto { background: #f3f5f8; color: #3b4450; }
.tabulator-row.fila-activa .tabulator-cell { background: #eef4ff; }
.tabulator-row.fila-activa .cabecera-fila { box-shadow: inset 4px 0 0 var(--acento); }
.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background: #cfe0ff !important; }
.tabulator .tabulator-cell.tabulator-range-only-cell-selected { outline: 2px solid var(--acento); outline-offset: -2px; }
.cabecera-fila { color: var(--suave); font-size: 11px; background: #eef1f5; }
#ayuda:empty { display: none; }
.lista-pop { position: fixed; z-index: 60; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--borde);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 12px; }
.lista-pop .op { padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.lista-pop .op:hover { background: #eef4ff; }
.lista-pop .op.activa { background: var(--acento); color: #fff; }
.lista-pop .vacio { padding: 6px 10px; color: var(--suave); }
.filtro-btn { width: 100%; text-align: left; font: inherit; font-size: 11px; padding: 3px 6px; border: 1px solid var(--borde);
  border-radius: 4px; background: #fff; color: var(--suave); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filtro-btn.activo, .filtro-mes.activo { background: #ddf4ff; color: var(--acento); border-color: var(--acento); font-weight: 700; }
.filtro-pop { position: fixed; z-index: 70; width: 280px; background: #fff; border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.filtro-orden { display: flex; flex-direction: column; border-bottom: 1px solid #eef0f3; padding-bottom: 4px; }
.filtro-orden button { background: none; border: 0; text-align: left; padding: 4px 6px; cursor: pointer; font: inherit; border-radius: 4px; }
.filtro-orden button:hover { background: #eef4ff; }
.filtro-buscar { padding: 5px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.filtro-lista { max-height: 240px; overflow-y: auto; border: 1px solid #eef0f3; border-radius: 6px; padding: 2px 0; }
.filtro-item { display: flex; gap: 6px; align-items: center; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.filtro-item:hover { background: #f3f6fb; }
.filtro-item.todos { font-weight: 700; }
.filtro-lista .vacio { padding: 6px 8px; color: var(--suave); }
.filtro-botones { display: flex; gap: 6px; align-items: center; }
.filtro-botones span { flex: 1; }
.filtro-botones .boton { padding: 4px 8px; font-size: 12px; }
.clip { cursor: pointer; font-weight: 700; color: var(--marca); }
.pista { color: #b0b7c0; font-style: italic; font-size: 11px; }
.concepto textarea { flex: 1; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; resize: vertical; }
.concepto .quitar { padding: 4px 9px; }
.atajos { font-size: 11px; }
.tabulator-row.bloqueada { box-shadow: inset 4px 0 0 #fb8500; }
.tabulator-row.bloqueada .tabulator-cell { background: #fff4e5 !important; }
.tabulator-row.emitida .tabulator-cell[tabulator-field=n_fact] { color: var(--ok); font-weight: 700; }
.tabulator-row.pendiente .tabulator-cell { background: #fff8c5; }
.tabulator-row.con-nota .tabulator-cell:first-child { box-shadow: inset 3px 0 0 #8250df; }
.editor-fecha { width: 100%; border: 0; font: inherit; }
.chip { padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.chip.ok { background: #dafbe1; color: var(--ok); }
.chip.pend { background: #fff8c5; color: var(--pend); }
.chip.curso { background: #ddf4ff; color: var(--acento); }
.chip.mal { background: #ffebe9; color: var(--mal); }

.aviso { position: fixed; right: 16px; bottom: 16px; max-width: 460px; padding: 12px 16px; border-radius: 8px; color: #fff; background: var(--mal); box-shadow: 0 8px 24px rgba(0,0,0,.2); z-index: 50; font-weight: 600; }
.aviso.ok { background: var(--ok); }
.aviso.pend { background: var(--pend); }

.dialogo { border: 0; border-radius: 10px; padding: 0; width: min(780px, 96vw); max-height: 92vh; box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.dialogo select { padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; max-width: 100%; }
.fila-moneda { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.dias-credito { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.form-ingreso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.form-ingreso label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; font-size: 12px; }
.form-ingreso .ancho { grid-column: span 3; }
.sub-dlg { margin: 6px 0 0; font-size: 14px; color: var(--marca); }
#i-tabla select { width: 100%; }
.dialogo form { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dialogo h2 { margin: 0; font-size: 17px; }
.dialogo input { padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.dlg-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.concepto { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.concepto .c-desc { flex: 1; }
.concepto .c-imp, .concepto .q-m { width: 140px; text-align: right; }
.tabla-previa { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.tabla-previa th, .tabla-previa td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.tabla-previa th { width: 170px; color: var(--suave); font-weight: 600; }
.tabla-previa.totales td { font-weight: 700; }
.num { text-align: right !important; }
.previa { padding: 6px 10px; border-radius: 6px; color: #fff; font-weight: 700; }
.previa.beta { background: var(--beta); }
.previa.prod { background: var(--prod); }
.nota { color: var(--suave); font-size: 12px; }

.login { flex: 1; display: grid; place-items: center; padding: 20px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 28px; width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; }
.tarjeta h1 { margin: 0; color: var(--marca); }
.tarjeta .sub { margin: -6px 0 6px; color: var(--suave); }
.tarjeta label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.tarjeta input { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.error { color: var(--mal); margin: 0; font-weight: 600; }

.pagina { padding: 16px; max-width: 1100px; width: 100%; margin: 0 auto; }
.pagina h1 { color: var(--marca); margin-top: 0; }
.pagina h2 { font-size: 15px; color: var(--marca); margin: 20px 0 6px; }
.tabla-simple { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--borde); }
.tabla-simple th, .tabla-simple td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: top; }
.tabla-simple th { background: #e9edf3; }
.tabla-simple input { width: 100%; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.caja-ambiente { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--borde); margin-bottom: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- DOCUMENTOS */
.docs { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 8px; }
.explorador { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px 1fr; gap: 10px; }
.carpetas { background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; overflow-y: auto; padding: 6px; }
.carpeta { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.carpeta:hover { background: #f3f6fb; }
.carpeta.activa { background: #e3eefc; font-weight: 700; }
.carpeta.sub { padding-left: 30px; font-size: 12px; }
.carpeta .nombre { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carpeta .cuenta { color: var(--suave); font-size: 11px; background: #eef1f5; border-radius: 999px; padding: 0 7px; }
.plegar { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 12px; }
.archivos { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ruta { font-weight: 700; color: var(--marca); }
.tabla-docs { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; }
#d-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
#d-tabla th { position: sticky; top: 0; background: #e9edf3; text-align: left; padding: 6px 8px; z-index: 1; }
#d-tabla td { padding: 5px 8px; border-bottom: 1px solid #eef0f3; white-space: nowrap; }
#d-tabla tr:hover td { background: #f7f9fc; }
.subir { position: relative; }
@media (max-width: 800px) { .explorador { grid-template-columns: 1fr; } .carpetas { max-height: 200px; } }

/* ------------------------------------------------ colores de fila (pastel) */
.tabulator-row.color-rojo .tabulator-cell { background: #fde2e2; }
.tabulator-row.color-naranja .tabulator-cell { background: #fee9d6; }
.tabulator-row.color-amarillo .tabulator-cell { background: #fff6c7; }
.tabulator-row.color-verde .tabulator-cell { background: #ddf4e4; }
.tabulator-row.color-celeste .tabulator-cell { background: #dcf1fb; }
.tabulator-row.color-azul .tabulator-cell { background: #dfe7fb; }
.tabulator-row.color-lila .tabulator-cell { background: #ece3fa; }
.tabulator-row.color-rosado .tabulator-cell { background: #fbe3f1; }
.tabulator-row.color-gris .tabulator-cell { background: #eceff3; }
.tabulator-row.fila-activa[class*="color-"] .tabulator-cell { filter: brightness(.96); }
.paleta { position: fixed; z-index: 80; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.2); display: grid; grid-template-columns: repeat(2, 110px); gap: 6px; }
.paleta .nota { grid-column: span 2; }
.muestra { border: 1px solid var(--borde); border-radius: 6px; padding: 6px 8px; cursor: pointer; font: inherit; text-align: left; }
.muestra.color-ninguno { background: #fff; }
.muestra.color-rojo { background: #fde2e2; } .muestra.color-naranja { background: #fee9d6; } .muestra.color-amarillo { background: #fff6c7; }
.muestra.color-verde { background: #ddf4e4; } .muestra.color-celeste { background: #dcf1fb; } .muestra.color-azul { background: #dfe7fb; }
.muestra.color-lila { background: #ece3fa; } .muestra.color-rosado { background: #fbe3f1; } .muestra.color-gris { background: #eceff3; }
.boton.peligro { color: var(--mal); border-color: #f2b8b5; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rol-caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.rol-caja b { color: var(--marca); }
.rol-caja span { color: var(--suave); font-size: 12px; }

/* viaje cerrado: verde pastel, por encima de cualquier color */
.tabulator-row.viaje-cerrado .tabulator-cell { background: #d7f2dd !important; color: #2f4f38; }
.tabulator-row.viaje-cerrado .cabecera-fila { box-shadow: inset 4px 0 0 #3fa35b; }
.boton.cerrar { background: #e7f6ea; border-color: #9fd3ab; color: #1f6b35; }