/* Pantallas de 15.6", 24" y 32": todo proporcionado. Sin zoom exagerado, tarjetas y títulos compactos y contenido que no se estira de borde a borde. Va al final: solo afina lo anterior. */

/* El zoom de monitores grandes agrandaba todo (letras, botones, tarjetas): ahora crece poco y solo en pantallas muy grandes. La altura de la aplicación se mide contra el mismo factor. */
@media (min-width: 1800px) { html { zoom: 1; } }
@media (min-width: 1800px) and (min-height: 600px) { html body #app { height: 100dvh; } }
@media (min-width: 2300px) { html { zoom: 1.1; } }
@media (min-width: 2300px) and (min-height: 600px) { html body #app { height: calc(100dvh / 1.1); } }
@media (min-width: 3000px) { html { zoom: 1.3; } }
@media (min-width: 3000px) and (min-height: 600px) { html body #app { height: calc(100dvh / 1.3); } }

/* Títulos de pantalla: más discretos */
#vista h1 { font-size: clamp(1.4rem, 1.05rem + .6vw, 1.75rem); line-height: 1.2; }

/* Fichas de cifras (Resumen y demás): bajas, con el ícono pequeño */
.kpis { gap: 10px; margin-bottom: 12px; }
.kpi { padding: 10px 14px 10px 62px; min-height: 66px; border-radius: 12px; }
.kpi-ico { left: 12px; width: 38px; height: 38px; border-radius: 11px; }
.kpi-ico svg { width: 20px; height: 20px; }
.kpi strong { font-size: clamp(1.15rem, 11cqw, 1.45rem); }
.kpi > span:first-child { font-size: .78rem; }

/* Que el contenido no se estire en monitores anchos: se centra con un tope de ancho */
@media (min-width: 1500px) {
  #vista > * { width: 100%; max-width: 1560px; margin-inline: auto; box-sizing: border-box; }
}

/* Formularios en pantallas de escritorio: campos más bajos y en columnas de ancho razonable (no dos mitades gigantes), con aire antes del botón de guardar */
@media (min-width: 901px) {
  #vista .rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 18px; align-items: start; }
  #vista .rejilla-2 > .campo { justify-content: flex-start; align-content: start; }
  /* Pantallas que son un formulario: toda la columna (título, texto y tarjeta) se centra con un ancho cómodo de leer, no pegada a la izquierda */
  #vista:has(> * form > .rejilla-2) > * { width: 100%; max-width: 1120px; margin-inline: auto; box-sizing: border-box; padding-inline: 16px; }
  #vista form .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), #vista form .campo select { min-height: 36px; padding-block: 5px; font-size: .94rem; }
  #vista form .campo { gap: 4px; }
  #vista form > .btn.principal[type=submit], #vista form > .acciones > .btn.principal { margin-top: 22px; }
}