:root{
    --maxw: 1120px;         /* ancho máx del formulario */
    --gap: .75rem;          /* separación general */
    --border: #e5e7eb;      /* gris claro para bordes */
    --fg: #111827;          /* texto */
    --accent: #003566;         /* botón */
    --radius: 0;            /* eliminados bordes redondeados */
    --label-size: .9rem;    /* tamaño de etiquetas */
    --input-size: .95rem;   /* tamaño de inputs */
    
    /* Fuentes */
    --tittle-font: 'Oswald', sans-serif;
    --paragraph-font: 'Open Sans', sans-serif;
    --highlight-font: 'Slabo 27px', serif;
  }
  
strong {
    font-family: var(--tittle-font) !important;
}

label {
    font-family: var(--paragraph-font) !important;
}

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: var(--paragraph-font);
    color: var(--fg);
    background: #fff;
  }
  
  /* Contenedor del form */
  body > form{
    width: min(var(--maxw), 100% - 2rem);
    margin: clamp(.5rem, 2vh, 1.25rem) auto;
    color: black;
    padding-top: 14vh;
    background-color: white;
  }
  
  /* Títulos de secciones */
  h1, h2{
    font-family: var(--tittle-font);
    font-weight: 500;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: .4rem 0 .3rem;
    padding-left: 2vh;
  }
  
  /* Fieldsets: 2 columnas internas */
  fieldset{
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .75rem;
    margin: 0 0 .8rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
  
  /* Etiquetas y controles */
  fieldset > label{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: var(--label-size);
    line-height: 1.25;
  }
  
  /* Inputs y selects uniformes */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="file"],
  select,
  textarea{
    width: 100%;
    font: inherit;
    font-size: var(--input-size);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .5rem .65rem;
    min-height: 36px;
    background: #fff;
  }
  
  textarea{
    min-height: 96px;
    resize: vertical;
  }
  
  /* Focus accesible y discreto */
  input:focus,
  select:focus,
  textarea:focus{
    outline: 2px solid #2563eb33;
    border-color: #2563eb;
    outline-offset: 0;
  }
  
  /* Radios */
  .radio-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem .75rem;
    align-items: start;
  }
  .radio-services { grid-template-columns: repeat(3, 1fr); }
  .radio-services > label { grid-column: auto !important; }
  
  .radio-group label{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--label-size);
    line-height: 1.2;
    padding: 1rem .5rem;
    border: 1px solid var(--border);
    border-radius: 0;
  }
  .radio-group input[type="radio"]{ margin: 0; }
  .radio-group label input[type="text"]{
    flex: 1;
    min-width: 0;
    padding: 0.4rem .5rem;
    height: 2.6rem;
    margin-top: -4px;
    margin-bottom: -4px;
  }
  .radio-group label:has(input[type="text"]) {
    padding: 0.5rem;
    align-items: center;
  }
  
  /* Zona comentarios (columna imagen + columna textarea) */
  .comments {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: stretch;
  }
  
  /* Ajustar el fieldset de comentarios para que esté alineado */
  .comments > fieldset {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0; /* Eliminar el padding por defecto */
    border: none; /* Eliminar el borde para que no afecte el espaciado */
  }
  
  /* Asegurar que el label dentro del fieldset no tenga márgenes adicionales */
  .comments > fieldset > label {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  /* Hacer que el textarea ocupe todo el espacio disponible */
  .comments textarea {
    flex: 1;
    min-height: 150px;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* === Subida de archivo e imagen === */
  .file-upload-container{
    width: 100%;
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 0;
    background-color: #f8f9fa;
    box-sizing: border-box;
    overflow: hidden;
  
    display: grid;
    grid-template-rows: auto 1fr; /* etiqueta arriba, preview abajo */
  }
  
  /* Etiqueta (estado sin imagen) */
  .file-upload-label{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    min-height: 160px;  /* altura compacta sin imagen */
  }
  .file-upload-label:hover, .file-upload-label.dragover {
    background-color: #e9ecef;
    border-color: #6c757d;
  }
  .upload-icon { font-size: 3rem; color: #6c757d; }
  .upload-text { text-align: center; color: #6c757d; }
  .file-input { display: none; }
  
  /* Vista previa: OCULTA por defecto */
  .preview-container{
    display: none;     /* <-- clave: no ocupa espacio sin imagen */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
  }
  
  /* Al tener archivos (el JS añade .has-files al label):
     - ocultamos el contenido del label
     - mostramos la preview con tamaño fijo (proporción) */
  .file-upload-label.has-files{
    padding: 0;
    min-height: 0;
  }
  .file-upload-label.has-files .upload-icon,
  .file-upload-label.has-files .upload-text{ display: none; }
  
  /* Mostrar y fijar tamaño de la vista previa SOLO cuando hay imagen */
  .file-upload-label.has-files + .preview-container{
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;  /* ⭐ proporción fija: NO crece en altura */
    /* si prefieres altura fija: usa height: 300px; y quita aspect-ratio */
  }
  
  /* Tarjeta e imagen */
  .preview-item{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .preview-item img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* muestra toda la foto sin recortes */
  }
  
  /* Botón quitar */
  .preview-item .remove-btn{
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    border-radius: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    z-index: 2;
  }
  .preview-item .remove-btn:hover{ background: #dc3545; }
  
  /* Fieldset del textarea */
  .comments fieldset{
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0;
    height: auto;     /* <-- evita estirar la fila */
  }
  
  /* Selects condicionales a ancho completo */
  #residential-services,
  #comercial-services,
  #inspection-services{ grid-column: 1 / -1; }
  #residential-services select,
  #comercial-services select,
  #inspection-services select{ min-height: 36px; }
  
  /* Que el label del textarea ocupe ambas columnas si el navegador soporta :has */
  fieldset label:has(textarea){ grid-column: 1 / -1; }
  
  /* Input de archivos dentro de su label */
  input[type="file"]{ padding: .35rem .5rem; }
  
  /* Botón enviar centrado */
  input[type="submit"]{
    display: block;
    margin: .25rem auto 0;
    border: none;
    background: var(--accent);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
  }
  input[type="submit"]:hover{ background-color: var(--yellow-color);}
  input[type="submit"]:active{ transform: translateY(1px); }
  
  /* ---- Ajustes extra de compacidad para laptops ---- */
  @media (min-width: 1000px) and (max-height: 820px){
    h2{ margin: .25rem 0; }
    fieldset{ padding: .6rem; gap: .6rem; }
    textarea{ min-height: 84px; }
  }
  
  /* ---- Responsivo ---- */
  @media (max-width: 900px){
    fieldset{ grid-template-columns: 1fr; }
    .radio-group{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .comments{ grid-template-columns: 1fr; }
  }
  @media (max-width: 560px){
    .radio-group{ grid-template-columns: 1fr; }
  }