/* LARS: misma estructura de pantalla que ControlBox ONE (barra negra con menus,
   banda gris de titulo, paneles con borde azul y barra inferior de accesos). */
:root {
  --bg: #ffffff;
  --text: #222;
  --muted: #666;
  --bar: #121212;
  --bar-2: #2c2c2c;
  --bar-text: #cfcfcf;
  --band: #9b9b9b;
  --panel-border: #a9d1f1;
  --input-border: #c4c4c4;
  --btn-1: #2a8be0;
  --btn-2: #0a52b5;
  --link: #0b3d91;
  --danger: #b3261e;
  --ok: #2e7d32;
  --row-alt: #f3f8fd;
  --head: #e3eef8;
  --aviso-fondo: #fff6e0;
  --aviso-texto: #7a5200;
  --aviso-borde: #f0d9a4;
  --cb-cabecera: #0b84d0;
  --cb-celda: #d6ebfb;
  --cb-pie: #b7daf3;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 12px/1.45 "Trebuchet MS", "Segoe UI", Tahoma, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--link); }

/* ---- Login ---- */
.login { min-height: 100vh; background: #2096c6; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); background: linear-gradient(#fff, #ececec); border-radius: 14px;
  padding: 30px; display: grid; gap: 10px; }
.login-card h1 { margin: 0; color: #2b9ad3; font-size: 24px; }
.login-sub { margin: -6px 0 10px; color: #888; font-size: 11px; }
.login-card input, .login-card select { height: 44px; font-size: 17px; padding: 0 8px;
  border: 1px solid #ccc; border-radius: 4px; }
.login-error { color: var(--danger); min-height: 1.2em; margin: 0; }

/* ---- Barra superior ---- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 20px; min-height: 42px;
  background: linear-gradient(var(--bar-2), var(--bar)); }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu > li { position: relative; }
.menu > li > button { background: none; border: 0; color: var(--bar-text); font: inherit;
  padding: 12px 15px; cursor: pointer; }
.menu > li > button::after { content: ""; display: inline-block; margin-left: 5px; vertical-align: middle;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.menu > li > button.gear::after { display: none; }
.menu > li > button:hover, .menu > li.open > button { color: #fff; background: rgba(255, 255, 255, .08); }
.dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 270px; margin: 0;
  max-height: calc(100vh - 90px); overflow-y: auto; list-style: none; padding: 4px 0;
  background: #1d1d1d; border: 1px solid #000; border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.menu > li.open .dropdown { display: block; }
.dropdown a { display: block; padding: 5px 16px; color: #e2e2e2; text-decoration: none; white-space: nowrap; }
.dropdown a:hover, .dropdown a:focus { background: var(--btn-2); color: #fff; outline: none; }
.dropdown a.pendiente { color: #8a8a8a; }
.quick-search input { width: 190px; height: 26px; border-radius: 13px; border: 2px solid #777;
  background: #4a4a4a; color: #fff; padding: 0 12px; font: inherit; font-size: 13px; }
.quick-search input::placeholder { color: #ddd; }

/* ---- Banda de titulo y contenido ---- */
.title-band { background: var(--band); padding: 9px 22px; }
.title-band h1 { margin: 0; color: #fff; font-size: 18px; }
.view { padding: 10px 22px 60px; }

/* ---- Paneles y formularios ---- */
.panel { border: 3px solid var(--panel-border); border-radius: 8px; padding: 6px 8px 10px; background: #fff; }
.panel > h2 { margin: 0 0 6px; font-size: 14px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 860px; align-items: start; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-end; margin-bottom: 5px; }
.f { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.f > span { font-size: 11px; color: #333; }
.f.grow { flex: 1 1 140px; }
.form-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 5px 6px; align-items: end; }
.form-grid input:not([type=checkbox]), .form-grid select { width: 100%; }
.rango { display: flex; align-items: center; gap: 4px; }
.rango input { width: 64px; }
@media (max-width: 760px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.req::after { content: " *"; color: #d00; }
.check { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { font: inherit; color: var(--text);
  border: 1px solid var(--input-border); padding: 2px 4px; min-height: 21px; background: #fff; max-width: 100%; }
input[readonly] { background: #f5f5f5; }
textarea { resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #7db9ec; outline-offset: 0; }
.btn { font: bold 13px/1 "Trebuchet MS", sans-serif; color: #fff; cursor: pointer; padding: 6px 12px;
  background: linear-gradient(var(--btn-1), var(--btn-2)); border: 1px solid #08449a; border-radius: 3px; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-block { width: 100%; padding: 10px; font-size: 16px; }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-gris { background: linear-gradient(#f4f4f4, #d9d9d9); color: #222; border-color: #aaa; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.totales .v { font-weight: bold; font-size: 13px; text-align: right; min-width: 80px; }
.totales .total { font-size: 16px; }
.totales > input { justify-self: end; width: 90px; text-align: right; }
.totales span input { width: 72px; text-align: right; }
a.btn { display: inline-block; text-decoration: none; }
.mensaje { padding: 6px 10px; border-radius: 4px; margin: 6px 0; max-width: 860px; }
.mensaje.error { background: #fdecea; color: var(--danger); border: 1px solid #f5c2bd; }
.mensaje.ok { background: #e8f5e9; color: var(--ok); border: 1px solid #b9dfbb; }
.muted { color: var(--muted); }
/* Nota roja de ControlBox (texto sin recuadro, a diferencia de .mensaje.error): avisos de una accion o de un listado. */
.nota-roja { color: #e00000; font-size: 12px; }

/* ---- Tablas ---- */
.tabla-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 12px; }
table.grid th { background: var(--head); text-align: left; padding: 4px 6px; border-bottom: 1px solid #b8cfe4; white-space: nowrap; }
table.grid td { padding: 3px 6px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
table.grid tr:nth-child(even) td { background: var(--row-alt); }
table.grid .num { text-align: right; white-space: nowrap; }
table.grid tbody tr.clic { cursor: pointer; }
table.grid tbody tr.clic:hover td { background: #dcecfb; }

/* ---- Ventanas auxiliares (los popups de ControlBox) ---- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .35); }
.modal-box { background: #fff; border: 3px solid var(--panel-border); border-radius: 8px;
  width: min(760px, 100%); max-height: 85vh; overflow: auto; padding: 10px; }
.modal-box header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.modal-box h2 { margin: 0; font-size: 15px; }

/* ---- Inicio ---- */
.notif { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.notif b { text-align: right; }
.noticias { margin: 0; padding-left: 16px; }
.noticias li { margin-bottom: 8px; white-space: pre-line; }
.notif-detalles { margin: 8px 0 0; }
.notif-detalles a { font-weight: bold; }
.archivos-publicos { list-style: none; margin: 0; padding: 0; }
.archivos-publicos li { margin: 4px 0; padding-left: 22px; position: relative; }
.archivos-publicos li::before { content: ""; position: absolute; left: 2px; top: 1px; width: 11px; height: 13px;
  border: 1px solid #555; border-radius: 1px; background: linear-gradient(135deg, #fff 70%, #ccc 70%); }
.archivos-publicos a { font-weight: bold; }

/* ---- Barra inferior ---- */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 14px; padding: 4px 10px; background: #111; color: #ddd; font-size: 12px; }
.bottombar .brand { color: #2a9fe0; font-style: italic; font-weight: bold; }
.bottombar a { color: #ddd; text-decoration: none; }
.bottombar a:hover { color: #fff; }
.bottombar a.pendiente { color: #8a8a8a; }
.bottombar .user { margin-left: auto; color: #9a9a9a; }

/* ---- Configuracion (engranaje, setup.asp): tres columnas estrechas de recuadros compactos ---- */
.setup { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 14px; }
.setup-col { display: flex; flex-direction: column; gap: 6px; width: 257px; max-width: 100%; }
.setup-col-2 { width: 178px; }
.setup-col-3 { width: 249px; }
.setup-caja { border: 3px solid var(--panel-border); border-radius: 8px; background: #fff; padding: 10px 10px 6px 16px;
  box-shadow: 0 0 14px rgba(0, 0, 0, .08); }
.setup-caja h2 { margin: 2px 0 4px; font-size: 11px; font-weight: bold; color: #8a8a8a; text-transform: uppercase; }
.setup-caja ul { list-style: none; margin: 0; padding: 0; }
.setup-caja a { display: block; margin: 0 -6px; padding: 5px 6px; font-size: 11px; color: #0a7cc4; text-decoration: none; }
.setup-caja a:hover, .setup-caja a:focus { background: #ececec; outline: none; }
.setup-caja a.pendiente { color: #8a8a8a; }
@media (max-width: 600px) { .setup-col, .setup-col-2, .setup-col-3 { width: 100%; } }
/* ---- Barra lateral de busqueda rapida (lateral.js, courier.md pantalla 9) ---- */
/* z-index por debajo de la barra superior (20): sus menus desplegables quedan encima del panel. */
.lateral { position: fixed; left: 0; top: 42px; bottom: 26px; z-index: 15; width: 220px; overflow-y: auto;
  background: #fff; border: 3px solid var(--panel-border); border-left: 0; border-radius: 0 8px 8px 0;
  padding: 4px 8px 10px; box-shadow: 4px 0 14px rgba(0, 0, 0, .2); }
.lateral-tab { position: fixed; left: 0; top: 138px; z-index: 16; writing-mode: vertical-rl; cursor: pointer;
  padding: 10px 3px; font: bold 12px/1 "Trebuchet MS", sans-serif; letter-spacing: 1px; color: #fff;
  background: linear-gradient(90deg, var(--btn-1), var(--btn-2)); border: 1px solid #08449a; border-left: 0;
  border-radius: 0 4px 4px 0; box-shadow: 1px 1px 4px rgba(0, 0, 0, .25); }
.lateral-tab:hover { filter: brightness(1.08); }
.lateral-tab.abierta { left: 217px; }
.lat-contenedor h3 { margin: 6px 0 4px; font-size: 13px; }
.lat-bloque + .lat-bloque { margin-top: 8px; }
.lat-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 5px; align-items: center; }
.lat-form label { font-size: 11px; white-space: nowrap; }
.lat-form input { width: 100%; }
.lat-contenedor .mensaje { margin: 5px 0; padding: 4px 6px; }
.lat-resultados { margin-top: 4px; }
.lat-resultados > .muted { margin: 4px 0; }
.lat-lista { list-style: none; margin: 0; padding: 0; }
.lat-lista li { padding: 3px 0; border-bottom: 1px solid #e6e6e6; }
.lat-lista a { font-weight: bold; }
.lat-lista small { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.lat-lista .etiqueta-estado { font-size: 10px; padding: 0 4px; }
.lat-anulada > a { text-decoration: line-through; color: var(--danger); }
.lat-pie { margin: 4px 0 0; font-size: 11px; }
.lat-cons { word-spacing: 6px; line-height: 1.7; overflow-wrap: anywhere; }
.lat-noticias p { margin: 0 0 4px; }
.lat-error { color: var(--danger); }
.lateral-pagina { width: 320px; max-width: 100%; }
@media print { .lateral, .lateral-tab { display: none !important; } }
/* Cambio de clave forzado: sin menus ni accesos hasta cambiar la clave (solo Salir). */
body.clave-forzada #menu, body.clave-forzada #quick-search, body.clave-forzada .lateral,
body.clave-forzada .lateral-tab, body.clave-forzada .bottombar a:not(#logout) { display: none !important; }

@media print {
  .topbar, .title-band, .bottombar, .no-print { display: none !important; }
  .view { padding: 0; }
}
/* ---- Componentes comunes (LARS.ui) ---- */
.login-links { margin: 0; text-align: center; font-size: 12px; }
.publico { min-height: 100vh; padding: 16px; background: #f3f6f9; }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.paginacion .muted { margin-right: auto; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.crud-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 10px; }
.crud-form .f.ancho-total { grid-column: 1 / -1; }
table.grid th.ordenable { cursor: pointer; user-select: none; }
table.grid th.ordenable:hover { text-decoration: underline; }
table.grid td.acciones { white-space: nowrap; text-align: right; }
table.grid tfoot td, table.grid tfoot th { font-weight: bold; background: var(--head); }
.etiqueta-estado { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #e8eef5; font-size: 11px; }
.etiqueta-estado.ok { background: #e3f3e4; color: var(--ok); }
.etiqueta-estado.alerta { background: #fdecea; color: var(--danger); }
.pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--panel-border); margin-bottom: 8px; }
.pestanas button { border: 1px solid var(--panel-border); border-bottom: 0; background: #f3f8fd; padding: 5px 12px;
  border-radius: 6px 6px 0 0; cursor: pointer; font: inherit; }
.pestanas button[aria-selected="true"] { background: var(--panel-border); font-weight: bold; }
/* Aviso no bloqueante (ambar): datos guardados con advertencias, acciones que requieren un paso previo. */
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border: 1px solid var(--aviso-borde); }
/* Aviso informativo (azul): p. ej. "Agrupando N WHR". */
.mensaje.info { background: #e3f0fb; color: #0b3d91; border: 1px solid #a9d1f1; }
/* Titulos de ControlBox con espacios dobles ("Reporte Guias Sin Contenido  AGENCIA"). */
#page-title { white-space: pre-wrap; }

/* ---- Detalle de documentos (guia courier, recibo de bodega) ----
   datos-detalle: rejilla etiqueta/valor (--datos-etiqueta, 110 px por defecto); banda-roja: anulado o retenido;
   banda-info: aviso azul; panel-ancho: paneles de ancho completo bajo las columnas. */
.datos-detalle, .datos-guia { display: grid; grid-template-columns: var(--datos-etiqueta, 110px) minmax(0, 1fr); gap: 2px 8px; }
.datos-detalle > span:nth-child(odd), .datos-guia > span:nth-child(odd) { color: #555; font-size: 11px; }
.banda { max-width: 860px; margin: 6px 0; padding: 6px 10px; border-radius: 4px; font-weight: bold; }
.banda-roja { background: var(--danger); color: #fff; }
.banda-info { background: #e3eef8; color: #0b3d91; border: 1px solid #a9d1f1; }
.panel-ancho { max-width: 860px; margin-top: 8px; }
.panel-ancho h3 { font-size: 12px; margin: 8px 0 4px; }

/* ---- Fecha con el icono de calendario de ControlBox (LARS.ui.fecha) ---- */
.ui-fechas { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px 6px; }
.ui-fecha { display: inline-flex; align-items: center; gap: 3px; }
.ui-fecha input[type=date] { width: 100px; box-sizing: border-box; }
.ui-fecha input[type=date]::-webkit-calendar-picker-indicator { display: none; }
.ui-calendario { border: 0; background: none; cursor: pointer; padding: 1px; line-height: 0; vertical-align: middle; }
.ui-calendario svg { width: 18px; height: 16px; }
/* Caja de fecha vacia como en ControlBox, sin el formato mm/dd/aaaa del navegador hasta enfocarla (LARS.ui.fechasVacias) */
input[type=date].ui-fecha-vacia:not(:focus)::-webkit-datetime-edit { color: transparent; }
.ui-elegir-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 6px 0; }
.ui-elegir-enlaces { margin: 6px 0; }
.mensaje > a { margin-left: 10px; }
.mensaje ul { margin: 4px 0 0; padding-left: 18px; }

/* ---- Rejilla AxpDbGrid (LARS.ui.rejillaAxp) ---- */
.axp { font-size: 11px; }
.axp-enlaces { margin: 24px 0 10px; }
.axp-enlaces a { font-weight: bold; margin-right: 12px; }
.axp-filtros { display: inline-block; max-width: 100%; margin: 8px 0 6px; padding: 16px 22px; box-shadow: 0 0 6px rgba(0, 0, 0, .12); }
.axp-porpagina { margin: 14px 0 4px; }
.axp-porpagina select { min-height: 18px; padding: 0 2px; }
.axp-busqueda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.axp-busqueda input { width: 230px; }
.axp-busqueda .btn { font-size: 12px; padding: 4px 10px; }
.axp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 4px 0; min-height: 22px; }
.axp-nb { display: inline-grid; place-items: center; width: 21px; height: 21px; padding: 0; cursor: pointer;
  border: 1px solid #1b2a8f; border-radius: 2px; background: linear-gradient(#fff, #e3e3e3); color: #1b2a8f; }
.axp-nb svg { width: 9px; height: 9px; fill: currentColor; }
.axp-nb:not(:disabled):hover, .axp-nb:focus-visible { background: #dcecfb; }
.axp-nb:disabled { border-color: #c8c8c8; color: #b8b8b8; background: #eee; cursor: default; }
.axp-listar { margin-left: 90px; color: #111; text-decoration: underline; font-size: 12px; }
.axp-contador { margin-left: 6px; }
.axp-paginas { margin-left: 60px; }
.axp-contreg { margin: 0 0 6px 90px; }
.axp-botones { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.axp-botones .btn { font-size: 14px; padding: 7px 13px; }
table.grid.axp-tabla { width: auto; border: 1px solid #a9cff0; }
table.grid.axp-tabla.axp-estrecha { min-width: min(280px, 100%); }
table.grid.axp-tabla th { background: #a6cdef; color: #000; border-bottom: 1px solid #8fbde6; }
table.grid.axp-tabla th a { color: #000; text-decoration: none; }
table.grid.axp-tabla th a:hover, table.grid.axp-tabla th a:focus { text-decoration: underline; }
table.grid.axp-tabla td { white-space: nowrap; }
table.grid.axp-tabla td.axp-n a { color: #1a2ea0; text-decoration: none; }
table.grid.axp-tabla.axp-estrecha td.axp-n { padding-right: 24px; }
table.grid.axp-tabla tr.inactivo td, table.grid.axp-tabla tr.inactiva td { color: #8d8d8d; }
table.axp-registro { border-collapse: collapse; border: 3px solid #a9cff0; margin: 4px 0; max-width: 100%; }
table.axp-registro th { background: #a6cdef; text-align: left; vertical-align: top; white-space: nowrap; min-width: 104px;
  padding: 3px 6px; font-size: 11px; font-weight: bold; border-bottom: 1px solid #fff; }
table.axp-registro td { background: #fff; padding: 3px 4px; font-size: 13px; border-bottom: 1px solid #dcdcdc;
  min-width: min(250px, 55vw); }
table.axp-registro td input:not([type=checkbox]):not([type=radio]), table.axp-registro td select,
table.axp-registro td textarea { width: 100%; font-size: 12px; }
table.axp-registro td .row { margin: 0; flex-wrap: nowrap; }
table.axp-registro td .row input { width: auto; flex: 1; }
table.axp-registro td small { display: block; color: #666; font-size: 10px; }
.axp-nota { color: #888; margin: 2px 0; }
@media (max-width: 760px) {
  .axp-listar, .axp-contreg { margin-left: 30px; }
  .axp-paginas { margin-left: 20px; }
}

/* Ajustes que deben ganar a la regla generica de inputs. */
#quick-search input { background: #4a4a4a; color: #fff; border: 2px solid #777; }
.totales span input[type=checkbox] { width: auto; }

@media (max-width: 760px) {
  .topbar { position: static; padding: 0 8px; flex-wrap: wrap; }
  .quick-search input { width: 140px; }
  .view { padding: 10px 16px 90px; }
  .cols, .cols-3 { grid-template-columns: 1fr; }
}

/* ---- Listados con la cabecera azul de ControlBox ----
   grid-cb: cabecera azul con texto blanco. grid-cb-celdas: ademas, celdas azul claro y pie azul medio.
   Van en la tabla (<table class="grid-cb">) o en el contenedor de LARS.ui.tabla (<div class="grid-cb">).
   Al final del archivo para ganar a table.grid; las reglas propias de cada pantalla (filas marcadas, anuladas...)
   se inyectan despues y siguen ganando. */
table.grid-cb th, .grid-cb table.grid th { background: var(--cb-cabecera); color: #fff; border-bottom-color: #0a6fae; }
table.grid-cb-celdas td, table.grid-cb-celdas tr:nth-child(even) td,
.grid-cb-celdas table.grid td, .grid-cb-celdas table.grid tr:nth-child(even) td { background: var(--cb-celda); }
table.grid-cb-celdas tfoot td, .grid-cb-celdas table.grid tfoot td { background: var(--cb-pie); }