/* ============================================================================= Proyecto : AgendaWebCitas - FrontEnd (Páginas 01–05) Archivo : css/30-global-density.css Estado : v2 (Corrección profunda Página 01 real) Propósito: Aplicar "modo densidad" global (~90% visual) sin: - zoom navegador - zoom CSS - transform: scale() SOLO CSS, reversible, cargado al final del . Diagnóstico clave (P01): La "Página 01" que estás viendo en pantalla NO es .p01-home-*, sino el módulo "ETAPA BÚSQUEDA" (03-components.css): - .busqueda-container - .busqueda-card - .btn-busqueda Por eso no veías cambios “gráficos”: estábamos ajustando otro layout. ============================================================================= */ /* ========================================= 0) Base tipográfica y ritmo ========================================= */ html{ font-size: 93.75%; } /* 16px -> 15px aprox */ body{ line-height: 1.35; } small{ font-size: 0.92em; } /* ========================================= 1) Layout global (app) ========================================= */ .app-content{ /* 02-layout.css: padding: 40px 60px; */ padding: 36px 54px; } /* Header: compactar leve */ .app-header{ height: 76px; padding: 9px 36px; } .logo-container{ gap: 14px; } .logo-container img{ height: 56px; } .header-title h1{ font-size: 24px; } .header-title span{ font-size: 13px; } /* ========================================= 2) Controles globales (base) ========================================= */ input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea{ font-size: 0.98em; line-height: 1.2; } button, input[type="button"], input[type="submit"]{ font-size: 0.98em; } /* ========================================= 3) Modal + botón base ========================================= */ .modal-window{ padding: 24px 24px 18px; border-radius: 13px; } .modal-header{ font-size: 15px; margin-bottom: 12px; } .modal-body{ font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; } #modalOverlay .modal-button{ min-width: 132px; padding: 0 24px; font-size: 14px; letter-spacing: 0.4px; } .btn-primary{ height: 38px; padding: 0 16px; font-size: 14px; } /* ============================================================================= PÁGINA 01 REAL (lo que estás viendo): ETAPA BÚSQUEDA Archivo base: 03-components.css Objetivo: bajar masa visual (card + botones + spacing) ~10–15% ============================================================================= */ /* contenedor centrado: reducir padding y alto percibido */ .busqueda-container{ padding: 16px !important; /* antes 20px */ min-height: calc(100vh - 76px) !important; /* acompaña header más bajo */ } /* card principal */ .busqueda-card{ width: min(520px, 100%) !important; /* antes 560px */ padding: 14px 14px 12px !important; /* antes 18/18/16 */ border-radius: 13px !important; /* antes 14 */ } /* título */ .busqueda-titulo{ font-size: 16px !important; /* antes 18 */ margin-bottom: 12px !important; /* antes 14 */ } /* bloque de botones */ .busqueda-opciones{ gap: 12px !important; /* antes 14 */ } /* botones de búsqueda (los grandes) */ .btn-busqueda{ height: 36px !important; /* antes 40 */ padding: 0 16px !important; /* antes 18 */ border-radius: 11px !important; /* antes 12 */ font-size: 14px !important; letter-spacing: 0.2px !important; } /* mobile: sigue tocable porque el layout pone los botones full width; dejamos altura 44px en teléfonos muy chicos */ @media (max-width: 520px){ .btn-busqueda{ height: 44px !important; } } /* ============================================================================= PÁGINA 01 (Home moderno) — si existe en tu flujo Archivo base: 12-pages-pagina01.css (Esto aplica cuando el markup usa .p01-home-*) ============================================================================= */ .p01-home-shell{ max-width: 1080px !important; padding: 48px 20px 22px !important; } .p01-home-card{ max-width: 860px !important; padding: 26px 28px 22px !important; border-radius: 18px !important; } .p01-home-hero-icon{ width: 74px !important; height: 74px !important; margin: 0 auto 12px !important; } .p01-home-title{ font-size: 29px !important; line-height: 1.14 !important; } .p01-home-title-accent{ width: 96px !important; margin: 10px auto 14px !important; } .p01-home-subtitle{ font-size: 16px !important; line-height: 1.38 !important; } .p01-home-actions{ gap: 14px !important; margin-top: 22px !important; } .p01-home-btn{ max-width: 280px !important; min-height: 64px !important; padding: 12px 18px !important; border-radius: 13px !important; gap: 10px !important; } .p01-home-btn-icon{ width: 22px !important; height: 22px !important; } .p01-home-btn-text{ font-size: 15px !important; font-weight: 600 !important; } .p01-home-note{ margin-top: 18px !important; gap: 8px !important; font-size: 13px !important; } .p01-home-note-icon{ width: 18px !important; height: 18px !important; } @media (max-width: 768px){ .p01-home-shell{ padding: 34px 14px 18px !important; } .p01-home-card{ max-width: 100% !important; padding: 22px 16px 18px !important; } .p01-home-title{ font-size: 25px !important; } .p01-home-subtitle{ font-size: 15px !important; } .p01-home-actions{ gap: 10px !important; margin-top: 18px !important; } .p01-home-btn{ max-width: 100% !important; min-height: 58px !important; padding: 12px 16px !important; } .p01-home-btn-text{ font-size: 14px !important; } } /* ============================================================================= PÁGINA 02 — Selección profesional (13-pages-pagina02.css) ============================================================================= */ .pagina02-container{ padding: 63px 18px 36px; } .pagina02-card{ margin-top: 20px; padding: 23px 23px 20px; border-radius: 15px; } .pagina02-form{ gap: 14px; } .pagina02-autocomplete .autocomplete-input{ height: 43px; padding: 0 40px 0 12px; border-radius: 11px; font-size: 15px; } .pagina02-ico{ width: 32px; height: 32px; border-radius: 9px; font-size: 17px; } .pagina02-ico-clear{ font-size: 20px; } .pagina02-autocomplete .autocomplete-list{ margin-top: 7px; border-radius: 11px; max-height: 240px; } .pagina02-autocomplete .autocomplete-item{ padding: 11px 12px; font-size: 14px; } .pagina02-autocomplete .autocomplete-empty{ padding: 11px 12px; font-size: 13px; } #btnBuscarHora.btn-buscar{ height: 52px; font-size: 16px; width: 320px; border-radius: 13px; } .btn-volver{ font-size: 14px; padding: 7px 9px 7px 0; gap: 9px; } .btn-volver img{ width: 17px; height: 17px; } .p02-status{ padding: 9px 11px; font-size: 12.5px; } /* ============================================================================= PÁGINA 04 — Confirmar Reserva (16-pages-pagina04.css) ============================================================================= */ .pagina04-container{ padding: 63px 18px 36px; } .pagina04-wrapper .pagina04-grid{ gap: 20px; margin-top: 16px; } .pagina04-wrapper .pagina04-card{ padding: 20px; border-radius: 15px; } .pagina04-wrapper .pagina04-resumen{ gap: 12px; } .pagina04-wrapper .pagina04-card-title{ font-size: 15px; margin-bottom: 12px; } .pagina04-wrapper .p04-grid{ gap: 12px 14px !important; } .pagina04-wrapper .p04-label{ font-size: 13px; } .pagina04-wrapper .p04-input, .pagina04-wrapper .p04-select{ height: 40px; padding: 0 11px; font-size: 14px; border-radius: 11px; } .pagina04-wrapper .p4-rut-control{ grid-template-columns: minmax(0, 1fr) 10px 52px !important; } .pagina04-wrapper .p4-rut-sep{ height: 40px; } .pagina04-wrapper .p4-error, .pagina04-wrapper .p4-preview{ font-size: 12.5px; } .pagina04-wrapper .p04-required-note{ font-size: 12.5px; } .pagina04-wrapper .p04-check{ font-size: 13px; padding: 9px 11px; border-radius: 11px; } .pagina04-wrapper .p04-check input{ width: 15px; height: 15px; } .pagina04-wrapper .p4-tipo-reserva{ gap: 12px; } .pagina04-wrapper .p4-pill{ padding: 9px 12px; font-size: 13px; border-radius: 11px; } .pagina04-wrapper .p4-pill input{ width: 13px; height: 13px; } @media (max-width: 520px){ .pagina04-wrapper .p04-input, .pagina04-wrapper .p04-select{ height: 44px; } } /* ============================================================================= PÁGINA 05 — Layout (20-pages-pagina05.css) ============================================================================= */ .pagina05-container{ padding: 23px 16px 44px; } .pagina05-wrapper{ gap: 14px; } .pagina05-card{ padding: 16px; border-radius: 13px; } .p05-placeholder{ font-size: 12.5px; } .p05-error{ padding: 11px; } .p05-error-msg{ font-size: 12.5px; } /* ========================================= Safety global: tocabilidad en móviles ========================================= */ @media (max-width: 480px){ button, input[type="button"], input[type="submit"], #modalOverlay .modal-button, #btnBuscarHora.btn-buscar{ min-height: 44px; } .pagina02-autocomplete .autocomplete-input{ height: 44px; } } /* ============================================================================= PÁGINA 01 — Igualar ancho tarjetas - Beneficios debe medir lo mismo que la tarjeta principal (.p01-home-card) - NO tocar fonts de beneficios (solo contenedor) ============================================================================= */ :root{ /* Fuente de verdad: ancho de la tarjeta principal (ajústalo si cambias .p01-home-card) */ --p01-card-max: 860px; } /* Tarjeta principal */ .p01-home-card{ max-width: var(--p01-card-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Tarjeta de beneficios (contenedor) */ .p01b-benefits, .p01b-benefits-card, .p01b-benefits-wrap, .pagina01-beneficios, .beneficios-card{ max-width: var(--p01-card-max) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Mobile: ambas full width */ @media (max-width: 520px){ .p01-home-card, .p01b-benefits, .p01b-benefits-card, .p01b-benefits-wrap, .pagina01-beneficios, .beneficios-card{ max-width: 100% !important; width: 100% !important; } } /* ============================================================================= PÁGINA 01 — Igualar font de botones principales Objetivo: - "Buscar por especialidad" y "Buscar por profesional" - mismo peso y mismo tamaño visual ============================================================================= */ .p01-home-btn-text{ font-size: 15px !important; font-weight: 600 !important; } .btn-busqueda{ font-size: 15px !important; font-weight: 600 !important; }