:root {
  color-scheme: dark;

  --fondo: #0a0f1c;
  --lateral: #070b15;
  --panel: #111a2e;
  --panel-alto: #17223b;
  --linea: #243252;
  --texto: #e9eef9;
  --texto-suave: #94a3c0;

  --acento: #7c9cff;
  --acento-fuerte: #9bb3ff;
  --ok: #5fd39a;
  --aviso: #f5b35a;
  --peligro: #f27a7a;
  --neutro: #8fa0bd;

  --fuente-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Figtree", "Segoe UI", system-ui, sans-serif;

  --radio: 10px;
  --ancho-lateral: 244px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.5;
  display: grid;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Barra lateral ---------- */

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  background: var(--lateral);
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--acento-fuerte);
}

.marca-icono { width: 34px; height: 34px; flex: none; }

.marca strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.1;
}

.marca span {
  display: block;
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.menu { display: flex; flex-direction: column; gap: 4px; }

.menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--texto-suave);
  text-decoration: none;
  font-weight: 500;
  transition: background-color .15s, color .15s;
}

.menu a:hover { background: var(--panel); color: var(--texto); }

/* ---------- Contenido ---------- */

.contenido {
  width: 100%;
  max-width: 1180px;
  padding: 44px clamp(20px, 4vw, 56px) 80px;
}

h1, h2, h3 { font-family: var(--fuente-titulo); margin: 0; }

h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.encabezado { margin-bottom: 28px; }

/* ---------- Indicadores: una sola franja con divisores ---------- */

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 20px;
}

.tarjeta {
  padding: 22px 24px 24px;
  border-left: 1px solid var(--linea);
}

.tarjeta:first-child { border-left: 0; }

.tarjeta h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-suave);
}

.tarjeta p {
  margin: 14px 0 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.punto-acento { background: var(--acento); }
.punto-ok     { background: var(--ok); }
.punto-aviso  { background: var(--aviso); }
.punto-neutro { background: var(--neutro); }

/* ---------- Gráficos ---------- */

.graficos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  margin-bottom: 64px;
}

.grafico {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 24px 20px;
}

.grafico-ancho { grid-column: 1 / -1; }

.grafico h2 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 16px;
}

.lienzo { position: relative; height: 260px; }
.grafico-ancho .lienzo { height: 240px; }

/* ---------- Secciones ---------- */

.seccion { margin-bottom: 64px; }

.titulo-seccion {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.panel-tabla { padding: 0; overflow: hidden; }

.titulo-form {
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto);
  margin-bottom: 16px;
}

/* ---------- Formularios ---------- */

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
}

input, select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--fondo);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder { color: #5d6c8a; }

input:hover, select:hover { border-color: #34466e; }

input:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(124, 156, 255, .25);
}

/* ---------- Botones ---------- */

button {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

button:focus-visible {
  outline: 2px solid var(--acento-fuerte);
  outline-offset: 2px;
}

.boton-principal {
  height: 42px;
  padding: 0 20px;
  background: var(--acento);
  color: #0a0f1c;
  border: 0;
}

.boton-principal:hover { background: var(--acento-fuerte); }

.boton-modificar,
.boton-eliminar {
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--linea);
}

.boton-modificar { color: var(--acento-fuerte); margin-right: 6px; }
.boton-modificar:hover { background: rgba(124, 156, 255, .12); border-color: var(--acento); }

.boton-eliminar { color: var(--peligro); }
.boton-eliminar:hover { background: rgba(242, 122, 122, .12); border-color: var(--peligro); }

/* ---------- Tablas ---------- */

.tabla-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

th {
  padding: 14px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
  background: var(--panel-alto);
  border-bottom: 1px solid var(--linea);
}

td {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(36, 50, 82, .6);
  font-variant-numeric: tabular-nums;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(124, 156, 255, .06); }

td.vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 32px 20px;
}

/* ---------- Estados ---------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(143, 160, 189, .14);
  color: var(--neutro);
}

.estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.estado-activa    { background: rgba(95, 211, 154, .13);  color: var(--ok); }
.estado-vencida   { background: rgba(245, 179, 90, .13);  color: var(--aviso); }
.estado-cancelada { background: rgba(242, 122, 122, .13); color: var(--peligro); }
.estado-abierto   { background: rgba(245, 179, 90, .13);  color: var(--aviso); }
.estado-cerrado   { background: rgba(143, 160, 189, .14); color: var(--neutro); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  body { display: block; }

  .lateral {
    position: sticky;
    top: 0;
    z-index: 10;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }

  .marca span { display: none; }
  .menu { flex-direction: row; overflow-x: auto; }
  .menu a { padding: 8px 12px; white-space: nowrap; }

  .contenido { padding-top: 28px; }
  html { scroll-padding-top: 76px; }

  .dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjeta:nth-child(3) { border-left: 0; }
  .tarjeta:nth-child(n+3) { border-top: 1px solid var(--linea); }

  .graficos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .marca div { display: none; }
  .panel, .grafico { padding: 18px 16px; }
  .tarjeta { padding: 18px 16px; }
  th, td { padding: 12px 14px; }
}

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