/* riohs.inppamet.cl — una sola columna para el celular de planta. Tipografía del sistema: carga rápido con datos malos. */
:root {
  --azul: #30318c;
  --azul-oscuro: #23246b;
  --celeste: #2ea3f2;
  --celeste-suave: #e8f4fd;
  --texto: #1d1d2b;
  --texto-suave: #5b5b6e;
  --borde: #c9c9d6;
  --fondo: #f4f5fa;
  --blanco: #ffffff;
  --rojo: #b3261e;
  --verde: #1d6b3a;
  --radio: 10px;
}

* { 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: 1.0625rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

.cabecera { background: var(--azul); color: var(--blanco); }
.marca { background: var(--blanco); padding: 14px 16px; border-bottom: 4px solid var(--celeste); }
.marca img { display: block; width: 150px; height: auto; }
.franja { max-width: 36rem; margin: 0 auto; padding: 22px 16px 26px; }
.kicker { margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--celeste); letter-spacing: .02em; }
h1 { margin: 0; font-size: 1.65rem; line-height: 1.15; }

.contenido { max-width: 36rem; margin: 0 auto; padding: 20px 16px 32px; }
.documento {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 28px;
}
.meta { margin: 0 0 14px; color: var(--texto-suave); font-size: .95rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; }

h2 { margin: 0 0 2px; font-size: 1.35rem; color: var(--azul); }
.nota { margin: 0 0 16px; color: var(--texto-suave); }

.boton {
  display: inline-block;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--radio);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.primario { background: var(--azul); color: var(--blanco); }
.primario:hover, .primario:focus-visible { background: var(--azul-oscuro); }
.secundario { background: var(--celeste-suave); color: var(--azul); border-color: #b9dcf6; }
.boton:disabled { opacity: .6; cursor: wait; }

.campo { margin-bottom: 14px; }
.campo label { display: block; margin-bottom: 4px; font-weight: 600; font-size: .95rem; }
.campo input, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--celeste); outline-offset: 1px; border-color: var(--azul); }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { min-height: 1.5em; margin: 12px 0 0; font-weight: 600; }
.form-msg.ok { color: var(--verde); }
.form-msg.err { color: var(--rojo); }

.pie { padding: 18px 16px 28px; text-align: center; font-size: .85rem; color: var(--texto-suave); }
.pie p { margin: 0; }

@media (max-width: 560px) {
  .acciones .boton, #form-sugerencia .boton { display: block; width: 100%; }
}
@media (min-width: 900px) {
  .marca { padding-inline: calc((100% - 36rem) / 2 + 16px); }
}