/* =====================================================================
   Base, controles y utilidades.

   NO hay un solo color escrito aquí. Todos salen de las variables que
   Tema::estilos() inyecta en :root desde sys_tema y sys_config.
   Lo mismo con el redondeo, la densidad y la tipografía: cambiarlos en
   Sistema → Configuración repinta el sistema entero.
   ===================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-sans);
  font-size: var(--fuente-base);
  line-height: 1.6;
  color: var(--texto-1);
  background: var(--superficie-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texto-1);
}

h1 { font-size: calc(var(--fuente-base) * 1.6); }
h2 { font-size: calc(var(--fuente-base) * 1.35); }
h3 { font-size: calc(var(--fuente-base) * 1.1); }

p { margin: 0 0 1rem; }

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, .mono { font-family: var(--fuente-mono); font-size: .875em; }

img { max-width: 100%; height: auto; }

.tarjeta {
  background: var(--superficie-1);
  border: var(--borde) solid var(--borde-color);
  border-radius: var(--radius);
  padding: var(--pad);
}

/* ---- controles ---- */

.campo,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
select,
textarea {
  width: 100%;
  min-height: var(--alto-ctrl);
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fuente-sm);
  color: var(--texto-1);
  background: var(--superficie-1);
  border: var(--borde) solid var(--borde-color);
  border-radius: var(--radius-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

textarea { min-height: calc(var(--alto-ctrl) * 2); }

.campo:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}

.campo:disabled,
input:disabled,
select:disabled,
textarea:disabled { opacity: .6; cursor: not-allowed; }

label { display: block; margin-bottom: 4px; font-size: var(--fuente-xs); color: var(--texto-2); }

/* ---- botones ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--alto-ctrl);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fuente-sm);
  font-weight: 500;
  color: var(--texto-1);
  background: var(--superficie-1);
  border: var(--borde) solid var(--borde-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}

.btn:hover  { border-color: var(--texto-3); text-decoration: none; }
.btn:active { transform: scale(.98); }

.btn-primario {
  color: var(--primario-txt);
  background: var(--primario);
  border-color: var(--primario);
}
.btn-primario:hover { filter: brightness(1.08); }

.btn-peligro {
  color: #fff;
  background: var(--peligro);
  border-color: var(--peligro);
}

/* ---- estado ---- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fuente-xs);
  font-weight: 500;
  border-radius: 999px;
}

.pill-exito   { color: var(--exito);   background: color-mix(in srgb, var(--exito)   14%, transparent); }
.pill-alerta  { color: var(--alerta);  background: color-mix(in srgb, var(--alerta)  14%, transparent); }
.pill-peligro { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 14%, transparent); }
.pill-neutro  { color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 12%, transparent); }

/* ---- utilidades ---- */

.flex   { display: flex; }
.grid   { display: grid; gap: var(--gap); }
.entre  { justify-content: space-between; }
.centro { align-items: center; }
.txt-2  { color: var(--texto-2); }
.txt-3  { color: var(--texto-3); }
.sm     { font-size: var(--fuente-sm); }