/* ========================================
   COMPONENTES DE FORMULARIOS
   Inputs, Selects, Textareas, Forms, Validation
   ======================================== */

/* ========== FORM CONTAINERS ========== */
form{display:flex;flex-direction:column;gap:16px}

.form-group{display:flex;flex-direction:column;gap:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.form-label{display:block;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--text);margin-bottom:6px}
.form-label.required::after{content:' *';color:#dc2626}

.form-hint{font-size:var(--font-size-base);color:var(--muted);margin-top:4px;line-height:var(--line-height-relaxed)}

/* ========== INPUT FIELDS ========== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea{
  width:100%;
  padding:12px 16px;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--bg);
  font-size:var(--font-size-md);
  font-weight:var(--font-weight-normal);
  color:var(--text);
  line-height:var(--line-height-normal);
  transition:all var(--duration-normal) var(--ease-out);
  font-family:var(--font-family);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover{
  border-color:var(--color-educativos);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--color-educativos);
  box-shadow:0 0 0 3px rgba(0,135,220,0.1);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="date"]:disabled,
select:disabled,
textarea:disabled{
  background:var(--bg-alt);
  color:var(--muted);
  cursor:not-allowed;
  opacity:0.6;
}

input::placeholder,
textarea::placeholder{
  color:var(--muted);
  opacity:0.6;
}

/* ========== TEXTAREA ========== */
textarea{
  min-height:120px;
  resize:vertical;
  font-family:var(--font-family);
}

/* ========== SELECT ========== */
select{
  appearance:none;
  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='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
  cursor:pointer;
}

select::-ms-expand{
  display:none;
}

/* ========== CHECKBOX & RADIO ========== */
input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
  appearance:none;
  background:var(--bg);
  position:relative;
}

input[type="radio"]{
  border-radius:50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover{
  border-color:var(--color-educativos);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked{
  background:var(--azul-global);
  border-color:var(--azul-global);
}

input[type="checkbox"]:checked::after{
  content:'✓';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:12px;
  font-weight:var(--font-weight-bold);
}

input[type="radio"]:checked::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,135,220,0.2);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Checkbox/Radio with label */
.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.form-check input{
  margin:0;
}

.form-check label{
  margin:0;
  cursor:pointer;
  font-size:var(--font-size-md);
  color:var(--text);
  line-height:var(--line-height-normal);
}

/* ========== VALIDATION STATES ========== */
.form-group.error input,
.form-group.error select,
.form-group.error textarea{
  border-color:#dc2626;
}

.form-group.error input:focus,
.form-group.error select:focus,
.form-group.error textarea:focus{
  box-shadow:0 0 0 3px rgba(220,38,38,0.1);
}

.form-group.success input,
.form-group.success select,
.form-group.success textarea{
  border-color:#16a34a;
}

.form-group.success input:focus,
.form-group.success select:focus,
.form-group.success textarea:focus{
  box-shadow:0 0 0 3px rgba(22,163,74,0.1);
}

.form-error{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--font-size-base);
  color:#dc2626;
  margin-top:4px;
}

.form-error .ms{
  font-size:var(--font-size-xl);
}

.form-success{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--font-size-base);
  color:#16a34a;
  margin-top:4px;
}

.form-success .ms{
  font-size:var(--font-size-xl);
}

/* ========== INPUT GROUPS ========== */
.input-group{
  display:flex;
  align-items:stretch;
}

.input-group input{
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  border-right:0;
}

.input-group-append{
  display:flex;
  align-items:center;
  padding:0 16px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  font-size:var(--font-size-md);
  color:var(--muted);
}

.input-group-prepend{
  display:flex;
  align-items:center;
  padding:0 16px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-right:0;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  font-size:var(--font-size-md);
  color:var(--muted);
}

.input-group-prepend + input{
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  border-left:0;
}

/* ========== SEARCH INPUT ========== */
.search-input{
  position:relative;
}

.search-input input{
  padding-left:44px;
}

.search-input .ms{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:var(--font-size-3xl);
  color:var(--muted);
  pointer-events:none;
}

/* ========== FILE INPUT ========== */
input[type="file"]{
  padding:10px 12px;
  font-size:var(--font-size-md);
  cursor:pointer;
}

input[type="file"]::file-selector-button{
  padding:8px 16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  margin-right:12px;
  transition:all var(--duration-normal) var(--ease-out);
}

input[type="file"]::file-selector-button:hover{
  background:var(--bg-alt);
  border-color:var(--color-educativos);
}

/* ========== FORM ACTIONS ========== */
.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:8px;
  padding-top:16px;
  border-top:1px solid var(--border-subtle);
}

.form-actions.centered{
  justify-content:center;
}

.form-actions.start{
  justify-content:flex-start;
}

/* ========== FIELDSET ========== */
fieldset{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
  margin:0 0 20px;
}

legend{
  padding:0 8px;
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  color:var(--text);
}

/* ========== RESPONSIVE ========== */
@media (max-width:560px){
  .form-row{
    grid-template-columns:1fr;
  }
  
  .form-actions{
    flex-direction:column;
  }
  
  .form-actions .btn{
    width:100%;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea{
    font-size:16px; /* Prevent zoom on iOS */
  }
}