:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --border: #e1e6eb;
  --rule: #edf0f3;
  --text: #0f1b26;
  --muted: #5a6876;
  --track: #e7ebef;
  --brand: #0b4f8a;
  --brand-ink: #0b4f8a;
  --brand-soft: #e8f0f8;
  --green: #1e7f46;
  --green-soft: #e2f2e8;
  --amber: #8a5300;
  --amber-fill: #e3a008;
  --amber-soft: #fdf3dc;
  --red: #b42323;
  --red-soft: #fbe5e5;
  --gray: #6b7684;
  --gray-soft: #eceff3;
  --focus: #0b4f8a;
  --tank-line: #8d99a6;
  --radius: 16px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
/* Modo oscuro: automático según el sistema, o el que se elija con el botón ☀/☾ (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f151b;
    --surface: #18212a;
    --border: #2a3541;
    --rule: #233039;
    --text: #e7ecf1;
    --muted: #9aa8b5;
    --track: #2a3541;
    --brand: #2f7fd0;
    --brand-ink: #8cc0f2;
    --brand-soft: #16304a;
    --green: #4cc27f;
    --green-soft: #173325;
    --amber: #f0b93a;
    --amber-soft: #3a2f12;
    --red: #f07070;
    --red-soft: #3d1c1c;
    --gray: #8b95a3;
    --gray-soft: #262c34;
    --focus: #8cc0f2;
    --tank-line: #5b6976;
  }
}
:root[data-theme="dark"] {
  --bg: #0f151b;
  --surface: #18212a;
  --border: #2a3541;
  --rule: #233039;
  --text: #e7ecf1;
  --muted: #9aa8b5;
  --track: #2a3541;
  --brand: #2f7fd0;
  --brand-ink: #8cc0f2;
  --brand-soft: #16304a;
  --green: #4cc27f;
  --green-soft: #173325;
  --amber: #f0b93a;
  --amber-soft: #3a2f12;
  --red: #f07070;
  --red-soft: #3d1c1c;
  --gray: #8b95a3;
  --gray-soft: #262c34;
  --focus: #8cc0f2;
  --tank-line: #5b6976;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Color del tema (se cambia tocando el logo): azul (por defecto), verde, rosa o dorado. */
