/* Tokens de tema, tipografía base y encabezado — compartido por ACP, login y administración */
  :root {
    --fondo: #EEF0F3;
    --panel: #FFFFFF;
    --panel-2: #F6F7F9;
    --tinta: #15181D;
    --tinta-2: #66707E;
    --tinta-3: #9AA3B0;
    --linea: #E1E4E9;
    --entrada: #1E8C5C;
    --salida: #E07B1A;
    --rechazo: #C0392B;
    --plate-bg: #15181D;
    --plate-fg: #FFFFFF;
    --logo-fondo: transparent;
    --sombra: 0 1px 2px rgba(20,24,30,.04), 0 12px 32px -16px rgba(20,24,30,.18);
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --fondo: #0F1114;
    --panel: #171A1F;
    --panel-2: #1F2329;
    --tinta: #EEF0F3;
    --tinta-2: #8E97A5;
    --tinta-3: #5D6673;
    --linea: #262B33;
    --entrada: #3EC287;
    --salida: #F0923A;
    --rechazo: #EA5B4C;
    --plate-bg: #EEF0F3;
    --plate-fg: #15181D;
    --logo-fondo: #FFFFFF;
    --sombra: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -16px rgba(0,0,0,.7);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --fondo: #0F1114;
    --panel: #171A1F;
    --panel-2: #1F2329;
    --tinta: #EEF0F3;
    --tinta-2: #8E97A5;
    --tinta-3: #5D6673;
    --linea: #262B33;
    --entrada: #3EC287;
    --salida: #F0923A;
    --rechazo: #EA5B4C;
    --plate-bg: #EEF0F3;
    --plate-fg: #15181D;
    --logo-fondo: #FFFFFF;
    --sombra: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -16px rgba(0,0,0,.7);
    color-scheme: dark;
    }
  }
  html { transition: background-color .25s ease; }
  .pagina, .panel, .lista, .resumen, .controladoras, .ultimo { transition: background-color .25s ease, color .25s ease; }

  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  button:focus-visible, li:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

  .pagina {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    display: grid;
    gap: 22px;
  }

  /* ── Encabezado ─────────────────────────────── */
  header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
  }
  .marca { display: flex; align-items: center; gap: 14px; }
  .marca .logo {
    height: 40px; display: grid; place-items: center;
    background: var(--logo-fondo); border-radius: 10px; padding: 0 8px;
  }
  .marca .logo img { height: 28px; width: auto; display: block; }
  .marca .logo svg { width: 22px; height: 22px; stroke: var(--tinta); }
  .marca .logo.fallback { background: var(--tinta); padding: 0; width: 40px; }
  .marca .logo.fallback svg { display: block !important; }
  .marca .logo.fallback svg { stroke: var(--fondo); }
  .marca h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
  .marca small { display: block; color: var(--tinta-2); font-weight: 500; font-size: 13px; letter-spacing: .01em; }
  .derecha-cab { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }
  .tema {
    width: 36px; height: 36px; border-radius: 999px;
    border: 1px solid var(--linea); background: var(--panel);
    display: grid; place-items: center; color: var(--tinta-2);
  }
  .tema:hover { color: var(--tinta); background: var(--panel-2); }
  .tema svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
  .tema .sol { display: none; }
  :root[data-theme="dark"] .tema .sol { display: block; }
  :root[data-theme="dark"] .tema .luna { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tema .sol { display: block; }
    :root:not([data-theme="light"]) .tema .luna { display: none; }
  }

  .reloj { text-align: center; font-variant-numeric: tabular-nums; }
  .reloj b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .reloj span { color: var(--tinta-2); font-size: 13px; text-transform: capitalize; }

  .conexion {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--tinta-2); font-size: 13px; font-weight: 500;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--linea); border-radius: 999px; background: var(--panel);
  }
  .conexion i { width: 8px; height: 8px; border-radius: 50%; background: var(--rechazo); }
  .conexion.ok i { background: var(--entrada); box-shadow: 0 0 0 3px color-mix(in srgb, var(--entrada) 22%, transparent); }


  /* ── Usuario en el encabezado ── */
  .usuario { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--linea); border-radius: 999px; background: var(--panel); color: var(--tinta-2); font-size: 13px; font-weight: 500; text-decoration: none; }
  .usuario:hover { color: var(--tinta); background: var(--panel-2); }
  .usuario .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: var(--fondo); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
  .usuario.admin .avatar { background: var(--entrada); color: #fff; }
  .enlace { color: var(--tinta-2); font-size: 13px; font-weight: 600; text-decoration: none; padding: 7px 10px; border-radius: 8px; }
  .enlace:hover { color: var(--tinta); background: var(--panel-2); }
  .enlace.activo { color: var(--tinta); }