:root {
  --fondo: #f4f5f7;
  --tarjeta: #ffffff;
  --texto: #1a1d21;
  --apagado: #6b7280;
  --borde: #e2e5ea;
  --primario: #2563eb;
  --primario-texto: #ffffff;
  --ok: #157347;
  --ok-fondo: #e6f4ec;
  --error: #b02a37;
  --error-fondo: #fbe9eb;
  --radio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #15171c;
    --tarjeta: #1e2128;
    --texto: #e8eaed;
    --apagado: #9aa0aa;
    --borde: #2e323b;
    --primario: #3b82f6;
    --ok: #4ade80;
    --ok-fondo: #17301f;
    --error: #f87171;
    --error-fondo: #331a1c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca { font-weight: 700; display: flex; align-items: center; }
/* Alto fijo y ancho automatico: el logo no se deforma aunque cambie el archivo.
   display:block saca el hueco que el navegador deja debajo de una img inline. */
.marca img { height: 30px; width: auto; display: block; }

.marca-login { text-align: center; margin: 0 0 0.5rem; }
.marca-login img { height: 104px; width: auto; display: inline-block; }

/* Calendario */
.semana-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dia--hoy { border-left: 3px solid var(--primario); }
.lista-guardias .vigente { font-weight: 600; }
.chip--feriado { background: var(--ok-fondo); }
.chip--ok { color: var(--ok); }
.chip--falla { color: var(--apagado); }
.chico { font-size: 0.85rem; }
select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 1rem;
}
.barra nav { display: flex; align-items: center; gap: 1rem; }
.barra a { color: var(--texto); text-decoration: none; font-size: 0.95rem; }
.barra a:hover { color: var(--primario); }

.contenido {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1 { font-size: 1.5rem; margin: 1rem 0 0.5rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin: 1rem 0;
}
.tarjeta--angosta { max-width: 380px; margin: 3rem auto; }
.destacada { text-align: center; padding: 2rem 1.25rem; }

.apagado { color: var(--apagado); }
.chico { font-size: 0.85rem; }
.grande { font-size: 1.6rem; font-weight: 700; margin: 0.25rem 0; }

form.apilada { display: flex; flex-direction: column; gap: 0.85rem; }
label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--apagado); }
input {
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  color: var(--texto);
  width: 100%;
}
input:focus { outline: 2px solid var(--primario); border-color: var(--primario); }

button {
  font-size: 1rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.primario { background: var(--primario); color: var(--primario-texto); }
.secundario { background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); }
.enlace { background: none; color: var(--apagado); padding: 0; font-weight: 400; }
.enlace:hover { color: var(--primario); }
.en-linea { display: inline; margin: 0; }

.aviso {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }
.aviso--error { background: var(--error-fondo); color: var(--error); }

.lista-guardias { list-style: none; padding: 0; margin: 0; }
.lista-guardias li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde);
}
.lista-guardias li:last-child { border-bottom: none; }
.fecha { flex: 1; }

.tramo {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  text-transform: capitalize;
}
.chip {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--primario);
  color: var(--primario-texto);
}