/* ====== Base de formularios (global) ====== */


.field{ margin-bottom: var(--space-3); }





.label{


  display:inline-block;


  margin-bottom: 6px;


  font-size: 15px;


  color: var(--text);


}





/* Inputs de texto / email / password */


.input{


  appearance: none;


  width: 100%;


  padding: var(--input-py) var(--input-px);


  border: 1px solid var(--input-border);


  border-radius: var(--input-radius);


  background: var(--input-bg);


  color: var(--input-text);


  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);


}


.input::placeholder{ color: var(--input-placeholder); }


.input:focus{


  outline: none;


  border-color: var(--input-focus);


  box-shadow: 0 0 0 3px color-mix(in oklab, var(--input-focus) 30%, transparent);


  background: #fff;


}


.input:hover{ border-color: var(--input-border-hover); }





/* Wrapper para iconos (p.ej. ojo) */


.input-wrapper{ position: relative; }


.input-wrapper .input{ padding-right: 44px; }





/* ====== Select (desplegable) ======


   Usamos appearance:none y una flecha SVG inline que hereda currentColor.


*/


.input-dropdown{


  appearance: none;


  width: 100%;


  padding: var(--input-py) calc(var(--input-px) + var(--select-arrow-size) + var(--select-arrow-gap)) var(--input-py) var(--input-px);


  border: 1px solid var(--input-border);


  border-radius: var(--input-radius);


  background: var(--input-bg);


  color: var(--input-text);


  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);


  background-repeat: no-repeat;


  background-position: right var(--select-arrow-gap) center;


  background-size: var(--select-arrow-size);


  /* Flecha gris que hereda currentColor; cambia el color controlando "color" */


  color: var(--text); /* puedes poner var(--text-muted) si la quieres más suave */


  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");


}


.input-dropdown:focus{


  outline: none;


  border-color: var(--input-focus);


  box-shadow: 0 0 0 3px color-mix(in oklab, var(--input-focus) 30%, transparent);


  background-color: #fff;


}


.input-dropdown:hover{ border-color: var(--input-border-hover); }





/* Compat extra para Safari/iOS 


select.input-dropdown{


  -webkit-appearance: none;


  -moz-appearance: none;


}


  */