@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');
/* ============================================================
   Obras360 — V2 "Industrial Hi-Vis"
   Base grafito/navy + amarillo de seguridad (#FFB319) como acento.
   Soporta TEMA OSCURO (por defecto) y TEMA CLARO con [data-tema="claro"].
   El header, el menú lateral y el login se mantienen oscuros en ambos
   temas (identidad de marca); el tema cambia el área de contenido.
   ============================================================ */
:root {
  /* Marca */
  --blueprint: #0B2447;        /* navy de marca */
  --blueprint-d: #07182f;
  --seg: #FFB319;              /* amarillo seguridad (acento) */
  --seg-d: #e09a05;
  --lima: #c8f04a;             /* acento secundario (positivo) */

  /* === TEMA OSCURO (por defecto) === */
  --bg: #070d16;              /* fondo grafito casi negro */
  --surface: #101a27;         /* tarjetas/secciones */
  --surface-2: #19273a;       /* hover / insets / chips */
  --surface-3: #0b1420;       /* campos de formulario */

  --text: #e9eef6;            /* texto principal */
  --muted: #97abc2;           /* texto secundario */
  --border: #223145;          /* bordes sutiles */
  --border-2: #324863;
  --ph: #7e93a9;              /* placeholder */

  --grid-fino: rgba(255,255,255,.022);
  --grid-grueso: rgba(255,255,255,.04);

  /* Compat. nombres V1 */
  --pri: #101a27; --pri-d: #070d16; --pri-l: #19273a;
  --acc: var(--seg); --tinta: var(--text); --papel: var(--bg);

  /* Semánticos */
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;

  --shadow: 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  --r: 14px; --r-sm: 9px;

  --mono: "Montserrat", system-ui, sans-serif;
  --rotulo: "Montserrat", system-ui, sans-serif;
}

/* === TEMA CLARO === */
[data-tema="claro"] {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --surface-3: #fbfdff;

  --text: #0f1f33;
  --muted: #566579;
  --border: #e3e9f1;
  --border-2: #cdd9e7;
  --ph: #6b7a8c;

  --grid-fino: rgba(11,36,71,.035);
  --grid-grueso: rgba(11,36,71,.06);

  --pri: #ffffff; --pri-d: #eef2f7; --pri-l: #f1f5fa;

  --ok: #16a34a; --warn: #ea9a0b; --bad: #dc2626;

  --shadow: 0 6px 18px rgba(13, 31, 51, .08);
  --shadow-lg: 0 16px 40px rgba(13, 31, 51, .14);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Open Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0; color: var(--text); line-height: 1.45;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-fino) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fino) 1px, transparent 1px),
    linear-gradient(var(--grid-grueso) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-grueso) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  background-attachment: fixed;
  transition: background-color .25s, color .25s;
}

