/* Tema compartido para formularios de cotización
   Homologa home.php + hogar-comprensivo/autos/riesgos-trabajo/incendio-comercial */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600&display=swap');

:root{
  --navy-900:#0b1f3a;
  --navy-800:#0f2847;
  --navy-700:#1e3a5f;
  --navy-600:#2c4a6b;
  --gold:#b08d57;
  --gold-soft:#c9a876;
  --stone-50:#fafaf9;
  --stone-100:#f5f4f2;
  --stone-200:#e7e5e4;
  --stone-300:#d6d3d1;
  --stone-600:#57534e;
  --stone-800:#292524;
}

/* Base */
body.form-page{font-family:Inter,system-ui,Arial,sans-serif;background:var(--stone-50);color:var(--stone-800)}
body.form-page .font-serif,body.form-page h1{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em}

/* Header del form: banda navy con imagen de fondo sutil */
body.form-page header.form-header{position:relative;background:var(--navy-800);overflow:hidden;box-shadow:0 6px 20px -10px rgba(15,40,71,.35);padding:0;margin:0;border:0}
body.form-page header.form-header{min-height:110px}
body.form-page header.form-header .fh-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
body.form-page header.form-header .fh-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,31,58,.8) 0%,rgba(15,40,71,.45) 55%,rgba(15,40,71,.2) 100%)}
body.form-page header.form-header .fh-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
body.form-page header.form-header .fh-left{display:flex;align-items:center;gap:.9rem;min-width:0;color:inherit;text-decoration:none;cursor:pointer;transition:opacity .15s ease}
body.form-page header.form-header a.fh-left:hover{opacity:.85;text-decoration:none}
body.form-page header.form-header a.fh-left:hover .fh-icon{transform:scale(1.05);transition:transform .2s ease}
body.form-page header.form-header .fh-icon{width:44px;height:44px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--navy-800);flex-shrink:0}
body.form-page header.form-header .fh-icon i{font-size:1.125rem}
body.form-page header.form-header .fh-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:600;color:#fff;line-height:1.1;margin:0;letter-spacing:-.01em}
body.form-page header.form-header .fh-sub{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.7);margin-top:.15rem;font-weight:500}
body.form-page header.form-header .fh-back{color:rgba(255,255,255,.85)!important;font-size:.875rem;font-weight:500;transition:color .15s;white-space:nowrap}
body.form-page header.form-header .fh-back:hover{color:#fff!important}
@media (max-width:640px){
  body.form-page header.form-header .fh-title{font-size:1.15rem}
  body.form-page header.form-header .fh-sub{letter-spacing:.15em;font-size:.65rem}
  body.form-page header.form-header .fh-back span{display:none}
}

/* Fallback para header viejo sin clase form-header (por compatibilidad) */
body.form-page header:not(.form-header){background:var(--navy-800)!important;box-shadow:0 1px 0 rgba(255,255,255,.05),0 6px 20px -10px rgba(15,40,71,.35)!important}
body.form-page header:not(.form-header) a{color:#fff!important}
body.form-page header:not(.form-header) a:hover{color:var(--gold-soft)!important}

/* Título principal del form */
body.form-page main h1{color:var(--navy-800)!important;font-weight:500;font-size:2.5rem;margin-bottom:.5rem}
body.form-page main>p:first-of-type,body.form-page main>.container>p:first-of-type{color:var(--stone-600)}

/* Step indicator */
body.form-page .step-indicator{transition:all .25s ease;border:1px solid transparent}
body.form-page .step-indicator.active{background:var(--navy-800)!important;color:#fff!important;background-image:none!important;transform:none!important}
body.form-page .step-indicator.completed{background:var(--gold)!important;color:#fff!important}
body.form-page .step-indicator.bg-gray-300{background:var(--stone-200)!important;color:var(--stone-600)!important}

/* Paso del form */
body.form-page .form-step{display:none}
body.form-page .form-step.active{display:block}

/* Títulos de paso (h2 con text-*-700) */
body.form-page .form-step h2{color:var(--navy-800)!important;font-weight:600}

/* Form contenedor */
body.form-page form.bg-white,body.form-page form{background:#fff;border:1px solid var(--stone-200);box-shadow:0 1px 3px rgba(15,40,71,.04)}

/* Section cards (tarjetas internas) */
body.form-page .section-card{background:var(--stone-50)!important;border:1px solid var(--stone-200)!important;border-radius:.5rem;padding:1rem;margin-bottom:1rem}
body.form-page .section-title{color:var(--navy-800)!important;font-weight:600;margin-bottom:.75rem;font-size:1rem;border-bottom:2px solid var(--gold)!important;padding-bottom:.5rem}
body.form-page .subsection-title{color:var(--stone-600)!important;font-weight:500;margin:.75rem 0 .5rem;font-size:.9rem}

/* Inputs uniformes */
body.form-page input[type="text"],
body.form-page input[type="email"],
body.form-page input[type="tel"],
body.form-page input[type="number"],
body.form-page input[type="date"],
body.form-page select,
body.form-page textarea{width:100%;padding:.5rem .75rem;border:1px solid var(--stone-300)!important;border-radius:.375rem;font-size:.875rem;background:#fff;color:var(--stone-800);transition:border-color .15s,box-shadow .15s}
body.form-page input:focus,
body.form-page select:focus,
body.form-page textarea:focus{outline:none!important;border-color:var(--navy-700)!important;box-shadow:0 0 0 3px rgba(15,40,71,.12)!important}

/* Labels */
body.form-page label{color:var(--stone-800)}

/* ===== Sobrescritura de utilidades Tailwind de color ===== */
/* Backgrounds primarios: rojo, azul, morado → navy */
body.form-page .bg-red-500,body.form-page .bg-red-600,body.form-page .bg-red-700,
body.form-page .bg-blue-500,body.form-page .bg-blue-600,body.form-page .bg-blue-700,
body.form-page .bg-purple-500,body.form-page .bg-purple-600,body.form-page .bg-purple-700,
body.form-page .bg-indigo-600,body.form-page .bg-indigo-700{background-color:var(--navy-800)!important}

body.form-page .hover\:bg-red-700:hover,
body.form-page .hover\:bg-blue-700:hover,
body.form-page .hover\:bg-purple-700:hover,
body.form-page .hover\:bg-indigo-700:hover{background-color:var(--navy-700)!important}

/* Backgrounds suaves (contenedores) */
body.form-page .bg-red-50,body.form-page .bg-red-100,
body.form-page .bg-blue-50,body.form-page .bg-blue-100,
body.form-page .bg-purple-50,body.form-page .bg-purple-100,
body.form-page .bg-indigo-50,body.form-page .bg-indigo-100{background-color:var(--stone-100)!important}

/* Texto primario */
body.form-page .text-red-500,body.form-page .text-red-600,body.form-page .text-red-700,body.form-page .text-red-800,body.form-page .text-red-900,
body.form-page .text-blue-500,body.form-page .text-blue-600,body.form-page .text-blue-700,body.form-page .text-blue-800,body.form-page .text-blue-900,
body.form-page .text-purple-500,body.form-page .text-purple-600,body.form-page .text-purple-700,body.form-page .text-purple-800,body.form-page .text-purple-900,
body.form-page .text-indigo-600,body.form-page .text-indigo-700,body.form-page .text-indigo-800{color:var(--navy-800)!important}

body.form-page .hover\:text-red-200:hover,
body.form-page .hover\:text-blue-200:hover,
body.form-page .hover\:text-purple-200:hover{color:var(--gold-soft)!important}

/* Borders */
body.form-page .border-red-200,body.form-page .border-red-300,
body.form-page .border-blue-200,body.form-page .border-blue-300,
body.form-page .border-purple-200,body.form-page .border-purple-300{border-color:var(--stone-200)!important}

/* Gradientes → navy sólido */
body.form-page .gradient-bg,
body.form-page [class*="from-purple"],
body.form-page [class*="to-indigo"],
body.form-page [class*="from-blue"]{background:var(--navy-800)!important;background-image:none!important}

/* Botón siguiente/anterior (btn-next, btn-prev) */
body.form-page .btn-next,body.form-page .btn-prev,
body.form-page button[type="submit"]{background-color:var(--navy-800)!important;color:#fff!important;background-image:none!important;border-radius:.5rem;font-weight:500;transition:background-color .2s ease}
body.form-page .btn-next:hover,body.form-page .btn-prev:hover,
body.form-page button[type="submit"]:hover{background-color:var(--navy-700)!important}

/* Botón anterior cuando está deshabilitado */
body.form-page button[disabled]{background-color:var(--stone-200)!important;color:var(--stone-600)!important;cursor:not-allowed}

/* Focus ring en botones */
body.form-page button:focus{outline:2px solid var(--gold-soft);outline-offset:2px}

/* Grid helpers (mantener layout) */
body.form-page .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
body.form-page .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
body.form-page .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
body.form-page .field-group{margin-bottom:1rem}
@media (max-width:768px){body.form-page .grid-2,body.form-page .grid-3,body.form-page .grid-4{grid-template-columns:1fr}}

/* Checkbox/radio groups */
body.form-page .checkbox-group label{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.25rem 0}
body.form-page .checkbox-group input[type="checkbox"],
body.form-page .checkbox-group input[type="radio"]{width:1rem;height:1rem;accent-color:var(--navy-800)}

/* Badges/pills de estado */
body.form-page .bg-yellow-100{background-color:rgba(176,141,87,.14)!important}
body.form-page .text-yellow-800{color:var(--gold)!important}
body.form-page .border-yellow-300{border-color:var(--gold-soft)!important}