:root { --auth-accent: #7fb4e6; --auth-button: #0b4f8a; }
:root[data-accent="green"] { --brand: #1e7a45; --brand-ink: #1e7a45; --brand-soft: #e3f3e9; --focus: #1e7a45; --auth-accent: #7fdaa4; --auth-button: #1e7a45; }
:root[data-accent="pink"] { --brand: #c2185b; --brand-ink: #ad1457; --brand-soft: #fbe6ef; --focus: #ad1457; --auth-accent: #f4a3c4; --auth-button: #c2185b; }
:root[data-accent="gold"] { --brand: #a67c00; --brand-ink: #8a6500; --brand-soft: #f8f0d8; --focus: #8a6500; --auth-accent: #f0cd6b; --auth-button: #a67c00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-accent="green"] { --brand: #2fa865; --brand-ink: #7fdaa4; --brand-soft: #173325; --focus: #7fdaa4; }
  :root:not([data-theme="light"])[data-accent="pink"] { --brand: #e0558f; --brand-ink: #f4a3c4; --brand-soft: #3b1a29; --focus: #f4a3c4; }
  :root:not([data-theme="light"])[data-accent="gold"] { --brand: #d4a72c; --brand-ink: #f0cd6b; --brand-soft: #3a2f12; --focus: #f0cd6b; }
}
:root[data-theme="dark"][data-accent="green"] { --brand: #2fa865; --brand-ink: #7fdaa4; --brand-soft: #173325; --focus: #7fdaa4; }
:root[data-theme="dark"][data-accent="pink"] { --brand: #e0558f; --brand-ink: #f4a3c4; --brand-soft: #3b1a29; --focus: #f4a3c4; }
:root[data-theme="dark"][data-accent="gold"] { --brand: #d4a72c; --brand-ink: #f0cd6b; --brand-soft: #3a2f12; --focus: #f0cd6b; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

.wordmark { font-weight: 700; letter-spacing: 0.02em; font-size: 20px; color: var(--text); }
.wordmark span { color: var(--brand-ink); }
.wordmark:hover { text-decoration: none; }
button.wordmark { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.wordmark span { transition: color 0.2s; }

/* Barra superior */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: 500; }
.nav a:hover { background: var(--bg); text-decoration: none; color: var(--text); }
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); font-weight: 600; }
.userbox { display: flex; align-items: center; gap: 12px; font-size: 14px; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 24px 64px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.page-head .meta { width: 100%; color: var(--muted); font-size: 13px; }
.back { display: inline-flex; align-items: center; min-height: 40px; gap: 4px; font-weight: 500; margin-bottom: 4px; }
.section-title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }

/* Tarjetas */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
a.card { display: block; color: var(--text); }
a.card:hover { text-decoration: none; border-color: var(--brand); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.tile .num { font-size: 26px; font-weight: 600; }
.tile .label { font-size: 13px; font-weight: 600; }
.tile.red .label { color: var(--red); }
.tile.yellow { background: var(--amber-soft); border-color: transparent; }
.tile.yellow .label { color: var(--amber); }
.tile.green .label { color: var(--green); }

/* Estado */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--lvl); background: var(--lvl-soft); }
.lvl-green { --lvl: var(--green); --lvl-soft: var(--green-soft); --lvl-fill: var(--green); }
.lvl-yellow { --lvl: var(--amber); --lvl-soft: var(--amber-soft); --lvl-fill: var(--amber-fill); }
.lvl-red { --lvl: var(--red); --lvl-soft: var(--red-soft); --lvl-fill: var(--red); }
.lvl-gray { --lvl: var(--gray); --lvl-soft: var(--gray-soft); --lvl-fill: var(--gray); }
.dot { width: 10px; height: 10px; border-radius: 5px; background: var(--lvl-fill); flex: none; }

.bar { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; flex: 1 1 auto; }
.bar.tall { height: 10px; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--lvl-fill); }

/* Tanque dibujado */
.tank-svg { width: 100%; height: auto; display: block; }
.tank-svg .tank-empty { fill: var(--track); }
.tank-svg .tank-liquid { fill: var(--lvl-fill); }
.tank-svg .tank-outline { fill: none; stroke: var(--tank-line); stroke-width: 2; }
.tank-svg .tank-riser { fill: var(--tank-line); opacity: 0.7; }
.tank-svg .th-yellow { stroke: var(--amber-fill); stroke-dasharray: 4 4; opacity: 0.8; }
.tank-svg .th-red { stroke: var(--red); stroke-dasharray: 4 4; opacity: 0.8; }
.tank-svg .th-max { stroke: var(--brand-ink); stroke-dasharray: 2 3; opacity: 0.7; }
.tank-svg .tank-label {
  fill: var(--text); stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke;
  font-family: var(--mono); font-weight: 600;
}
.tank-big { margin: 4px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; border-top: 2px dashed var(--c); }
.legend .y { --c: var(--amber-fill); }
.legend .r { --c: var(--red); }
.legend .m { --c: var(--brand-ink); }

.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px 8px; margin-top: 12px; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mini .tank-svg { max-width: 120px; }
.mini .pct { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.mini.lvl-yellow .pct { color: var(--amber); }
.mini.lvl-red .pct { color: var(--red); }
.mini .name { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnline { margin-top: 10px; font-size: 13px; color: var(--amber); }
/* Inicio: buscador */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search { position: relative; max-width: 520px; margin-bottom: 10px; }
.search input[type="search"] { padding-left: 38px; height: 44px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-52%); color: var(--muted); font-size: 20px; pointer-events: none; }
.empty .linkbtn { display: inline; }

/* Inicio: vista Lista */
.sites-head .section-title { margin-bottom: 10px; }
.sites-head .row { margin: 18px 0 10px; }
.sites-list { padding: 0 16px; }
.sites-list .item.site-row {
  display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; align-items: center; gap: 6px 16px;
  color: var(--text); padding: 10px 0;
}
.sites-list .item.site-row:hover { text-decoration: none; background: var(--bg); margin: 0 -16px; padding: 10px 16px; }
.site-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row-summary.err { color: var(--red); }
.site-row-summary.warn { color: var(--amber); }
.site-row-summary.muted { color: var(--muted); }
.site-row-tanks { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: grid; justify-items: center; width: 56px; }
.chip .tank-svg { width: 48px; }
.chip-pct { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.chip.lvl-yellow .chip-pct { color: var(--amber); }
.chip.lvl-red .chip-pct { color: var(--red); }
.chip-name { font-size: 11px; color: var(--muted); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .sites-list .item.site-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sites-list .site-row-tanks { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
}

.site-card.ordering { cursor: grab; padding: 10px 16px; }
.site-card.ordering:active { cursor: grabbing; }
.grip { color: var(--muted); font-size: 18px; letter-spacing: -2px; user-select: none; }
.errline { margin-top: 10px; font-size: 13px; color: var(--red); }

.tank-card .volume { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.tank-card .volume .big { font-size: 28px; font-weight: 600; }
.tank-card .volume .pct { margin-left: auto; font-weight: 600; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-family: var(--mono); }
.reasons { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--lvl); }

.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 16px; }
.list > .item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.list > .item:last-child { border-bottom: 0; }
.item .grow { flex: 1 1 auto; min-width: 0; }
.amount { font-family: var(--mono); font-weight: 600; color: var(--green); white-space: nowrap; }

/* Gráfica */
.chart svg { width: 100%; height: auto; display: block; }
.chart .line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--brand); opacity: 0.1; }
.chart .axis { stroke: var(--border); }
.chart .th-yellow { stroke: var(--amber-fill); stroke-dasharray: 4 4; }
.chart .th-red { stroke: var(--red); stroke-dasharray: 4 4; }
.chart text { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; }

/* Idioma: ES | EN en la barra de arriba y en la pantalla de entrar */
.theme-toggle { min-height: 28px; min-width: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; }
.theme-toggle:hover { border-color: var(--brand); }
.lang-switch { display: inline-flex; background: var(--bg); border-radius: 8px; padding: 2px; gap: 2px; }
.lang-switch button { min-height: 28px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.auth .lang-switch { background: #172736; align-self: flex-end; }
.auth .lang-switch button { color: #b8c4cf; }
.auth .lang-switch button[aria-pressed="true"] { background: var(--auth-button); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.stat .num { font-size: 20px; font-weight: 600; }
.hint { background: var(--brand-soft); border-radius: 14px; padding: 12px 14px; font-size: 14px; }

/* Formularios */
form.stack { max-width: 520px; }
label { font-size: 14px; font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select {
  height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 0 12px; font: inherit; width: 100%;
}
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.danger { background: var(--surface); color: var(--red); border-color: var(--border); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 36px; color: var(--brand-ink); font: inherit; font-weight: 500; cursor: pointer; }
.msg { font-size: 14px; border-radius: 10px; padding: 10px 12px; }
.msg.error { background: var(--red-soft); color: var(--red); }
.msg.ok { background: var(--green-soft); color: var(--green); }
.edit-site { margin-top: 16px; border-color: var(--brand); }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
fieldset.tank-names { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 14px; margin: 0; }
fieldset.tank-names legend { font-size: 14px; font-weight: 500; padding: 0 6px; }
.copy { font-family: var(--mono); font-size: 12px; word-break: break-all; background: var(--bg); padding: 8px 10px; border-radius: 8px; }
.table-box { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.empty { color: var(--muted); padding: 32px 0; text-align: center; }

/* Aviso de versión nueva */
.update-bar {
  position: fixed; z-index: 20; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; border-radius: 12px;
  background: #0f1b26; color: #fff; box-shadow: 0 10px 30px rgba(15, 27, 38, 0.3); font-size: 14px;
  width: max-content; max-width: calc(100vw - 32px);
}
.update-bar .btn { flex: none; }

/* Selector de varios sitios */
.alert-controls { margin-bottom: 14px; }
.alert-filters { align-items: center; }
.alert-dates { align-items: center; gap: 8px; }
.alert-dates input[type="date"] { height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; }
.alert-controls [role="status"] { margin: 0 8px 0 0; }

@media print {
  /* Lista de alertas impresa: sin sombras ni colores de fondo, con el punto de estado visible */
  .list { border: 0; padding: 0; }
  .list > .item { break-inside: avoid; padding: 6px 0; min-height: 0; }
  .dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.multi { position: relative; }
.multi > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-width: 200px; justify-content: space-between; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: "▾"; color: var(--muted); }
.multi[open] > summary::after { content: "▴"; }
.multi-panel {
  position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; width: min(340px, 90vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 30px rgba(15, 27, 38, 0.15); display: flex; flex-direction: column; gap: 6px;
}
.multi-options { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
.multi-options .check { min-height: 40px; padding: 0 6px; border-radius: 8px; font-size: 14px; }
.multi-options .check:hover { background: var(--bg); }
.multi-all { border-bottom: 1px solid var(--rule); font-weight: 600; }

/* Reporte de cumplimiento */
.compliance { margin-bottom: 36px; break-after: page; }
.compliance:last-child { break-after: auto; }
.status-box {
  display: inline-block; margin: 8px 0 12px; padding: 10px 16px; border-radius: 12px; font-size: 16px;
  color: #fff; background: var(--lvl-fill); print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.findings { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.findings li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.findings .dot { position: relative; top: 1px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.compliance .section-title { margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.section-icon { width: 26px; height: 15px; flex: none; }
.section-icon .body { fill: var(--surface); stroke: var(--tank-line); stroke-width: 1.5; }
.section-icon .liquid { fill: var(--brand); opacity: 0.85; }
.section-icon .riser { fill: var(--tank-line); }
.section-icon.round { width: 17px; height: 17px; }
.section-icon.wide { width: 30px; height: 16px; }
.section-icon .ic-body { fill: var(--surface); stroke: var(--tank-line); stroke-width: 1.2; stroke-linejoin: round; }
.section-icon .ic-arc { fill: none; stroke: var(--brand); stroke-width: 1.2; stroke-linecap: round; }
.section-icon .ic-needle { stroke: var(--text); stroke-width: 1.3; stroke-linecap: round; }
.section-icon .ic-ink { fill: var(--text); }
.section-icon .ic-dark { fill: #0f1b26; }
.section-icon .ic-line { fill: var(--tank-line); }
.section-icon .ic-stroke { stroke: var(--tank-line); stroke-width: 1.2; }
.section-icon .ic-brand { fill: var(--brand); opacity: 0.85; }
.section-icon .ic-bell { fill: #e0a100; stroke: var(--tank-line); stroke-width: 0.9; stroke-linejoin: round; }
.section-icon .ic-cable { fill: none; stroke: var(--tank-line); stroke-width: 1.2; stroke-linecap: round; }
.section-icon .ic-metal { fill: #cfd6dc; stroke: var(--tank-line); stroke-width: 1; }
.section-icon .ic-shine { fill: #ffffff; opacity: 0.85; }
@media print { .section-icon { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* Reportes */
.report-controls { margin-bottom: 20px; }
.report-kinds { flex-wrap: wrap; }
.report-filters { align-items: flex-end; }
.report-filters .field { min-width: 180px; }
.report-filters input[type="date"], .report-filters input[type="month"] { height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; }
.report-head { margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.report-table th.num-col, .report-table td.num-col { text-align: right; }
.report-table tbody tr:nth-child(even) { background: var(--bg); }
.report-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; }
.btn[download] { display: inline-flex; align-items: center; }
a.btn:hover { text-decoration: none; }
.print-only { display: none; }

/* Folder de documentos (plan Distribuidor) en Inicio y página de documentos */
.site-tile { position: relative; display: flex; }
.site-tile > .site-card { flex: 1; }
.site-card.has-folder { padding-bottom: 56px; }
.site-tile > .folder-link { position: absolute; left: 16px; bottom: 12px; }
.folder-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 600; }
.folder-link:hover { text-decoration: none; border-color: var(--brand); }
.folder-link .folder-icon { width: 18px; height: 18px; fill: #d8a23a; }
.folder-link.lvl-yellow { border-color: var(--amber); }
.folder-link.lvl-red { border-color: var(--red); }
.folder-count { min-width: 20px; text-align: center; background: var(--surface); border-radius: 999px; padding: 0 6px; }
.folder-note { font-weight: 500; color: var(--lvl, var(--muted)); }
.folder-link.compact { padding: 6px 8px; }
.site-row-wrap { display: flex; align-items: center; gap: 10px; }
.site-row-wrap > .site-row { flex: 1; min-width: 0; }
.sites-list > .site-row-wrap { border-bottom: 1px solid var(--rule); }
.sites-list > .site-row-wrap:last-child { border-bottom: 0; }
h1 .folder-icon { width: 28px; height: 28px; fill: #d8a23a; margin-right: 8px; vertical-align: -4px; }
.docs-list { padding: 0 16px; }
.doc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; }
.doc-main { min-width: 0; flex: 1 1 260px; }
.doc-title { font-weight: 600; overflow-wrap: anywhere; }
.doc-actions { align-items: center; }
.doc-edit { flex-basis: 100%; padding: 12px; background: var(--bg); border-radius: 10px; }

/* Alertas: alarmas activas para atender */
.active-alarms > .item { gap: 10px; }
.active-alarms .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lvl); flex: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.active-alarms .unmarked { opacity: 0.45; }
.btn.disabled { pointer-events: none; opacity: 0.5; }
#mail-msg { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; resize: vertical; }
@media print { .active-alarms .unmarked { display: none !important; } }

/* Admin: secciones que se abren y se cierran */
.fold { margin: 14px 0; }
.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; font-size: 14px; transition: transform 0.15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { color: var(--text); }
.fold-count { font-weight: 600; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; letter-spacing: 0; }
.fold-body { display: flex; flex-direction: column; gap: 10px; }
.admin-new { align-items: start; }
.admin-new .fold { margin: 0; }
.fold-add > summary { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--brand-ink); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 12px 16px; background: var(--surface); }
.fold-add > summary::before { content: none; }
.fold-add[open] > summary { border-style: solid; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fold-add .fold-body > .card { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
tr.hidden { display: none; }

/* Empresa nueva dentro del formulario de sitio */
.new-org { border-left: 3px solid var(--brand); padding-left: 12px; }

/* Bitácora de alarmas */
.seg-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-size: 13px; }
.seg-link:hover { text-decoration: none; color: var(--text); }
.seg-link[aria-current="page"] { background: var(--surface); color: var(--text); font-weight: 600; }
.incidents > .item { align-items: flex-start; gap: 10px; padding: 12px 0; }
.incidents > .item > input { margin-top: 4px; }
.incident-side { flex: none; align-items: center; }
.times { margin-left: 8px; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.handling { margin-top: 6px; padding: 8px 10px; background: var(--bg); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
#doc-cause, #doc-action { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; resize: vertical; }

/* Rutas y TAIM */
.taim { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.taim-head { display: flex; gap: 12px; align-items: flex-start; }
.taim-logo { flex: none; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; color: #fff; background: linear-gradient(135deg, var(--brand), #6c4cc9); border-radius: 10px; padding: 8px 10px; }
.taim textarea { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 12px; font: inherit; resize: vertical; }
.taim select { width: auto; min-width: 200px; }
.chip-btn { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.taim-answer:empty { display: none; }
.taim-text { white-space: pre-wrap; line-height: 1.5; background: var(--bg); border-radius: 10px; padding: 12px 14px; }
.route-card { margin-bottom: 16px; border-left: 6px solid var(--route); display: flex; flex-direction: column; gap: 12px; }
.route-name { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; }
.route-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--route); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.plan { border-radius: 10px; background: var(--lvl-soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.plan.lvl-green { background: var(--bg); }
.plan-summary { margin: 0; font-weight: 600; }
.trip { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.trip-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.stops { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.anticipated { color: var(--brand-ink); font-style: italic; }
.forecast > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.forecast[open] > summary { margin-bottom: 8px; }
.route-form { margin-bottom: 16px; }
.stop-order { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.stop-order li > * { vertical-align: middle; }
.stop-order li { display: list-item; }
.stop-order li .row { display: inline-flex; margin-left: 8px; gap: 4px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }

/* Reconciliación: ventas, ajustes y notas se escriben en la misma tabla */
.recon-table td { vertical-align: middle; }
.recon-table .cell-input { height: 34px; border-radius: 8px; padding: 0 8px; width: 7.5em; text-align: right; }
.recon-table .cell-input.note-input { width: 14em; text-align: left; }
.recon-table .cell-input:disabled { background: transparent; border-color: transparent; color: var(--text); }
.report-table td.neg { color: var(--red); }

@media print {
  .topbar, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  .print-only { display: block; }
  .print-brand { font-weight: 700; font-size: 18px; margin-bottom: 6px; }
  .print-brand span { color: #0b4f8a; }
  .card { border: 0; padding: 0; }
  .table-box { overflow: visible; }
  table { font-size: 10px; }
  th, td { padding: 4px 6px; white-space: normal; }
  .report-table tbody tr:nth-child(even) { background: #f3f5f7; }
  .recon-table .cell-input { border: 0; background: transparent; padding: 0; height: auto; width: auto; }
}

/* Pantallas de entrada */
.auth-body { background: #0f1b26; color: #fff; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.auth .wordmark { color: #fff; font-size: 32px; }
.auth .wordmark span { color: var(--auth-accent); }
.auth .tagline { color: #b8c4cf; margin-top: -8px; }
.auth label { color: #d5dde4; }
.auth input { background: #172736; border-color: #33475a; color: #fff; height: 52px; font-size: 16px; }
.auth .btn { min-height: 52px; font-size: 16px; background: var(--auth-button); }
.auth a { color: #9cc6ee; }
.auth .foot { color: #8e9dab; font-size: 13px; text-align: center; }
.auth .msg.error { background: #3d1c1c; color: #f6a5a5; }
.auth .msg.ok { background: #173325; color: #8ee0b0; }

@media (max-width: 560px) {
  .topbar-inner, main { padding-left: 16px; padding-right: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { max-width: none; }
}

/* TAIM: tanque que todavía no tiene 30 días de lecturas */
.report-table td.learning { color: var(--muted); font-style: italic; }

/* Pedidos de combustible */
.order-card { border-left: 4px solid var(--lvl); display: flex; flex-direction: column; gap: 8px; }
.order-site { margin: 0; }
.order-tanks { margin: 0; padding-left: 18px; }
.order-events ol { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.order-line { display: grid; grid-template-columns: minmax(120px, 1fr) 120px minmax(0, 2fr); gap: 8px 12px; align-items: center; }
.schedule-form { border-top: 1px solid var(--border); padding-top: 10px; }
@media (max-width: 560px) { .order-line { grid-template-columns: 1fr 110px; } .order-line .small { grid-column: 1 / -1; } }

/* TAIM: cambio de consumo sostenido */
.shift { white-space: nowrap; font-weight: 600; }
.shift.up { color: var(--red); }
.shift.down { color: var(--amber); }

/* Eventos de consumo */
.event-card { border-left: 4px solid var(--lvl); display: flex; flex-direction: column; gap: 8px; }
.event-sites { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.event-note { color: var(--amber); font-weight: 600; }

/* Camiones: compartimientos */
.compartments { display: flex; gap: 4px; margin-top: 8px; }
.compartment { flex: 1 1 0; min-width: 64px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--surface); }
.compartment b { display: block; }
.compartment.empty { background: var(--bg); border-style: dashed; }
.warn-text { color: var(--amber); font-weight: 600; margin: 0; }
@media (max-width: 560px) { .compartments { flex-wrap: wrap; } .compartment { flex-basis: 40%; } }

/* Ventana de pedido */
.order-by { color: var(--amber); font-weight: 600; }

/* Mapa de Rutas */
.map-box { height: 480px; padding: 0; overflow: hidden; z-index: 0; }
.map-box.adjusting { outline: 2px dashed var(--amber); cursor: crosshair; }
.site-pin { border-radius: 50%; background: var(--lvl); border: 2px solid #fff; box-shadow: 0 0 0 2px rgb(0 0 0 / 0.35), 0 1px 6px rgb(0 0 0 / 0.6); }
.map-box .leaflet-control-layers { color: #1d2733; }
.map-box.adjusting .site-pin { cursor: grab; }
.map-tools { margin: 4px 0; }
.map-tools select { max-width: 260px; }
.map-popup ul { margin: 4px 0; padding-left: 16px; }
.shared-list li { display: block; }
@media (max-width: 560px) { .map-box { height: 360px; } }