:root {
  --fondo: #f4f5f7;
  --fondo2: #ffffff;
  --texto: #1d2330;
  --texto2: #5b6474;
  --linea: #e1e4ea;
  --acento: #1f6feb;
  --sube: #1a7f37;
  --baja: #cf222e;
  --serie: #2f6fd6;
  --serie2: #e08a1e;
  --serie3: #2a9d8f;
  --serie4: #b0469c;
  --serie5: #6b7a8f;
  --serie6: #c9a227;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1319;
    --fondo2: #181d25;
    --texto: #e6e9ef;
    --texto2: #9aa3b2;
    --linea: #2a313c;
    --acento: #58a6ff;
    --sube: #3fb950;
    --baja: #f85149;
    --serie: #5b9bf0;
    --serie2: #f0a54a;
    --serie3: #4cc1b2;
    --serie4: #d36cc0;
    --serie5: #8d9bb0;
    --serie6: #e2c04f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--acento); }

.barra {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--fondo2);
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.barra .marca { font-weight: 700; color: var(--texto); text-decoration: none; }
.barra nav { display: flex; gap: 14px; flex: 1; }
.barra nav a { text-decoration: none; }
.barra .quien { color: var(--texto2); font-size: 14px; }

.contenido { max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px; }

.tarjeta {
  background: var(--fondo2);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 0;
}
.tarjeta h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.filtros label { display: flex; flex-direction: column; font-size: 13px; color: var(--texto2); gap: 4px; }

input, select, button {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--fondo2);
  color: var(--texto);
}
button { background: var(--acento); border-color: var(--acento); color: #fff; cursor: pointer; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--fondo2);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi span { color: var(--texto2); font-size: 13px; }
.kpi strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--texto2); font-size: 12px; }
.kpi small.sube { color: var(--sube); }
.kpi small.baja { color: var(--baja); }

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}
.rejilla .ancho { grid-column: 1 / -1; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 7px 6px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
th { color: var(--texto2); font-weight: 600; font-size: 12px; }
td small { color: var(--texto2); }
.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.nota { color: var(--texto2); font-size: 13px; margin-top: 16px; }
.error { color: var(--baja); }

.login {
  max-width: 340px;
  margin: 10vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login h1 { margin: 0; font-size: 22px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto2); }

/* Menú: página actual */
.barra nav a.activo { color: var(--texto); font-weight: 600; }

/* Colores de variación en cualquier lugar (tablas, indicadores) */
.sube { color: var(--sube); }
.baja { color: var(--baja); }

/* Atajos de período en los filtros */
.atajos { display: flex; flex-wrap: wrap; gap: 6px; align-self: center; }
.atajos a {
  padding: 5px 10px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  background: var(--fondo2);
}
.atajos a.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Tortas de la pantalla de inicio: altura fija para que no crezcan con el ancho */
.grafico-torta { position: relative; height: 300px; }

/* Tablas anchas: desplazamiento horizontal dentro de la tarjeta en pantallas pequeñas */
.tabla-desplazable { overflow-x: auto; }
tr.total td { font-weight: 600; background: var(--fondo); }
tr.inactivo td { color: var(--texto2); }

/* Formularios del panel */
.tarjeta h1 { margin: 0 0 12px; font-size: 20px; }
.formulario { max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto2); }
.casilla { display: flex; align-items: center; gap: 8px; }
.casilla small { color: var(--texto2); }
fieldset { border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
legend { padding: 0 6px; color: var(--texto2); font-size: 13px; }
.acciones { display: flex; gap: 16px; align-items: center; }
.titulo-con-accion { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-con-accion h1 { margin: 0; }
.boton {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 6px;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
}
.ok { color: var(--sube); }

@media (max-width: 600px) {
  .rejilla { grid-template-columns: 1fr; }
  .kpi strong { font-size: 19px; }
}