/* Lector de contadores GPG — capa propia sobre los estilos del front de GPG.
   Se cargan antes gpg/css/base.css y gpg/css/campos.css (copias sin tocar de
   GPG/WebContent/front): variables de tema (--azul, --tinta, --fondo, --ficha-op,
   --linea, --verde, --rojo, --ambar…), barra superior, tema claro/oscuro y
   receta de campos. Aquí solo va lo propio: menú lateral y los componentes de
   las páginas, siempre con esas variables para que el modo oscuro llegue solo. */

/* ============================ Estructura: barra + menú lateral + contenido */
.cuerpo { flex: 1 1 auto; min-height: 0; display: flex; }
.marca { display: flex; align-items: center; color: var(--tinta); text-decoration: none; }
.marca .logo { height: 18px; width: auto; }
.campana, .usuario { text-decoration: none; color: inherit; }

.lateral {
	flex: 0 0 250px; overflow-y: auto; overscroll-behavior: contain;
	background: var(--barra); border-right: 1px solid var(--linea);
	padding: 8px 8px 14px; display: flex; flex-direction: column; gap: 1px;
}
.lateral a, .lateral button {
	display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
	border: 0; background: transparent; color: var(--tinta); font: inherit; font-size: 14px;
	font-weight: 600; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-decoration: none;
}
.lateral svg { width: 20px; height: 20px; fill: currentColor; color: var(--tinta-sua); flex: 0 0 auto; }
.lateral a:hover, .lateral button:hover { background: var(--fondo); color: var(--tinta); }
.lateral a[aria-current="page"] { background: rgba(38,152,208,.12); color: var(--azul); }
.lateral a[aria-current="page"] svg { color: var(--azul); }
.lateral form { margin: 0; }
.lateral .salir, .lateral .salir svg { color: var(--rojo); }
.titulo-menu { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta-sua); padding: 14px 12px 4px; }
.lateral .sep { height: 1px; background: var(--linea); margin: 8px 4px; }
.idiomas-menu, .idiomas { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 8px 0; }
.idiomas { justify-content: center; padding: 16px 0 0; }
.lateral .idiomas-menu a, .idiomas a {
	width: auto; padding: 3px 9px; font-size: 12px; font-weight: 500; color: var(--tinta-sua);
	border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; background: var(--ficha-op);
}
.lateral .idiomas-menu a[aria-current="true"], .idiomas a[aria-current="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.version { font-size: 11px; color: var(--tinta-sua); padding: 12px 12px 0; margin-top: auto; }
body.menu-cerrado .lateral { display: none; }
.velo-menu { display: none; }

/* Pantalla estrecha: el menú se abre encima con las tres rayas, como en GPG. */
@media (max-width: 1100px) {
	.lateral {
		position: fixed; top: 58px; bottom: 0; left: 0; z-index: 45; width: 280px;
		background: var(--ficha-op); box-shadow: 0 10px 40px rgba(0,0,0,.22);
		transform: translateX(-105%); transition: transform .18s ease-out;
	}
	body.menu-cerrado .lateral { display: flex; }
	body.menu-abierto .lateral { transform: none; }
	body.menu-abierto .velo-menu { display: block; position: fixed; top: 58px; right: 0; bottom: 0; left: 0; z-index: 44; background: var(--velo); }
}
html[dir="rtl"] .lateral { border-right: 0; border-left: 1px solid var(--linea); }
html[dir="rtl"] .lateral a, html[dir="rtl"] .lateral button { text-align: right; }
@media (max-width: 1100px) {
	html[dir="rtl"] .lateral { left: auto; right: 0; transform: translateX(105%); }
	html[dir="rtl"] body.menu-abierto .lateral { transform: none; }
}

main .dentro { max-width: 1320px; margin: 0 auto; padding: 2px 4px 30px; }

/* ============================ Texto */
a { color: var(--azul-hond); }
a:hover { color: var(--azul); }
html[data-tema="oscuro"] main a:not(.btn):not(.kpi) { color: #6CC0EA; }
@media (prefers-color-scheme: dark) {
	html:not([data-tema="claro"]) main a:not(.btn):not(.kpi) { color: #6CC0EA; }
	html:not([data-tema="claro"]) h1 { color: #6CC0EA; }
}
h1 { font-size: 22px; font-weight: 750; color: var(--azul-hond); letter-spacing: -.2px; margin: 6px 0 14px; }
html[data-tema="oscuro"] h1 { color: #6CC0EA; }
h1 .muted { font-weight: 500; font-size: 16px; }
h2 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; }
h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-sua); margin: 16px 0 8px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
p { margin: 6px 0 10px; }
.lead { font-size: 15px; max-width: 860px; }
.muted { color: var(--tinta-sua); }
.errtxt { color: var(--rojo); }
code { font-size: 12.5px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 6px; padding: 1px 5px; }
small { font-size: 12px; }
.seccion { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--azul); margin: 0 0 4px; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.head h1 { margin: 6px 0; }
.head .botones { display: flex; gap: 8px; flex-wrap: wrap; }
.periodo { font-size: 15px; font-weight: 600; margin: 4px 0 14px; }
.narrow { max-width: 560px; }

/* ============================ Tarjetas y columnas */
.card {
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px;
	padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px;
}
.card.danger { border-color: rgba(192,57,43,.35); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rejilla-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.rejilla-panel .card { margin: 0; }
.rejilla-panel .ancha { grid-column: 1 / -1; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .rejilla-panel { grid-template-columns: 1fr; } }
.vacio-ok { color: var(--verde); font-weight: 600; }
.pie-panel { text-align: center; font-size: 12.5px; margin-top: 18px; }

/* ============================ Formularios (receta de campos.css de GPG) */
.form label, .filters > label {
	display: block; font-size: 12.5px; font-weight: 500; color: var(--tinta-sua); margin: 10px 0 0; min-width: 0;
}
.form label small { display: block; font-size: 12px; color: var(--tinta-sua); margin-top: 4px; font-weight: 400; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea {
	display: block; width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 12px; margin: 4px 0 0;
	font: inherit; font-size: 15px; line-height: 1.3; color: var(--tinta);
	background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px;
	outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
select {
	padding-right: 38px; cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%238A9099' d='M7.4 9.3 12 13.9l4.6-4.6 1.4 1.4-6 6-6-6z'/></svg>");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
html[dir="rtl"] select { background-position: left 12px center; padding-right: 12px; padding-left: 38px; }
textarea { min-height: 76px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(38,152,208,.18); background: var(--ficha-op); }
input::placeholder, textarea::placeholder { color: var(--tinta-sua); opacity: .7; }
input[disabled], select[disabled], textarea[disabled] { opacity: .6; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
input[type="file"] { display: block; margin-top: 6px; font-size: 13.5px; color: var(--tinta); }
input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
html[data-tema="oscuro"] input::-webkit-calendar-picker-indicator { filter: invert(.85); }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); font-weight: 500; margin-top: 12px; cursor: pointer; }
.row2, .row3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--linea); border-radius: 12px; padding: 8px 14px 12px; margin: 14px 0 0; }
legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-sua); padding: 0 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.checks label.check { margin-top: 6px; }
.filters {
	display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px;
	padding: 12px 14px; box-shadow: var(--sombra); margin: 0 0 14px;
}
.filters > label { margin: 0; flex: 1 1 170px; max-width: 260px; }
.filters label.check { align-self: center; margin: 0; }
.filters .btn { align-self: flex-end; }
input.filter { max-width: 340px; margin: 0 0 10px; }

/* ============================ Botones (receta .boton de campos.css) */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
form.inline { display: inline; margin: 0; }
.btn {
	min-height: 40px; padding: 9px 18px; margin: 0; border-radius: 10px; border: 1px solid var(--linea);
	background: var(--ficha-op); color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600;
	line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; text-decoration: none; white-space: nowrap;
	transition: border-color .15s, background-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { border-color: var(--azul); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(38,152,208,.25); }
.btn.primary { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); color: #fff; }
.btn.danger { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.small { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ancho { width: 100%; }
button.link { border: 0; background: none; color: var(--azul-hond); cursor: pointer; font: inherit; padding: 0; }
.accion { margin-bottom: 14px; }
.accion small { display: block; color: var(--tinta-sua); margin-top: 6px; }

/* ============================ Avisos */
.flash { padding: 12px 14px; border-radius: 12px; margin: 0 0 14px; font-size: 13.5px; background: rgba(47,168,79,.10); border: 1px solid rgba(47,168,79,.32); color: var(--tinta); }
.flash.err { background: rgba(192,57,43,.09); border-color: rgba(192,57,43,.35); }
.aviso-bus { color: var(--rojo); border: 1px solid rgba(192,57,43,.3); background: rgba(192,57,43,.06); border-radius: 12px; padding: 9px 14px; margin: 8px 0; font-size: 13.5px; }

/* ============================ Cifras */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; margin: 0 0 16px; }
.kpi {
	display: flex; flex-direction: column; gap: 2px; min-width: 0;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px;
	padding: 12px 14px; box-shadow: var(--sombra); border-top: 4px solid var(--azul);
	color: inherit; text-decoration: none;
}
a.kpi:hover { border-color: var(--azul); color: inherit; }
.kpi .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-sua); }
.kpi b { font-size: 28px; font-weight: 750; line-height: 1.15; color: var(--tinta); }
.kpi b.small { font-size: 18px; line-height: 1.3; }
.kpi span:not(.lbl) { font-size: 12.5px; color: var(--tinta-sua); }
.kpi.err { border-top-color: var(--rojo); }
.kpi.err b { color: var(--rojo); }
.kpi.off { border-top-color: var(--gris); }
.kpi.ok-k { border-top-color: var(--verde); }
.kpis.compactos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kpis.compactos .kpi { box-shadow: none; background: var(--fondo); border-top-width: 3px; }
.kpis.compactos .kpi b { font-size: 22px; }

/* ============================ Tablas */
table.grid {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px;
	box-shadow: var(--sombra); margin: 0 0 16px;
}
.grid th, .grid td { padding: 9px 12px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
html[dir="rtl"] .grid th, html[dir="rtl"] .grid td { text-align: right; }
.grid tr:last-child td { border-bottom: 0; }
.grid th {
	font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
	color: var(--tinta-sua); background: var(--ficha-op); position: sticky; top: 0; z-index: 1;
}
.grid tr:first-child th:first-child { border-top-left-radius: 14px; }
.grid tr:first-child th:last-child { border-top-right-radius: 14px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr:hover td { background: rgba(38,152,208,.05); }
.grid tr.total td { font-weight: 700; background: var(--fondo); }
.grid tr.est td { background: rgba(217,130,24,.08); }
.grid.small td, .grid.small th { padding: 6px 10px; font-size: 13px; }
.card table.grid { box-shadow: none; }
.card .grid td .errtxt { max-width: 240px; }
.grid td .errtxt, .grid td.errtxt { display: inline-block; max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.grid td.fecha { white-space: nowrap; }
tr.st-off td { opacity: .6; }
.scroll { overflow-x: auto; }
.pager { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
/* ordenación por cabecera */
.grid th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
.grid th.ordenable::after { content: "↕"; margin-left: 6px; opacity: .35; font-size: 10px; }
.grid th.ordenable:hover::after { opacity: .8; }
.grid th[aria-sort="ascending"]::after { content: "▲"; opacity: 1; color: var(--azul); }
.grid th[aria-sort="descending"]::after { content: "▼"; opacity: 1; color: var(--azul); }
.grid th.ordenable:focus-visible { outline: 2px solid var(--azul); outline-offset: -3px; }
.grid th a.orden { color: inherit; text-decoration: none; white-space: nowrap; }
.grid th a.orden::after { content: "↕"; margin-left: 6px; opacity: .35; font-size: 10px; }
.grid th a.orden.asc::after { content: "▲"; opacity: 1; }
.grid th a.orden.desc::after { content: "▼"; opacity: 1; }

/* ============================ Estados */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gris); vertical-align: middle; }
.dot.ok { background: var(--verde); box-shadow: 0 0 0 3px rgba(47,168,79,.18); }
.dot.aviso { background: var(--ambar); }
.dot.error { background: var(--rojo); }
.dot.off { background: transparent; border: 1px solid var(--gris); }
.badge {
	display: inline-block; font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px;
	border: 1px solid var(--linea); color: var(--tinta-sua); background: var(--fondo); white-space: nowrap; vertical-align: 1px;
}
.badge.ok { color: var(--verde); border-color: rgba(47,168,79,.4); background: rgba(47,168,79,.08); }
.badge.err { color: #fff; background: var(--rojo); border-color: var(--rojo); }
.badge.run { color: var(--azul); border-color: rgba(38,152,208,.45); background: rgba(38,152,208,.08); }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; }
dl.kv dt { color: var(--tinta-sua); font-size: 13px; }
dl.kv dd { margin: 0; min-width: 0; }

/* ============================ Gráficos (colores de marca) */
.chart { width: 100%; height: auto; max-height: 240px; display: block; }
.chart rect { fill: rgba(38,152,208,.55); }
.chart rect:hover, .chart rect.hoy:hover { fill: var(--azul-hond); }
.chart rect.hoy { fill: var(--ambar); }
.chart text { font-size: 10px; fill: var(--tinta-sua); font-family: inherit; }
.chart.diario { max-height: 200px; }
.chart-legend, .leyenda { display: flex; justify-content: space-between; gap: 18px; font-size: 12px; color: var(--tinta-sua); margin: 6px 0 18px; }
.leyenda { justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.leyenda .muestra { display: inline-block; width: 18px; height: 10px; margin: 0 5px 0 14px; vertical-align: middle; border-radius: 3px; }
.leyenda .muestra.act { background: rgba(38,152,208,.55); }
.leyenda .muestra.ant { border-bottom: 2px solid var(--tinta-sua); height: 5px; border-radius: 0; }
.ranking { width: 100%; height: auto; display: block; margin-bottom: 22px; }
.ranking .lab { font-size: 12px; fill: var(--tinta); text-anchor: end; }
.ranking .val { font-size: 11.5px; fill: var(--tinta-sua); }
.ranking .act { fill: rgba(38,152,208,.55); }
.ranking .ant { fill: none; stroke: var(--tinta-sua); stroke-width: 1; }
pre.trace { background: #0F1720; color: #E8EAED; padding: 12px; border-radius: 10px; overflow: auto; font-size: 12px; line-height: 1.5; }

/* ============================ Acceso */
main.acceso { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
main.acceso .flash { width: 100%; max-width: 380px; }
.login-caja { width: 100%; max-width: 380px; background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 16px; box-shadow: var(--sombra); padding: 26px 24px 20px; }
.login-marca { display: flex; justify-content: center; color: var(--tinta); margin-bottom: 14px; }
.login-marca .logo { height: 26px; width: auto; }
.login-caja h1 { text-align: center; margin: 0 0 2px; }
.login-caja > .muted { text-align: center; font-size: 13px; margin: 0 0 8px; }

/* ============================ Manual */
.manual { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.manual nav.indice { position: sticky; top: 0; background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px; padding: 10px; box-shadow: var(--sombra); }
.manual nav.indice a { display: block; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--tinta); padding: 6px 8px; border-radius: 8px; }
.manual nav.indice a span { color: var(--tinta-sua); font-weight: 500; margin-right: 6px; }
.manual nav.indice a:hover { background: var(--fondo); }
.manual article { max-width: 82ch; }
.manual section { background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.manual section p, .manual section li { font-size: 14.5px; line-height: 1.7; }
.manual section h2 { margin-top: 4px; }
.manual .nota { border-left: 3px solid var(--azul); padding: 4px 0 4px 14px; color: var(--tinta-sua); }
@media (max-width: 900px) { .manual { grid-template-columns: 1fr; } .manual nav.indice { position: static; } }

/* ============================ Buses y documentación */
svg.bus { display: block; min-width: 640px; max-width: 1100px; border-radius: 12px; }
svg.bus a:hover rect { stroke-width: 2.5; }
svg.bus a, svg.bus text { text-decoration: none; }
.bus-mini svg.bus { min-width: 0; max-width: 620px; }
.bus-card .head { align-items: baseline; }
.esquema { font-size: 12px; word-break: break-all; }
.bus-leyenda .muestra { display: inline-block; width: 14px; height: 10px; margin: 0 4px 0 14px; vertical-align: middle; border: 1px solid var(--gris); border-radius: 3px; }
.bus-leyenda .muestra.ok { background: var(--verde); border-color: var(--verde); }
.bus-leyenda .muestra.aviso { background: var(--ficha-op); border-color: var(--ambar); }
.bus-leyenda .muestra.error { background: var(--rojo); border-color: var(--rojo); }
.bus-leyenda .muestra.off { border-style: dashed; }
.bus-leyenda .muestra.eq { background: var(--azul-hond); border-color: var(--azul-hond); }
.notas { white-space: pre-wrap; border-left: 3px solid var(--azul); padding: 4px 12px; margin: 10px 0; }
.docs h3 { margin-top: 18px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.doc { margin: 0; border: 1px solid var(--linea); border-radius: 12px; padding: 8px; background: var(--fondo); }
.doc img { width: 100%; height: 130px; object-fit: cover; display: block; border-radius: 8px; }
.doc-icono { display: flex; align-items: center; justify-content: center; height: 130px; border-radius: 8px; background: rgba(38,152,208,.12); color: var(--azul-hond); font-weight: 700; letter-spacing: .15em; font-size: 12px; text-decoration: none; }
.doc figcaption { font-size: 12.5px; margin-top: 6px; word-break: break-word; }
.doc figcaption .muted, .doc-notas { display: block; }
.doc-notas { margin: 4px 0; }

/* ============================ Progreso de la ronda */
.ronda-panel { margin: 0 0 16px; }
details.ronda { background: var(--ficha-op); border: 1px solid var(--linea); border-left: 4px solid var(--azul); border-radius: 14px; padding: 10px 16px; margin: 0 0 12px; box-shadow: var(--sombra); }
details.ronda > summary { cursor: pointer; padding: 4px 0; }
details.ronda > summary b { font-weight: 700; margin-left: 6px; }
details.ronda progress { display: block; width: 100%; height: 6px; margin-top: 8px; accent-color: var(--azul); }
details.ronda table { margin: 12px 0 4px; box-shadow: none; }
.grid tr.prog-leyendo td { background: rgba(38,152,208,.07); }
details.log summary { cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--azul-hond); }
details.log pre { max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5; background: #0F1720; color: #E8EAED; padding: 10px 12px; border-radius: 10px; white-space: pre-wrap; word-break: break-all; max-width: 720px; }
.grid tr.log-fila td { padding-top: 0; border-bottom-style: dotted; }
.grid tr.log-fila details.log pre { max-width: none; }

@media print {
	body { overflow: visible; display: block; }
	.barra, .lateral, .velo-menu, .filters, .actions, .botones { display: none !important; }
	main { overflow: visible; }
}
.login-marca .lema { height: auto; max-width: 230px; }
html[data-tema="oscuro"] .login-marca .lema { background: #fff; border-radius: 10px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { html:not([data-tema="claro"]) .login-marca .lema { background: #fff; border-radius: 10px; padding: 6px 10px; } }
.idiomas.izq { justify-content: flex-start; padding-top: 4px; }

/* ---------- copias de seguridad ---------- */
.barra-prog { height: 8px; border-radius: 999px; background: var(--linea); overflow: hidden; margin: 6px 0; }
.barra-prog i { display: block; height: 100%; width: 0; background: var(--azul); transition: width .4s; }
td.acciones { white-space: nowrap; text-align: right; }
td.acciones a[title] { text-decoration: none; font-size: 17px; padding: 0 4px; }
.tablas-rest { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; margin: 6px 0 10px; }
.tablas-rest legend { font-size: 12.5px; color: var(--tinta-sua); padding: 0 4px; }
.small { font-size: 12.5px; }

/* ---------- barra: reloj, horario del oscuro automático y menú de usuario ---------- */
.barra { position: relative; }
.derecha { gap: 12px; }
.campana b[hidden] { display: none; }
.panel.horario {
	position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60; width: min(420px, calc(100vw - 24px));
	background: var(--ficha-op); color: var(--tinta); border: 1px solid var(--linea); border-radius: 16px;
	box-shadow: var(--sombra); padding: 16px 18px 12px;
}
html[dir="rtl"] .panel.horario { right: auto; left: 12px; }
.panel.horario h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; color: var(--tinta-sua); }
.horario-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.horario-campos label { font-size: 13px; color: var(--tinta-sua); display: block; }
.horario-campos input {
	display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 16px; padding: 9px 10px;
	border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--tinta);
}
.panel.horario .nota { margin: 12px 0 0; font-size: 13px; color: var(--tinta-sua); }
.panel.horario .sello { margin-top: 8px; font-size: 12px; opacity: .8; }
.bola { background: var(--rojo); box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.bola.viva { background: var(--verde); box-shadow: 0 0 0 3px rgba(47,168,79,.18); }
.bola.conectando { background: var(--ambar); box-shadow: 0 0 0 3px rgba(217,130,24,.18); }

.menu-usuario { position: relative; }
.menu-usuario .desplegable {
	position: absolute; top: 100%; right: 0; z-index: 60; min-width: 220px; padding: 8px;
	background: var(--ficha-op); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra);
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility .12s;
}
html[dir="rtl"] .menu-usuario .desplegable { right: auto; left: 0; }
.menu-usuario::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } /* puente para no perder el hover */
.menu-usuario:hover .desplegable, .menu-usuario:focus-within .desplegable { opacity: 1; visibility: visible; transform: none; }
.menu-usuario .desplegable { margin-top: 6px; }
.banderas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 4px 2px 8px; border-bottom: 1px solid var(--linea); margin-bottom: 6px; }
.banderas a { display: block; border-radius: 5px; padding: 2px; border: 2px solid transparent; line-height: 0; }
.banderas a:hover { border-color: var(--linea); }
.banderas a[aria-current="true"] { border-color: var(--azul); }
.banderas img { width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); display: block; }
.desplegable form { margin: 0; }
.desplegable .opcion {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0;
	background: transparent; color: var(--tinta); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: start;
}
.desplegable .opcion:hover { background: var(--fondo); }
.desplegable .opcion svg { width: 19px; height: 19px; fill: currentColor; color: var(--tinta-sua); }
.desplegable .salir, .desplegable .salir svg { color: var(--rojo); }
@media (max-width: 560px) { #nombreUsuario { display: none; } }

/* ---------- menú lateral con grupos plegables ---------- */
details.grupo-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; user-select: none; }
details.grupo-menu > summary::-webkit-details-marker { display: none; }
details.grupo-menu > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 6px 3px; opacity: .7; }
details.grupo-menu:not([open]) > summary::after { transform: rotate(-45deg); margin-bottom: 0; }
html[dir="rtl"] details.grupo-menu:not([open]) > summary::after { transform: rotate(135deg); }
details.grupo-menu > summary:hover { color: var(--tinta); background: var(--fondo); }
.lateral .idiomas-menu a { display: inline-flex; align-items: center; gap: 5px; }
.lateral .idiomas-menu img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

/* ---------- valores al pasar por las gráficas ---------- */
.info-graf {
	position: fixed; z-index: 80; pointer-events: none; background: var(--ficha-op); color: var(--tinta);
	border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); padding: 8px 10px; font-size: 12.5px; line-height: 1.45; min-width: 150px;
}
.info-graf b { display: block; font-size: 13px; margin-bottom: 2px; }
.info-graf .v { font-size: 15px; font-weight: 700; color: var(--azul); }
.info-graf .fila { display: flex; justify-content: space-between; gap: 12px; color: var(--tinta-sua); }
svg [data-v] { cursor: crosshair; }
svg [data-v].marcado { opacity: .75; stroke: var(--tinta); stroke-width: 1px; }
svg rect.zona { fill: transparent; stroke: none; }
svg g[data-v]:hover rect:not(.zona) { filter: brightness(1.12); }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--tinta-sua); min-height: 160px; justify-content: center; }
.cargando.error-carga { color: var(--rojo); }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea); border-top-color: var(--azul); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.tema .ico-auto { width: 14px; height: 14px; display: block; }
.tema button { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
td.acciones .btn.small { min-height: 28px; padding: 3px 9px; }
.rejilla-copias { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
@media (max-width: 520px) { .rejilla-copias { grid-template-columns: 1fr; } }
td.fecha { white-space: nowrap; }
.tabla-bd td { white-space: nowrap; }
.motivo { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idiomas a { display: inline-flex; align-items: center; gap: 6px; }
.idiomas a img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.card.balance table { width: 100%; }
.card.balance tr.total td { border-top: 1px solid var(--linea); }
.card.balance tr.dif td { color: var(--azul); }
.card.balance.fuera { border-color: rgba(192,57,43,.45); }
.card.balance.fuera tr.dif td { color: var(--rojo); }
.card.balance .ud { font-size: 11.5px; color: var(--tinta-sua); font-weight: 400; margin-left: 2px; }
.kpi .ud { font-size: 13px; font-weight: 500; color: var(--tinta-sua); }
h2.grupo-bus { margin-top: 22px; }
.lista-buses { padding-left: 18px; margin: 4px 0 10px; }
.lista-buses li { margin: 4px 0; }
.lista-buses .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }

/* portal de clientes */
.info-horas { border: 1px solid var(--borde, rgba(127,127,127,.3)); border-radius: 12px; padding: 9px 14px; margin: 8px 0; font-size: 13.5px; }
.info-horas.malo { color: var(--rojo); border-color: rgba(192,57,43,.3); background: rgba(192,57,43,.06); }
.texto-legal p { max-width: 80ch; line-height: 1.55; }
.acceso-grupo { border: 1px solid rgba(127,127,127,.25); border-radius: 10px; padding: 8px 12px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.acceso-grupo legend { font-weight: 600; padding: 0 6px; }
.botones form { display: inline; }
.inline-form { margin: 12px 0; }
.grid td.num, .grid th.num { white-space: nowrap; }