From e8f3c2b6d4faa669924c7fa4bc3bbb31c1c3c769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gestor=C3=ADa=20LP?= <contacto@gestorialp.com>
Date: Mon, 2 Mar 2026 06:04:59 +0000
Subject: [PATCH] fix: layout 2 columnas para formulario de visa expandido
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cuando el formulario tiene más de 10 campos, cambia a layout
full-width con campos en grid de 2 columnas para reducir el
espacio vertical. Textareas y headings usan ancho completo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/style.css | 40 ++++++++++++++++++++++++++++++++++++++++
 servicio.php         |  2 +-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 60c9380..06cc673 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1361,6 +1361,42 @@ select.form-control {
     margin-bottom: var(--space-xs);
 }
 
+/* -- Expanded layout: full-width form with 2-column fields -- */
+.service-detail--expanded {
+    grid-template-columns: 1fr;
+}
+
+.service-detail--expanded .service-detail__info {
+    padding-right: 0;
+}
+
+.service-detail--expanded .service-detail__form {
+    position: static;
+}
+
+.service-detail--expanded .service-detail__form form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0 var(--space-xl);
+}
+
+.service-detail--expanded .form-heading,
+.service-detail--expanded .service-detail__form form > button {
+    grid-column: 1 / -1;
+}
+
+.service-detail--expanded .form-group:has(textarea) {
+    grid-column: 1 / -1;
+}
+
+.service-detail--expanded .form-group {
+    margin-bottom: var(--space-sm);
+}
+
+.service-detail--expanded .form-heading {
+    margin-top: var(--space-md);
+}
+
 /* ============================================================
    Confirmation Page
    ============================================================ */
@@ -1620,6 +1656,10 @@ select.form-control {
         position: static;
     }
 
+    .service-detail--expanded .service-detail__form form {
+        grid-template-columns: 1fr;
+    }
+
     /* Footer */
     .footer__grid {
         grid-template-columns: 1fr;
diff --git a/servicio.php b/servicio.php
index df28c41..31d3276 100644
--- a/servicio.php
+++ b/servicio.php
@@ -38,7 +38,7 @@ require_once __DIR__ . '/includes/header.php';
 <!-- Service Detail -->
 <section class="section">
     <div class="container">
-        <div class="service-detail">
+        <div class="service-detail<?= count($servicio['campos_formulario']) > 10 ? ' service-detail--expanded' : '' ?>"><?php // 2-col form layout when many fields ?>
             <div class="service-detail__info">
                 <p class="service-detail__desc"><?= htmlspecialchars($servicio['descripcion']) ?></p>