:root {
  color-scheme: light dark;
  --fondo: #f6f3ee;
  --capa: #ffffff;
  --tinta: #1f1b16;
  --suave: #6b6256;
  --linea: #e4ddd2;
  --marca: #7a5a3c;
  --sobre-marca: #ffffff;
  --verde: #17754a;
  --rojo: #c0272d;
  --rojo-fondo: #fdeceb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #15120f;
    --capa: #1f1b17;
    --tinta: #f3eee6;
    --suave: #a79d8f;
    --linea: #352e26;
    --marca: #c9a27c;
    --sobre-marca: #1f1b16;
    --verde: #51c88d;
    --rojo: #ff7c80;
    --rojo-fondo: #35181a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 1040px;
  padding: 32px 16px 48px;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, p { margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { margin-bottom: 12px; color: var(--suave); font-size: .875rem; font-weight: 600; }

.marca { color: var(--marca); font-size: .875rem; font-weight: 600; }

.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

.resumen { margin-bottom: 28px; color: var(--suave); }
.resumen-alerta { padding: 8px 12px; border-radius: 8px; background: var(--rojo-fondo); color: var(--rojo); }

.seccion { margin-bottom: 28px; }

.grilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.herramienta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--capa);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s;
}
.herramienta:hover { border-color: var(--marca); }
.herramienta:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.herramienta-nombre { font-size: 1.0625rem; font-weight: 600; }
.herramienta-descripcion { color: var(--suave); font-size: .9375rem; }

.estado { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: .875rem; font-weight: 500; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-ok { color: var(--verde); }
.estado-caido { color: var(--rojo); }

.pie { color: var(--suave); font-size: .8125rem; }

button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--marca);
  color: var(--sobre-marca);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.boton-secundario { border: 1px solid var(--linea); background: transparent; color: var(--tinta); }

.pantalla-login { display: grid; min-height: 100dvh; padding: 16px; place-items: center; }
.tarjeta-login { width: min(100%, 380px); padding: 28px; border: 1px solid var(--linea); border-radius: 12px; background: var(--capa); }
.tarjeta-login form { display: grid; gap: 8px; margin-top: 20px; }
.tarjeta-login label { font-size: .875rem; font-weight: 600; }
.tarjeta-login input { min-height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo); color: var(--tinta); font: inherit; }
.tarjeta-login button { margin-top: 8px; }
.aviso { margin-top: 16px; padding: 8px 12px; border-radius: 8px; background: var(--rojo-fondo); color: var(--rojo); font-size: .9375rem; }