/* MiTempo Panel — tokens de la paleta validada (datos: azul / naranja / aguamarina; estados con ícono + texto). */
:root {
  color-scheme: light;
  --pagina: #f9f9f7;
  --superficie: #fcfcfb;
  --tinta: #0b0b0b;
  --tinta-2: #52514e;
  --suave: #898781;
  --grilla: #e1e0d9;
  --eje: #c3c2b7;
  --borde: rgba(11, 11, 11, 0.10);
  --serie-1: #2a78d6;   /* Trato */
  --serie-2: #eb6834;   /* Luca */
  --serie-3: #1baf7a;   /* CobroSolo */
  --ok: #0ca30c;  --ok-texto: #006300;
  --alerta: #d03b3b;
  --aviso: #fab219;
  --serio: #ec835a;
  --acento: #1c5cab;
  --sobre-acento: #ffffff;
  --sombra: 0 1px 2px rgba(11, 11, 11, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --pagina: #0d0d0d; --superficie: #1a1a19; --tinta: #ffffff; --tinta-2: #c3c2b7; --suave: #898781;
    --grilla: #2c2c2a; --eje: #383835; --borde: rgba(255, 255, 255, 0.10);
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
    --ok-texto: #0ca30c; --acento: #6da7ec; --sobre-acento: #0b0b0b; --sombra: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pagina: #0d0d0d; --superficie: #1a1a19; --tinta: #ffffff; --tinta-2: #c3c2b7; --suave: #898781;
  --grilla: #2c2c2a; --eje: #383835; --borde: rgba(255, 255, 255, 0.10);
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
  --ok-texto: #0ca30c; --acento: #6da7ec; --sobre-acento: #0b0b0b; --sombra: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pagina); color: var(--tinta);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.suave { color: var(--suave); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.boton {
  font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; min-height: 40px;
}
.boton:hover { border-color: var(--eje); }
.boton:focus-visible, input:focus-visible, .tabs button:focus-visible, .chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton.primario { background: var(--acento); color: var(--sobre-acento); border-color: transparent; font-weight: 600; }
.boton.chico { padding: 6px 10px; min-height: 34px; font-size: 13px; color: var(--tinta-2); }

/* Acceso */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-caja {
  width: min(100%, 360px); background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: 28px 22px; display: grid; gap: 12px; text-align: center; box-shadow: var(--sombra);
}
.login-logo { margin: 0 auto; border-radius: 14px; }
.login input {
  font: inherit; color: var(--tinta); background: var(--pagina); border: 1px solid var(--eje);
  border-radius: 8px; padding: 11px 12px; width: 100%; min-height: 44px; text-align: center;
}
.login-error { color: var(--alerta); font-size: 14px; }

/* Cabecera */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { border-radius: 7px; flex: none; }
.marca h1 { font-size: 17px; font-weight: 650; }
.estado { display: flex; align-items: center; gap: 7px; color: var(--tinta-2); font-size: 13px; margin-left: auto; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--suave); flex: none; }
.punto.ok { background: var(--ok); }
.punto.error { background: var(--alerta); }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }

/* Pestañas */
.tabs {
  display: flex; gap: 4px; padding: 8px 16px 0; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5; overflow-x: auto;
}
.tabs button {
  font: inherit; font-weight: 600; color: var(--tinta-2); background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 14px; cursor: pointer; white-space: nowrap; flex: 1 1 auto; text-align: center;
}
.tabs button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }

.aviso { margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta-2); font-size: 14px; }
.aviso.error { border-color: var(--alerta); }

.contenido { padding: 16px; max-width: 1080px; margin: 0 auto; display: grid; gap: 16px; }
section { display: grid; gap: 16px; align-content: start; }
.titulo-seccion { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }

/* Tarjetas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); display: grid; gap: 12px; }
.grilla-3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grilla-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cab-app { display: flex; align-items: center; gap: 10px; }
.marca-app { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cab-app h2 { font-size: 16px; font-weight: 650; }
.cab-app .total { margin-left: auto; color: var(--suave); font-size: 13px; }
.gran-numero { font-size: 30px; font-weight: 700; line-height: 1.1; }
.gran-numero small { font-size: 13px; font-weight: 500; color: var(--tinta-2); margin-left: 6px; }
.etiqueta { color: var(--tinta-2); font-size: 13px; }
.delta { font-size: 13px; color: var(--tinta-2); }
.delta.sube { color: var(--ok-texto); }

/* Estados: siempre ícono + texto */
.estados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.est { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--pagina); border: 1px solid var(--borde); font-size: 13px; }
.est b { font-size: 17px; margin-left: auto; }
.ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0b0b0b; flex: none; }
.ic.prueba { background: var(--suave); color: #fff; }
.ic.activo { background: var(--ok); }
.ic.pago_fallido { background: var(--alerta); color: #fff; }
.ic.baja { background: var(--eje); }
.ic.pausado { background: var(--aviso); }

/* Barras por app (marca fina con etiqueta directa) */
.barras { display: grid; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.barra-pista { height: 10px; border-radius: 0 4px 4px 0; background: transparent; border-left: 1px solid var(--eje); }
.barra-valor { height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; }
.barra-fila b { font-weight: 600; }

/* Listas */
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 13px; color: var(--tinta-2); background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 34px; }
.chip[aria-pressed="true"] { color: var(--sobre-acento); background: var(--acento); border-color: transparent; }
.lista { display: grid; gap: 8px; }
.fila { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.fila .quien { font-weight: 600; overflow-wrap: anywhere; }
.fila .sub { grid-column: 2; color: var(--tinta-2); font-size: 13px; overflow-wrap: anywhere; }
.fila .derecha { grid-row: 1 / span 2; grid-column: 3; text-align: right; font-size: 13px; color: var(--tinta-2); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; background: var(--pagina); color: var(--tinta); white-space: nowrap; }
.pastilla.vencida { border-color: var(--serio); }
.vacio { text-align: center; color: var(--suave); padding: 28px 12px; background: var(--superficie); border: 1px dashed var(--eje); border-radius: 10px; }

/* Tabla de ingresos */
.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: right; padding: 9px 8px; border-bottom: 1px solid var(--grilla); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--tinta-2); font-weight: 600; font-size: 12px; }
td.num, th.num { font-variant-numeric: tabular-nums; }

@media (min-width: 720px) {
  .top { padding-left: 24px; padding-right: 24px; }
  .tabs { padding-left: 24px; padding-right: 24px; }
  .contenido { padding: 24px; }
}
@media (max-width: 520px) {
  .tabs { padding: 8px 8px 0; gap: 0; }
  .tabs button { padding: 10px 4px; font-size: 13.5px; }
  th, td { padding: 8px 5px; font-size: 13px; }
  .gran-numero { font-size: 26px; }
  .estado { margin-left: 0; width: 100%; order: 3; }
  .acciones { margin-left: auto; }
}
@media (forced-colors: active) {
  .barra-valor { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .punto.ok { animation: latido 2.4s ease-in-out infinite; }
  @keyframes latido { 50% { opacity: .45; } }
}