/* Estilos comunes: landing, registro, login y panel */
:root {
  --color: #1f7fd1;
  --color-oscuro: #1663a6;
  --color-suave: #e8f2fc;
  --texto: #1d2433;
  --texto-suave: #5b6475;
  --fondo: #f6f7f9;
  --tarjeta: #ffffff;
  --borde: #d9dee7;
  --ok: #15803d;
  --ok-suave: #e7f6ec;
  --error: #b42318;
  --error-suave: #fdecea;
  --radio: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.5; color: var(--texto); background: var(--fondo);
}
img { max-width: 100%; display: block; }
a { color: var(--color-oscuro); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }

.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Botones: mínimo 44 px de alto */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 24px; border: 0; border-radius: var(--radio);
  background: var(--color); color: #fff; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.boton:hover { background: var(--color-oscuro); }
.boton:disabled { background: #a9b4c4; cursor: not-allowed; }
.boton-grande { font-size: 19px; min-height: 58px; padding: 14px 32px; }
.boton-ancho { width: 100%; }
.boton-secundario {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 16px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--tarjeta); color: var(--texto-suave); font: inherit; cursor: pointer; text-decoration: none;
}
.boton-secundario:hover { color: var(--texto); border-color: #b9c1ce; }
.boton-link {
  background: none; border: 0; padding: 8px 4px; min-height: 44px; font: inherit;
  color: var(--color-oscuro); text-decoration: underline; cursor: pointer;
}

/* Formularios */
.campo { margin-bottom: 22px; }
.campo label, .etiqueta { display: block; font-weight: 700; margin-bottom: 6px; }
.ayuda { color: var(--texto-suave); font-size: 15px; margin: 6px 0 0; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; min-height: 52px; padding: 12px 14px; font: inherit; color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
}
input:focus-visible, .boton:focus-visible, .boton-secundario:focus-visible,
.boton-link:focus-visible, .opcion input:focus-visible + span {
  outline: 3px solid #8cc0ef; outline-offset: 2px;
}

.cabecera { background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.marca { font-weight: 800; font-size: 20px; color: var(--texto); text-decoration: none; }
.marca span { color: var(--color); }