/* ===================================================
   OhMyPhoto - Estilos para Input Type Text
   =================================================== */

/* Variables CSS necesarias para los inputs */
:root {
  /* Colores de fondo */
  --bg: #faf8f6;
  --surface: #ffffff;

  /* Bordes */
  --border: #ece8e4;
  --border-mid: #dcd7d2;

  /* Colores de texto */
  --text-1: #2c333b;
  --text-2: #6b7a84;
  --text-3: #a0adb5;
  --text-4: #cdd4d8;

  /* Colores de acento */
  --mint-light: #b6d0d1;
  --mint-mid: #7c929f;

  /* Tipografía */
  --font-b: 'Figtree', system-ui, sans-serif;

  /* Bordes redondeados */
  --radius-sm: 8px;
}

/* Estilos base para inputs de texto */
.finput {
  padding: 9px 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-b);
  font-size: 13px;
  color: var(--text-1);
  outline: none;
  width: 100%;
  transition: all .2s;
}

.finputs2 {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-b);
  color: var(--text-1);
  transition: all .2s;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  background: var(--bg);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-b);
  color: var(--text-1);
  transition: all .2s;
}

/* Placeholder del input */
.finput::placeholder {
  color: var(--text-4);
  opacity: 1;
}

/* Estado focus del input */
.finput:focus {
  border-color: var(--mint-light);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(182, 208, 209, .2);
}

/* Label para los inputs */
.flabel {
  /*font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;*/
  /*text-transform: uppercase;*/
  color: var(--text-3);
  display: block;
  margin-bottom: 5px;
}

/* Grupo de formulario (label + input + hint) */
.fgroup {
  margin-bottom: 16px;
}

/* Texto de ayuda debajo del input */
.fhint {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ===================================================
   EJEMPLO DE USO:
   
   <div class="fgroup">
     <label class="flabel">Nombre del cliente</label>
     <input class="finput" type="text" placeholder="Nombre y apellidos">
     <div class="fhint">Este campo es obligatorio</div>
   </div>
   =================================================== */