/* =====================================================================
   07 · FORMULARIOS
   Todo control con el MISMO lenguaje visual. Nunca radios nativos al lado
   de chips diseñados. Patrón: input oculto + :checked + span, y
   :focus-visible + span para el foco por teclado.
   Etiquetas en lenguaje natural. Decir qué pasa al enviar.
   ===================================================================== */

.form{ display:grid; gap:28px; max-width:720px; }
.form--centro{ margin-inline:auto; }
.campo{ display:grid; gap:10px; }
.campo > label, .campo > .etiqueta, .form legend{ font-size:.95rem; font-weight:600; color:inherit; padding:0; }
.form fieldset{ border:0; margin:0; padding:0; display:grid; gap:12px; min-width:0; }
.campo-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:600px){ .campo-2{ grid-template-columns:1fr; } }

/* ---- Texto ---- */
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"], .form select, .form textarea{
  width:100%; min-height:52px; padding:14px 18px;
  background:transparent; color:inherit; font:inherit;
  border:1px solid var(--c-linea); border-radius:var(--radio);
  transition:border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.bg-oscuro .form input, .bg-oscuro .form select, .bg-oscuro .form textarea{ border-color:var(--c-linea-oscuro); }
.form textarea{ min-height:120px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-color:var(--c-acento); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-acento) 25%, transparent); }
.form ::placeholder{ color:currentColor; opacity:.45; }

/* ---- Chips (radio y checkbox con el MISMO aspecto) ---- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.chip span{
  display:inline-flex; align-items:center; gap:.5em; min-height:44px; padding:.65em 1.2em;
  border:1px solid var(--c-linea); border-radius:var(--radio-pill); cursor:pointer; user-select:none;
  font-size:.92rem; transition:all var(--t-rapida) var(--ease);
}
.bg-oscuro .chip span{ border-color:var(--c-linea-oscuro); }
.chip span:hover{ border-color:var(--c-acento); }
.chip input:checked + span{ background:var(--c-acento); border-color:var(--c-acento); color:var(--c-sobre-acento); }
.chip input:focus-visible + span{ outline:2px solid var(--c-acento); outline-offset:3px; }
/* Checkbox: marca visible dentro del chip */
.chip input[type="checkbox"] + span::before{
  content:""; width:14px; height:14px; border:1px solid currentColor; border-radius:3px; opacity:.6;
  background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-size:0;
}
.chip input[type="checkbox"]:checked + span::before{ opacity:1; background-size:10px; border-color:currentColor; }

/* ---- Opciones grandes (tarjeta seleccionable) ---- */
.opciones{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.opcion{ position:relative; }
.opcion input{ position:absolute; opacity:0; width:1px; height:1px; }
.opcion span{ display:grid; gap:4px; height:100%; padding:18px 20px; border:1px solid var(--c-linea); border-radius:var(--radio); cursor:pointer; transition:all var(--t-rapida) var(--ease); }
.opcion span b{ font-family:var(--f-display); font-size:1.2rem; font-weight:500; }
.opcion span small{ font-size:.82rem; opacity:.7; }
.bg-oscuro .opcion span{ border-color:var(--c-linea-oscuro); }
.opcion input:checked + span{ border-color:var(--c-acento); box-shadow:inset 0 0 0 1px var(--c-acento); }
.opcion input:focus-visible + span{ outline:2px solid var(--c-acento); outline-offset:3px; }

/* ---- Aceptación legal (mismo lenguaje, no el checkbox nativo) ---- */
.acepto{ display:flex; gap:12px; align-items:flex-start; font-size:.85rem; cursor:pointer; }
.acepto input{ position:absolute; opacity:0; width:1px; height:1px; }
.acepto i{ flex-shrink:0; width:20px; height:20px; margin-top:1px; border:1px solid currentColor; border-radius:4px; opacity:.6; display:grid; place-items:center; }
.acepto input:checked + i{ opacity:1; background:var(--c-acento); border-color:var(--c-acento); }
.acepto input:checked + i::after{ content:""; width:10px; height:6px; border-left:2px solid var(--c-sobre-acento); border-bottom:2px solid var(--c-sobre-acento); transform:rotate(-45deg) translate(1px,-1px); }
.acepto input:focus-visible + i{ outline:2px solid var(--c-acento); outline-offset:3px; }

/* ---- Qué pasa al enviar ---- */
.form-nota{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; opacity:.8; margin:0; }
.form-nota svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--c-whatsapp); }
.form-error{ color:var(--c-falta); font-size:.85rem; min-height:1.2em; }