/* Estilo responsive del sitio público y del panel. */
:root {
  --azul: #1f3a5f;
  --azul-claro: #2c6fb3;
  --gris: #f4f6f8;
  --texto: #24303a;
  --borde: #dbe2e8;
  --alerta: #b25a00;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto); line-height: 1.6; background: #fff;
}
.contenedor { width: min(960px, 92%); margin: 0 auto; }
.cabecera { background: var(--azul); color: #fff; padding: .8rem 0; }
.cabecera .contenedor { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.marca { color: #fff; font-weight: 700; text-decoration: none; }
.nav a { color: #dce7f2; text-decoration: none; margin-left: 1rem; font-size: .92rem; }
.nav a:hover { color: #fff; text-decoration: underline; }
.contenido { padding: 2rem 0 3rem; }
h1 { color: var(--azul); }
h2 { color: var(--azul-claro); margin-top: 1.6rem; }
a { color: var(--azul-claro); }
.hero .lead { font-size: 1.2rem; color: var(--azul-claro); font-weight: 600; }
.aviso-ia {
  background: #fff6e9; border: 1px solid #f0c98a; border-left: 5px solid var(--alerta);
  padding: 1rem; border-radius: 8px; margin: 1.2rem 0;
}
.boton {
  display: inline-block; background: var(--azul-claro); color: #fff; padding: .7rem 1.3rem;
  border-radius: 8px; text-decoration: none; font-weight: 600; margin-top: 1rem;
}
.boton:hover { background: var(--azul); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.tarjeta { background: var(--gris); border: 1px solid var(--borde); border-radius: 10px; padding: 1.2rem; }
.tarjeta h3 { margin-top: 0; color: var(--azul); }
.destacado { font-size: 1.15rem; font-weight: 600; }
.pie { background: var(--gris); border-top: 1px solid var(--borde); padding: 1.5rem 0; font-size: .9rem; color: #556; }
.pie .aviso, .aviso { color: var(--alerta); }
/* Panel */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { border: 1px solid var(--borde); padding: .5rem .7rem; text-align: left; font-size: .92rem; }
th { background: var(--gris); }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.metrica { background: var(--gris); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem; }
.metrica .num { font-size: 1.8rem; font-weight: 700; color: var(--azul); }
.login { max-width: 360px; margin: 3rem auto; }
.login input { width: 100%; padding: .6rem; margin: .4rem 0 1rem; border: 1px solid var(--borde); border-radius: 6px; }
.barra { background: #e6edf3; border-radius: 6px; overflow: hidden; height: 12px; }
.barra > span { display: block; height: 100%; background: var(--azul-claro); }