/**
 * Zoho Form Enhancer - CSS Universal
 * Estilos ACCH para formularios Zoho
 * Usa [data-zfe-enhanced] para mayor especificidad y evitar conflictos
 */

/* ===== Variables CSS ===== */
[data-zfe-enhanced],
[data-zfe-enhanced] .crmWebToEntityForm,
[data-zfe-enhanced] .zcwf_lblTopBottom {
  --zfe-text: #313949;
  --zfe-border: #c0c6cc;
  --zfe-primary: #0279FF;
  --zfe-accent: #ffd500;
  --zfe-accent-hover: #e6c000;
  --zfe-radius: 12px;
  --zfe-font: Arial, sans-serif;
}

/* ===== Contenedor base ===== */
[data-zfe-enhanced],
[data-zfe-enhanced] .crmWebToEntityForm,
[data-zfe-enhanced] .zcwf_lblTopBottom {
  font-family: var(--zfe-font) !important;
  color: var(--zfe-text) !important;
}

/* ===== Layout 2 columnas ===== */
[data-zfe-enhanced] form {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 16px !important;
  padding: 0 1%;
}

/* ===== Filas ===== */
[data-zfe-enhanced] .zcwf_row {
  margin-bottom: 0.75rem !important;
}

/* Campos que ocupan 2 columnas (textarea, botones) */
[data-zfe-enhanced] .zcwf_row:has(textarea),
[data-zfe-enhanced] .zcwf_row:last-child {
  grid-column: 1 / -1 !important;
}

/* ===== Ocultar campos hidden ===== */
[data-zfe-enhanced] .wfrm_fld_dpNn {
  display: none !important;
}

/* ===== Labels ===== */
[data-zfe-enhanced] .zcwf_col_lab,
[data-zfe-enhanced] label {
  display: block !important;
  font-size: 14px !important;
  font-family: var(--zfe-font) !important;
  color: var(--zfe-text) !important;
  margin: 0 0 4px 0 !important;
  font-weight: 500 !important;
}

/* ===== Inputs y Selects ===== */
[data-zfe-enhanced] input[type="text"],
[data-zfe-enhanced] input[type="email"],
[data-zfe-enhanced] input[type="tel"],
[data-zfe-enhanced] input[type="number"],
[data-zfe-enhanced] select {
  width: 100% !important;
  height: 48px !important;
  font-size: 15px !important;
  font-family: var(--zfe-font) !important;
  color: var(--zfe-text) !important;
  background: #fff !important;
  border: 1px solid var(--zfe-border) !important;
  border-radius: var(--zfe-radius) !important;
  padding: 0 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

/* ===== Textarea ===== */
[data-zfe-enhanced] textarea {
  width: 100% !important;
  min-height: 120px !important;
  padding: 12px !important;
  font-size: 15px !important;
  font-family: var(--zfe-font) !important;
  color: var(--zfe-text) !important;
  background: #fff !important;
  border: 1px solid var(--zfe-border) !important;
  border-radius: var(--zfe-radius) !important;
  outline: none !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

/* ===== Select flecha ===== */
[data-zfe-enhanced] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23313949' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-position: calc(100% - 12px) center !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
  padding-right: 36px !important;
}

/* ===== Focus ===== */
[data-zfe-enhanced] input:focus,
[data-zfe-enhanced] textarea:focus,
[data-zfe-enhanced] select:focus {
  border-color: var(--zfe-primary) !important;
  box-shadow: 0 0 0 3px rgba(2, 121, 255, 0.15) !important;
}

/* ===== Placeholder ===== */
[data-zfe-enhanced] ::placeholder {
  color: #999 !important;
  opacity: 0.7 !important;
}

/* ===== Botón Submit - AMARILLO ACCH ===== */
[data-zfe-enhanced] input[type="submit"],
[data-zfe-enhanced] .formsubmit,
[data-zfe-enhanced] .zcwf_button[type="submit"] {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 24px !important;
  background: var(--zfe-accent) !important;
  color: #000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color .15s ease !important;
  box-shadow: none !important;
}

[data-zfe-enhanced] input[type="submit"]:hover,
[data-zfe-enhanced] .formsubmit:hover {
  background: var(--zfe-accent-hover) !important;
}

/* ===== Botón Reset - Ocultar ===== */
[data-zfe-enhanced] input[type="reset"] {
  display: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  [data-zfe-enhanced] {
    padding: 16px !important;
  }
  [data-zfe-enhanced] form {
    grid-template-columns: 1fr !important;
  }
}