:root {
  --azul: #1f6f8b;
  --azul-osc: #16505f;
  --verde: #2a9d8f;
  --gris: #f4f6f8;
  --gris-borde: #dde3e8;
  --texto: #23313a;
  --texto-suave: #5b6b75;
  --peligro: #c0392b;
  --sombra: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--gris);
  line-height: 1.5;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--azul);
  color: #fff;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .marca { font-weight: 600; font-size: 1.05rem; }
.topbar a { color: #fff; }
.topbar .usuario { font-size: .85rem; opacity: .95; }

.contenido { max-width: 980px; margin: 1.75rem auto; padding: 0 1.25rem; }

.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
}

.encabezado-seccion {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.1rem; }

.boton {
  display: inline-block;
  background: var(--verde);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size: .9rem;
  cursor: pointer;
}
.boton:hover { background: #23867a; text-decoration: none; }
.boton.secundario { background: #fff; color: var(--azul); border: 1px solid var(--gris-borde); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--gris-borde); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
tr:hover td { background: #fbfdfe; }

.buscador { width: 100%; max-width: 340px; padding: .55rem .75rem; border: 1px solid var(--gris-borde); border-radius: 8px; font-size: .9rem; }
.campo { width: 100%; padding: .5rem .6rem; border: 1px solid var(--gris-borde); border-radius: 8px; font-size: .9rem; }

.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; }
.grid-form .ancho-total { grid-column: 1 / -1; }
label { display: block; font-size: .82rem; color: var(--texto-suave); margin-bottom: .25rem; }
.campo-bloque { margin-bottom: .3rem; }
.errores { color: var(--peligro); font-size: .8rem; margin-top: .2rem; }

.etiqueta { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; background: var(--gris); color: var(--texto-suave); }
.etiqueta.menor { background: #e6f4f1; color: var(--verde); }

.login-caja { max-width: 360px; margin: 6vh auto; }
.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensajes li { background: #e6f4f1; border: 1px solid #bfe3dc; padding: .6rem .8rem; border-radius: 8px; font-size: .88rem; }
.vacio { color: var(--texto-suave); padding: 1.5rem 0; text-align: center; }