/* Camaleón App · tema negro y dorado. Tokens en :root; sin dependencias externas. */
:root {
  --negro: #0a0a0b;
  --carbon: #121214;
  --carbon-2: #18181c;
  --carbon-3: #222227;
  --linea: #2b2b31;
  --linea-suave: #1f1f24;
  --oro: #d4af37;
  --oro-claro: #f0d37a;
  --oro-profundo: #a8861f;
  --oro-suave: rgba(212, 175, 55, 0.12);
  --texto: #fffdf6;
  --texto-2: #ece6d4;
  --texto-3: #cfc7b1;
  --ok: #86c79f;
  --ambar: #e9b85d;
  --peligro: #ec7b6b;
  --gris: #c9ced6;
  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", "SF Pro Text", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(212, 175, 55, 0.07), transparent 55%),
    var(--negro);
  color: var(--texto);
  font: 16.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.2px; margin: 0; }
h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.05; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0 0 10px; }
small, .suave { color: var(--texto-3); font-size: 14px; }
a { color: var(--oro-claro); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 2px; border-radius: 6px; }
.saltar {
  position: absolute; left: -999px; top: 8px; background: var(--oro); color: #111; padding: 8px 12px; border-radius: 8px; z-index: 99;
}
.saltar:focus { left: 12px; }
.cargando { padding: 40px; color: var(--texto-2); }
.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* ---------- Layout ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.app-publica { min-height: 100vh; display: block; }
.barra {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 16px;
  background: linear-gradient(180deg, #0d0d0f, #09090a); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 22px;
}
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: cover; }
.marca strong { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.marca span { color: var(--texto-3); font-size: 11.5px; letter-spacing: 0.4px; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-wrap { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.barra-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-toggle { display: none; }
.buscador input { margin: 0; }
details.depto { border-radius: 10px; }
details.depto > summary {
  cursor: pointer; list-style: none; padding: 9px 12px; border-radius: 10px; color: var(--oro-claro);
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.6px; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between;
}
details.depto > summary::-webkit-details-marker { display: none; }
details.depto > summary::after { content: "▾"; color: var(--oro); transition: transform .2s; }
details.depto:not([open]) > summary::after { transform: rotate(-90deg); }
details.depto > summary:hover { background: var(--carbon-2); }
.nav-lista { list-style: none; margin: 0; padding: 2px 0 8px 4px; display: grid; gap: 2px; }
.nav-lista a {
  color: var(--texto); padding: 8px 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font-size: 16px; text-decoration: none;
}
.nav-lista a:hover { background: var(--carbon-2); text-decoration: none; }
.nav-lista a[aria-current="page"] { background: var(--oro-suave); color: var(--oro-claro); box-shadow: inset 2px 0 0 var(--oro); }
.punto-pendiente { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); margin-left: auto; flex: none; }
.fila-cuenta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.fila-cuenta a { font-size: 15px; }
/* Bloques de cada módulo: qué es, quién lo usa y con qué se conecta */
.migas { font-size: 14.5px; color: var(--texto-2); margin-bottom: 8px; }
.migas strong { color: var(--oro-claro); font-weight: 600; }
.explicacion {
  border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.06); border-radius: var(--radio);
  padding: 14px 18px; margin-bottom: 20px; font-size: 16px; line-height: 1.6;
}
.explicacion p { margin: 4px 0; }
.explicacion strong { color: var(--oro-claro); }
.estado-pendiente { color: var(--ambar); }
/* Accesos rápidos y contadores */
.accesos-rapidos { margin-bottom: 22px; }
.accesos-rapidos h2 { font-size: 20px; margin-bottom: 10px; }
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.acceso-rapido {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px; color: var(--oro-claro); text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.acceso-rapido:hover { background: var(--oro-suave); text-decoration: none; }
.contador {
  display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--carbon-3); color: var(--texto-2); font-size: 14px; font-weight: 700;
}
.contador.alerta { background: var(--ambar); color: #17130a; }
.pendiente-item { align-items: center; }
.pendiente-item.con-pendientes { border-color: rgba(233, 184, 93, 0.45); }
.nav a {
  color: var(--texto); padding: 11px 12px; border-radius: var(--radio-s); display: flex; align-items: center; gap: 10px; font-size: 16px;
}
.nav a:hover { background: var(--carbon-2); color: var(--texto); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--oro-suave); color: var(--oro-claro); box-shadow: inset 2px 0 0 var(--oro); }
.nav .icono { width: 18px; text-align: center; color: var(--oro); opacity: .9; }
.nav .grupo { color: var(--oro-claro); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; margin: 10px 12px 4px; }
.cuenta { margin-top: auto; border-top: 1px solid var(--linea); padding-top: 14px; font-size: 13px; }
.cuenta strong { display: block; color: var(--texto); }
.principal { padding: 28px clamp(16px, 3vw, 44px) 60px; min-width: 0; }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.encabezado p { color: var(--texto-2); margin: 6px 0 0; max-width: 70ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rejilla { display: grid; gap: 16px; }
.r-4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.r-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.bloque { margin-top: 22px; }

/* ---------- Superficies ---------- */
.tarjeta {
  background: linear-gradient(180deg, var(--carbon-2), var(--carbon));
  border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); min-width: 0;
}
.tarjeta h3 { margin-bottom: 10px; }
.kpi { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.kpi:hover { border-color: rgba(212, 175, 55, .55); text-decoration: none; transform: translateY(-1px); }
.kpi .valor { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--oro-claro); font-variant-numeric: lining-nums tabular-nums; }
.kpi .titulo { color: var(--texto); font-weight: 600; }
.kpi .fuente { color: var(--texto-2); font-size: 14px; }
.kpi .ver { color: var(--oro-claro); font-size: 14px; margin-top: auto; font-weight: 600; }
.kpi.gris .valor { color: var(--gris); }
.kpi.ambar .valor { color: var(--ambar); }
.muted { opacity: .55; }
.banda-demo {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  border: 1px dashed rgba(212, 175, 55, .6); background: rgba(212, 175, 55, .06); border-radius: var(--radio-s);
  padding: 10px 14px; margin-bottom: 18px; color: var(--texto); font-size: 15px;
}
.demo, .chip.demo {
  display: inline-block; border: 1px dashed var(--oro); color: var(--oro-claro); border-radius: 999px;
  padding: 1px 8px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle;
}

/* ---------- Chips y estados ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--linea); color: var(--texto-2); background: var(--carbon-3); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); border-color: rgba(134, 199, 159, .35); background: rgba(134, 199, 159, .08); }
.chip.ambar { color: var(--ambar); border-color: rgba(233, 184, 93, .35); background: rgba(233, 184, 93, .08); }
.chip.peligro { color: var(--peligro); border-color: rgba(236, 123, 107, .4); background: rgba(236, 123, 107, .08); }
.chip.oro { color: var(--oro-claro); border-color: rgba(212, 175, 55, .45); background: var(--oro-suave); }
.chip.gris { color: var(--gris); }

/* ---------- Botones y campos ---------- */
.btn {
  appearance: none; border: 1px solid rgba(212, 175, 55, .7); background: transparent; color: var(--oro-claro);
  padding: 10px 16px; border-radius: 999px; font: 600 15px var(--sans); cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--oro-suave); border-color: var(--oro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #17130a; border-color: transparent; }
.btn.primario:hover { background: linear-gradient(180deg, #f7e09a, var(--oro-claro)); }
.btn.peligro { border-color: rgba(236, 123, 107, .6); color: var(--peligro); }
.btn.peligro:hover { background: rgba(236, 123, 107, .1); }
.btn.fantasma { border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover { color: var(--texto); }
.btn.peq { padding: 6px 12px; font-size: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .campo .etiqueta { font-size: 15px; color: var(--texto); font-weight: 500; letter-spacing: .2px; }
.campo .ayuda { color: var(--texto-3); font-size: 13.5px; }
.campo .error { color: #ff9b8c; font-size: 14px; font-weight: 500; }
input, select, textarea {
  font: 16px var(--sans); color: var(--texto); background: var(--carbon); border: 1px solid #3a3a42;
  border-radius: var(--radio-s); padding: 9px 11px; width: 100%; min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(212, 175, 55, .15); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--peligro); }
input[type="checkbox"] { width: auto; accent-color: var(--oro); }
textarea { min-height: 84px; resize: vertical; }
select option { background: var(--carbon); color: var(--texto); }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 16px; }
.formulario .ancho { grid-column: 1 / -1; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filtros .campo { min-width: 160px; flex: 1 1 160px; max-width: 260px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); font-size: 16px; }
.casilla input { margin-top: 3px; }

/* ---------- Tablas ---------- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--carbon); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
th { color: var(--oro-claro); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; background: var(--carbon-2); position: sticky; top: 0; }
tbody tr:hover td { background: rgba(212, 175, 55, .035); }
tbody tr:last-child td { border-bottom: 0; }
td.acc { text-align: right; white-space: nowrap; }
td .detalle { color: var(--texto-3); font-size: 12.5px; }
.vacio { padding: 30px; text-align: center; color: var(--texto-2); }

/* ---------- Barras, listas y pestañas ---------- */
.barras { display: grid; gap: 9px; }
.barra-fila { display: grid; grid-template-columns: 170px 1fr 52px; gap: 12px; align-items: center; font-size: 15px; }
.barra-fila a { color: var(--texto); }
.pista { height: 10px; background: var(--carbon-3); border-radius: 999px; overflow: hidden; }
.pista span { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-profundo), var(--oro-claro)); border-radius: 999px; min-width: 2px; }
.pista.modelo span { background: linear-gradient(90deg, #6e5a1b, #e8c766); }
.pista.personal span { background: linear-gradient(90deg, #4d4a40, #bdb6a4); }
.leyenda { display: flex; gap: 14px; font-size: 14px; color: var(--texto-2); margin-bottom: 8px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mosaico { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sede-tile { border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; background: radial-gradient(120% 120% at 100% 0%, rgba(212,175,55,.10), transparent 55%), var(--carbon); color: inherit; text-decoration: none; display: block; }
.sede-tile:hover { border-color: rgba(212,175,55,.55); text-decoration: none; }
.sede-tile strong { font-family: var(--serif); font-size: 20px; display: block; }
.sede-tile .cifras { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.sede-tile .cifras b { color: var(--oro-claro); font-size: 18px; font-weight: 600; display: block; }
.lista { display: grid; gap: 8px; }
.item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--linea-suave); border-radius: var(--radio-s); padding: 10px 12px; background: var(--carbon); }
.item .texto { min-width: 0; }
.item .texto strong { display: block; }
.fase { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea-suave); }
.fase:last-child { border-bottom: 0; }
.fase .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; border: 1px solid var(--oro); color: var(--oro-claro); }
.fase.hecha .n { background: var(--oro); color: #17130a; }
.fase.pendiente .n { color: var(--texto-3); border-color: var(--linea); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; overflow-x: auto; }
.pestanas a { padding: 10px 14px; color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a[aria-current="page"] { color: var(--oro-claro); border-color: var(--oro); text-decoration: none; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
.datos dt { color: var(--oro-claro); font-size: 13px; text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.datos dd { margin: 4px 0 0; color: var(--texto); font-size: 16px; }
.oculto-permiso { color: var(--texto-2); font-style: italic; }
.codigo { font-family: var(--mono); font-size: 13.5px; color: var(--texto-2); white-space: nowrap; }
.mensaje-bloque { border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 12px 14px; color: var(--texto); background: var(--carbon-2); }
.mensaje-bloque.aviso { border-color: rgba(233, 184, 93, .45); color: var(--ambar); background: rgba(233, 184, 93, .06); }
.mensaje-bloque.exito { border-color: rgba(134, 199, 159, .45); color: var(--ok); background: rgba(134, 199, 159, .06); }
.enlace-caja { font-family: var(--mono); font-size: 12.5px; word-break: break-all; background: var(--negro); border: 1px solid var(--oro-profundo); border-radius: var(--radio-s); padding: 12px; color: var(--oro-claro); }
.secreto { font-family: var(--mono); font-size: 18px; letter-spacing: 3px; color: var(--oro-claro); word-break: break-all; }
.pasos { counter-reset: paso; display: grid; gap: 10px; }
.pasos li { list-style: none; position: relative; padding-left: 40px; }
.pasos li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro-claro); display: grid; place-items: center; font-size: 13px; }
.pasos ol, .pasos ul { padding: 0; margin: 0; }

/* ---------- Inicio de sesión ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.acceso .tarjeta { width: min(480px, 100%); padding: 32px; }
.acceso .marca { margin-bottom: 22px; }
.acceso .marca img { width: 120px; height: 120px; border-radius: 14px; }
.acceso .marca strong { font-size: 24px; }
.acceso form { display: grid; gap: 14px; }
.pie-legal { color: var(--texto-2); font-size: 14px; margin-top: 16px; }

/* ---------- Modal y avisos ---------- */
dialog.modal {
  background: linear-gradient(180deg, var(--carbon-2), var(--carbon)); color: var(--texto); border: 1px solid var(--oro-profundo);
  border-radius: 18px; padding: 0; width: min(640px, calc(100vw - 24px)); box-shadow: 0 30px 80px -20px #000;
}
dialog.modal.ancho { width: min(980px, calc(100vw - 24px)); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.modal-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.modal-cuerpo { padding: 20px 22px; max-height: min(72vh, 780px); overflow-y: auto; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.avisos { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 100; max-width: min(380px, calc(100vw - 36px)); }
.aviso-item { background: var(--carbon-3); border: 1px solid var(--oro-profundo); border-radius: var(--radio-s); padding: 12px 14px; box-shadow: var(--sombra); font-size: 14px; }
.aviso-item.error { border-color: var(--peligro); }
.aviso-item.ok { border-color: var(--ok); }
.tabs-lista { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Matriz de permisos ---------- */
.matriz select { min-width: 150px; font-size: 13px; padding: 6px 8px; }
.matriz th:first-child, .matriz td:first-child { min-width: 210px; }
.roles-lista { display: grid; gap: 8px; }
.rol-item { text-align: left; background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 12px; color: var(--texto); cursor: pointer; display: grid; gap: 4px; }
.rol-item[aria-pressed="true"] { border-color: var(--oro); background: var(--oro-suave); }
.rol-item strong { font-family: var(--serif); font-size: 17px; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .dos { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .barra { position: sticky; top: 0; height: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--linea); z-index: 20; background: var(--negro); }
  .barra-cabecera { padding: 10px 14px; }
  .marca span { display: block; font-size: 11px; }
  .menu-toggle { display: inline-flex; }
  .nav-wrap {
    display: none; position: fixed; top: 70px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 14px 16px 40px;
    background: var(--negro); z-index: 30;
  }
  .barra.abierta .nav-wrap { display: flex; }
  .cuenta { margin-top: 10px; }
  .acceso-rapido { font-size: 15px; }
  .barra-fila { grid-template-columns: 1fr 52px; }
  .barra-fila .nombre { grid-column: 1 / -1; }
  .principal { padding: 20px 16px 60px; }
  .tabla-wrap.tarjetas table, .tabla-wrap.tarjetas tbody { display: block; }
  .tabla-wrap.tarjetas thead { display: none; }
  .tabla-wrap.tarjetas tbody tr { display: block; border-bottom: 1px solid var(--linea); padding: 10px 12px; }
  .tabla-wrap.tarjetas tbody tr:hover td { background: none; }
  .tabla-wrap.tarjetas tbody td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
  .tabla-wrap.tarjetas tbody td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: 12px; text-align: left; flex: none; }
  .tabla-wrap.tarjetas tbody td.acc { justify-content: flex-end; flex-wrap: wrap; }
  .tabla-wrap.tarjetas tbody td.vacio { display: block; text-align: center; }
  .tabla-wrap.tarjetas tbody td:first-child { display: block; text-align: left; font-size: 15px; padding-bottom: 8px; }
}
@media (max-width: 640px) {
  .r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .valor { font-size: 36px; }
  .dos, .r-2 { grid-template-columns: 1fr; }
  .encabezado h1 { font-size: 30px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Autorización de tratamiento de datos: bloque destacado y más legible */
.consentimiento {
  border: 1px solid var(--oro); background: rgba(212, 175, 55, 0.08); border-radius: var(--radio);
  padding: 18px 18px 16px; margin: 6px 0 4px; display: grid; gap: 12px;
}
.consentimiento legend, .consentimiento .titulo-consentimiento {
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--oro-claro); padding: 0;
}
.consentimiento p { font-size: 17px; line-height: 1.6; color: var(--texto); margin: 0; }
.consentimiento .casilla { font-size: 17px; font-weight: 600; color: var(--texto); align-items: center; }
.consentimiento .casilla input { width: 22px; height: 22px; }

/* Centro de mando: mapa de estaciones por estado */
.mapa-estaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.estacion {
  display: flex; flex-direction: column; gap: 3px; padding: 10px; min-height: 66px; border-radius: 10px;
  border: 1px solid var(--linea); background: var(--carbon-2); color: var(--texto); text-decoration: none; font-size: 14px;
}
.estacion:hover { text-decoration: none; border-color: var(--oro); }
.estacion .codigo { font-size: 12.5px; color: var(--texto); }
.estacion.libre { border-color: rgba(134, 199, 159, 0.7); background: rgba(134, 199, 159, 0.12); }
.estacion.ocupada { border-color: rgba(212, 175, 55, 0.85); background: rgba(212, 175, 55, 0.16); }
.estacion.mant { border-color: rgba(233, 184, 93, 0.8); background: rgba(233, 184, 93, 0.10); }
.estacion.fuera { border-color: rgba(236, 123, 107, 0.8); background: rgba(236, 123, 107, 0.10); }
.tabs-lista .chip { font-size: 15px; padding: 7px 14px; text-decoration: none; }
.foto-tarjeta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.foto-tarjeta > div { flex: 1 1 220px; min-width: 0; }
.foto-perfil { width: 120px; height: 120px; flex: none; border-radius: var(--radio); object-fit: cover; border: 1px solid var(--oro-profundo); background: var(--carbon-2); }
.foto-perfil.sin-foto { display: grid; place-items: center; font-family: var(--serif); font-size: 2.2rem; color: var(--oro-claro); }
.marca-central { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-bottom: 24px; }
.marca-central .logo-central { width: 150px; height: 150px; border-radius: 16px; object-fit: cover; }
.marca-central strong { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--oro-claro); letter-spacing: .5px; }
.acceso .tarjeta > h1, .acceso .tarjeta > p { text-align: center; }
.marca-central .nombre-app { font-size: 26px; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }

/* Trayectoria de la modelo: línea de tiempo vertical, responsive (en pantallas angostas la fecha va arriba) */
.linea-tiempo { list-style: none; margin: 14px 0 0; padding: 0 0 0 4px; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--linea); }
.hito { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; padding: 0 0 16px; position: relative; }
.hito-fecha { color: var(--gris); font-size: 14px; padding-top: 2px; }
.hito-cuerpo { position: relative; padding-left: 22px; }
.hito-marca { position: absolute; left: -4px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 3px var(--negro); }
@media (max-width: 640px) {
  .hito { grid-template-columns: 1fr; }
  .hito-fecha { padding-top: 0; }
}

/* Listado detallado bajo cada contador del centro de mando */
.detalle-kpi { margin-top: 8px; }
.detalle-kpi summary { cursor: pointer; color: var(--oro); font-size: 14px; }
.lista-simple { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--gris); }