/* ---------- Barra superior (oscura en ambos temas) ---------- */
header.barra {
  background: #0c1622; color: #fff; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: 50;
  border-bottom: 3px solid var(--seg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
header.barra h1 {
  font-family: var(--rotulo); font-size: 21px; margin: 0; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; line-height: 1;
  display: inline-flex; align-items: center; gap: 11px; color: #fff;
}
header.barra h1::before {
  content: ""; flex: none; width: 34px; height: 34px;
  background: var(--seg) url('../img/isotipo.png') center / 76% no-repeat;
  border-radius: 8px;
}
header.barra .usuario { font-family: var(--mono); font-size: 12px; color: #aebfd2; letter-spacing: .3px; }
header.barra a {
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 600;
  background: rgba(255, 255, 255, .10); padding: 7px 12px; border-radius: 7px;
  transition: background .15s;
}
header.barra a:hover { background: rgba(255, 255, 255, .2); }
header.barra button {
  background: var(--seg); color: #0b1320; border: 0; padding: 8px 16px;
  border-radius: 7px; cursor: pointer; font-weight: 800; font-size: 13px;
  font-family: var(--rotulo); letter-spacing: .5px; text-transform: uppercase;
  transition: transform .1s, filter .15s;
}
header.barra button:hover { filter: brightness(1.08); }
header.barra button:active { transform: scale(.96); }
.fila-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

main { max-width: 1060px; margin: 0 auto; padding: 18px; }

/* ============================================================
   Login — lámina técnica (oscura en ambos temas)
   ============================================================ */
body.login-bg {
  min-height: 100vh; background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-fino) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fino) 1px, transparent 1px),
    linear-gradient(var(--grid-grueso) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-grueso) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.lamina { width: 100%; max-width: 400px; position: relative; }
.lamina::before, .lamina::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 1;
}
.lamina::before { top: 7px; left: 7px; border-top: 2px solid var(--seg); border-left: 2px solid var(--seg); }
.lamina::after  { bottom: 7px; right: 7px; border-bottom: 2px solid var(--seg); border-right: 2px solid var(--seg); }
.lamina-marco {
  position: relative; background: #101a27;
  border: 1.5px solid #324863; border-radius: 6px 6px 0 0;
  padding: 30px 28px 24px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.lamina-head { text-align: center; }
.lamina-logo { width: 168px; max-width: 72%; height: auto; display: block; margin: 2px auto 0; filter: brightness(0) invert(1); opacity: .95; }
.lamina-tagline {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--seg); margin: 10px 0 0; text-align: center;
}
.lamina-titulo {
  font-family: var(--rotulo); font-size: 22px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: #fff; text-align: center; margin: 16px 0 4px;
}
.lamina-sub { font-size: 13px; color: #97abc2; text-align: center; margin: 0 0 6px; line-height: 1.4; }
.lamina-obra {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .4px; color: var(--seg);
  margin: 16px 0 18px; padding: 8px 0; text-align: center;
  border-top: 1px dashed #324863; border-bottom: 1px dashed #324863;
}
/* El login fuerza superficies oscuras aunque el tema sea claro */
.login-bg label { color: #97abc2; }
.login-bg input, .login-bg select, .login-bg textarea { background: #0b1420; color: #e9eef6; border-color: #324863; }

.form-tecnico label {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin: 14px 0 5px;
}
.login-bg button.principal {
  background: var(--seg); color: #0b1320; border-radius: 9px; margin-top: 20px; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-bg button.principal span { transition: transform .15s; }
.login-bg button.principal:hover { filter: brightness(1.08); }
.login-bg button.principal:hover span { transform: translateX(4px); }
.login-bg button.principal:active { transform: scale(.985); }
.lamina-links { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 12px; }
.lamina-links a { color: var(--seg); text-decoration: none; font-weight: 600; }
.lamina-links a:hover { text-decoration: underline; }
.lamina-links .sep { color: #97abc2; margin: 0 8px; }

.cajetin {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1.5px solid #324863; border-top: 0; border-radius: 0 0 6px 6px; overflow: hidden;
  background: #101a27;
}
.cajetin-celda { padding: 8px 10px; border-left: 1px solid #223145; }
.cajetin-celda:first-child { border-left: 0; }
.cajetin-celda span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #97abc2; }
.cajetin-celda strong { display: block; font-family: var(--rotulo); font-size: 15px; font-weight: 700; letter-spacing: .3px; color: #fff; text-transform: uppercase; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Formularios ---------- */
label { display: block; font-size: 13px; margin: 14px 0 5px; font-weight: 600; color: var(--muted); }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--border-2); border-radius: 8px;
  font-size: 15px; background: var(--surface-3); color: var(--text); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--ph); }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--seg); box-shadow: 0 0 0 3px rgba(255, 179, 25, .22);
}
select option { background: var(--surface); color: var(--text); }

/* ---------- Botones ---------- */
button.principal {
  width: 100%; margin-top: 18px; border: 0; cursor: pointer;
  background: var(--seg); color: #0b1320;
  padding: 13px; border-radius: 10px; font-size: 16px; font-weight: 800;
  letter-spacing: .2px; box-shadow: 0 6px 16px rgba(255, 179, 25, .18);
  transition: transform .1s, filter .15s;
}
button.principal:hover { filter: brightness(1.08); }
button.principal:active { transform: scale(.98); }
button.mini {
  background: var(--surface-2); border: 1.5px solid var(--border-2); color: var(--text);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s, transform .1s;
}
button.mini:hover { border-color: var(--seg); }
button.mini:active { transform: scale(.96); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Inicio (lanzador) ---------- */
.saludo {
  background: var(--surface);
  color: var(--text); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); margin-bottom: 20px; border-top: 2px solid var(--seg);
}
.saludo-top { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.saludo h2 { margin: 0; font-family: var(--rotulo); font-size: 27px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text); }
.saludo p { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.chip-rol {
  display: inline-block; background: rgba(255,179,25,.14); color: var(--seg-d); border: 1px solid rgba(255,179,25,.45);
  padding: 5px 12px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
[data-tema="claro"] .chip-rol { color: #a06a00; }
.ficha-metricas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.ficha-metricas .met { padding: 12px 16px 14px; border-left: 1px solid var(--border); }
.ficha-metricas .met:first-child { border-left: 0; }
.ficha-metricas .met .et { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ficha-metricas .met .vl { display: block; font-family: var(--rotulo); font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.tile {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.tile:hover { transform: translateY(-3px); border-color: var(--seg); box-shadow: var(--shadow-lg); }
.tile:active { transform: translateY(-1px); }
.tile .ico {
  width: 46px; height: 46px; border-radius: 10px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 4px;
}
.tile .tit { font-family: var(--rotulo); font-weight: 700; font-size: 17px; letter-spacing: .3px; text-transform: uppercase; color: var(--text); }
.tile .sub { font-family: var(--mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }

/* ---------- Tarjetas de datos ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.card {
  background: var(--surface); border-radius: 12px; padding: 16px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
.card .etq { font-family: var(--mono); font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.card .val { font-family: var(--rotulo); font-size: 30px; font-weight: 800; margin-top: 4px; color: var(--text); letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* ---------- Secciones ---------- */
section {
  background: var(--surface); border-radius: var(--r); padding: 18px; margin-top: 18px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
}
section h2 {
  font-family: var(--rotulo); font-size: 20px; margin: 0 0 14px; color: var(--text); font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
td { color: var(--text); font-variant-numeric: tabular-nums; }
tbody tr { transition: background .12s; }
tr:hover td { background: var(--surface-2); }
tfoot th, tfoot td { border-top: 2px solid var(--border-2); border-bottom: 0; color: var(--text); font-weight: 700; }

/* ---------- Semáforo y barras ---------- */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.barra-prog { position: relative; background: var(--surface-2); border-radius: 999px; height: 14px; overflow: hidden; min-width: 90px; }
.barra-real { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--seg), var(--lima)); border-radius: 999px; }
.barra-esp { position: absolute; top: 0; height: 100%; width: 2px; background: var(--text); }

canvas { width: 100%; height: auto; }
.leyenda { display: flex; gap: 16px; font-size: 13px; margin-top: 8px; flex-wrap: wrap; color: var(--muted); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.linea-muestra { width: 22px; height: 3px; display: inline-block; border-radius: 2px; }
.nota { font-size: 12px; color: var(--muted); margin-top: 6px; }
.error { color: var(--bad); font-size: 14px; margin-top: 10px; min-height: 18px; }
.ok { color: var(--ok); font-size: 14px; margin-top: 10px; min-height: 18px; }
.ayuda { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* ---------- Avisos ---------- */
.aviso { padding: 11px 15px; border-radius: var(--r-sm); font-size: 14px; margin-bottom: 14px; font-weight: 600; color: var(--text); }
.aviso.offline { background: rgba(251,191,36,.12); border: 1px solid var(--warn); }
.aviso.pendiente { background: rgba(255,179,25,.12); border: 1px solid var(--seg); }

/* ---------- Badge / plan ---------- */
.badge { font-family: var(--mono); font-size: 11px; font-weight: 700; color: #0b1320; background: var(--seg); padding: 4px 11px; border-radius: 6px; margin-left: 8px; letter-spacing: .5px; }
.fila-plan { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fila-plan select { flex: 1 1 200px; }
.fila-plan input { width: 130px; }

/* ---------- Miniaturas ---------- */
.miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.miniatura { position: relative; width: 80px; height: 80px; }
.miniatura img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.miniatura .quitar-foto {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--bad); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; box-shadow: var(--shadow);
}

/* ---------- Árbol de niveles ---------- */
details.nivel-titulo { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
details.nivel-titulo > summary { background: var(--surface-2); padding: 12px; font-weight: 700; cursor: pointer; color: var(--text); }
details.nivel-titulo > summary .nom { font-family: var(--rotulo); font-size: 16px; letter-spacing: .3px; text-transform: uppercase; }
details.nivel-sistema { margin: 2px 0; }
details.nivel-sistema > summary { background: var(--surface-3); padding: 9px 10px 9px 24px; cursor: pointer; font-weight: 600; color: var(--text); }
.nivel-frente { padding: 8px 10px 8px 42px; border-top: 1px solid var(--border); }
summary { list-style-position: inside; }
.fila-nivel { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; width: calc(100% - 24px); vertical-align: middle; }
.fila-nivel .nom { flex: 1 1 220px; }
.fila-nivel .metr { font-size: 13px; white-space: nowrap; }
.fila-nivel .gris { color: var(--muted); }

/* ---------- Plataforma / paneles ---------- */
.contenido { max-width: 960px; margin: 0 auto; padding: 16px; }
.botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.card-resumen { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.card-resumen p { margin: 4px 0; }
.modo-frentes { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 8px; }
.modo-frentes label { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; color: var(--text); }
.modo-frentes input { width: auto; }
.arbol { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--surface-3); }
.arbol-fila { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.arbol-fila:hover { background: var(--surface-2); }
.arbol-fila input { width: auto; }
.arbol-cod { font-family: var(--mono, monospace); color: var(--seg-d); font-size: 13px; min-width: 92px; }
[data-tema="claro"] .arbol-cod { color: var(--blueprint); }
.arbol-desc { flex: 1; }
.arbol-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- Barra lateral (oscura en ambos temas) ---------- */
.ham { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; margin-right: 6px; line-height: 1; padding: 0 4px; }
#lateral {
  position: fixed; top: 0; left: 0; height: 100%; width: 252px; z-index: 1000;
  background: #0c1622; color: #fff; transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.22,1,.36,1); overflow-y: auto;
  box-shadow: 2px 0 24px rgba(0,0,0,.5); border-right: 1px solid #223145;
}
body.nav-abierto #lateral { transform: translateX(0); }
#navOverlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .2s; }
body.nav-abierto #navOverlay { opacity: 1; visibility: visible; }
.lat-head { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lat-logo { width: 32px; height: 32px; }
.lat-head strong { display: block; font-family: var(--rotulo); letter-spacing: .5px; color: #fff; }
.lat-obra { font-size: 12px; color: #97abc2; }
.lat-cat { padding: 14px 16px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #6f8197; font-family: var(--rotulo); font-weight: 700; }
.lat-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #d6e0ec; text-decoration: none; font-weight: 500; transition: background .12s, color .12s; }
.lat-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.lat-link.activo { background: rgba(255,179,25,.16); color: #fff; box-shadow: inset 3px 0 0 var(--seg); }
.lat-ico { width: 20px; text-align: center; }
.lat-foot { padding: 12px 10px 18px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 6px; }
.lat-accion { background: rgba(255,255,255,.08); color: #fff; border: none; border-radius: 8px; padding: 10px; text-align: left; cursor: pointer; font-weight: 600; font-size: 14px; transition: background .12s; }
.lat-accion:hover { background: rgba(255,255,255,.16); }

/* ---------- Inicio: categorías ---------- */
.cat-inicio { margin-top: 18px; }
.cat-inicio > h3 {
  font-family: var(--rotulo); text-transform: uppercase; letter-spacing: 1px; font-size: 14px;
  color: var(--muted); margin: 0 0 10px; padding-bottom: 4px;
  border-bottom: 2px solid var(--seg); display: inline-block;
}

/* ---------- Árbol desplegable de frentes ---------- */
.arb-hijos { margin-left: 20px; border-left: 1px dashed var(--border-2); padding-left: 4px; }
.arb-hijos.colapsado { display: none; }
.arb-fila { display: flex; align-items: center; gap: 7px; padding: 3px 4px; border-radius: 6px; }
.arb-fila:hover { background: var(--surface-2); }
.arb-tog { border: none; background: none; cursor: pointer; font-size: 13px; width: 18px; padding: 0; color: var(--seg-d); }
[data-tema="claro"] .arb-tog { color: var(--blueprint); }
.arb-tog-sp { display: inline-block; width: 18px; }
.arb-chk { width: auto; }
.arb-cnt { color: var(--muted); font-style: normal; font-size: 12px; }
.fr-acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fr-acciones select { width: auto; min-width: 130px; }
#listaFrentes input { min-width: 140px; }

/* ---------- Colores por NIVEL de jerarquía (como en Reportar/Delphi) ----------
   Cada nivel un color (1 azul, 2 verde, 3 ámbar, 4 morado, 5 rojo, 6 turquesa).
   Se usan en los árboles de Frentes y APU; --c se adapta al tema. */
.lvl-1 { --c: #5b9aff; } .lvl-2 { --c: #34d399; } .lvl-3 { --c: #fbbf24; }
.lvl-4 { --c: #c084fc; } .lvl-5 { --c: #f87171; } .lvl-6 { --c: #2dd4bf; }
[data-tema="claro"] .lvl-1 { --c: #0b3d91; } [data-tema="claro"] .lvl-2 { --c: #0f7b52; }
[data-tema="claro"] .lvl-3 { --c: #8a4b00; } [data-tema="claro"] .lvl-4 { --c: #7a1fa2; }
[data-tema="claro"] .lvl-5 { --c: #9e1c1c; } [data-tema="claro"] .lvl-6 { --c: #0e6b73; }

/* Árbol de frentes: fila tintada y código/descripción coloreados según el nivel */
.arb-fila[class*="lvl-"] { background: color-mix(in srgb, var(--c) 9%, transparent); }
.arb-fila[class*="lvl-"]:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.arb-fila[class*="lvl-"] .arbol-cod { color: var(--c); }
.arb-fila[class*="lvl-"] .arbol-desc { color: var(--c); font-weight: 600; }

/* ---------- Casillas de permisos ---------- */
.permisos-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 6px; }
.permisos-check .chk {
  display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin: 0; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.permisos-check .chk input { width: auto; }

/* ---------- Impresión ---------- */
@media print {
  header.barra, .no-print, #lateral, #navOverlay { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: 100%; padding: 0; }
  section, .card, .tile { box-shadow: none; border: 1px solid #ccc; background: #fff; color: #000; }
  th, td, section h2, .card .val, .saludo h2 { color: #000 !important; }
  a { color: #000; text-decoration: none; }
}