/* Separación entre elementos del form */

.enviar{
    gap: var(--eo1);
  }
  
  /* Componentes genéricos de datos*/
  
  label {
    color: rgb(var(--crT1));
  }
  
  ::placeholder {
    color: rgba(var(--crT1),var(--od3));
  }
  
  /* diseño de caja */
  
  input,
  textarea,
  .sl,
  .slC{
    padding: 0 var(--eo0);
    border: solid var(--beI) rgb(var(--crG2));
    /* width: calc(100% - var(--eo4)); */
    width: 100%;
    height: var(--eo4);
    /* min-height: var(--eo5); */
    border-radius: var(--brI);
    box-shadow: var(--saI);
  }

.sB > input{
  border: none;
}
.sB i{
  right: 0;
}
.sB{
  border:solid var(--beI) rgb(var(--crG2));
}

  input[type='range'],input[type='color']{
    box-shadow: none;
  }
  
  /* Color manejadores */
  
  [class*="sl"]::before,
  .ck > label::before {
    font-family: "ftI";
    color: rgb(var(--crG0));
    font-size: var(--fs4);
    background: rgb(var(--crB));
    width: var(--eo4);
    right: 0;

  }
  
  /* Elementos seleccionados */
  
  form *:focus {
    outline: solid thin rgb(var(--crP0));
    outline-offset: -0px;
  }
  select:focus {
    border: none;
    outline: none;
  }
  
      /* Sleccionado */
  [type="checkbox"]:checked+label,
  [type="checkbox"]:checked:hover+label,
  [type="radio"]:checked+label,
  [type="radio"]:checked:hover+label,
  .ck >:checked:hover+label::before,
  .ck >:checked+label::before
  {
    color: rgb(var(--crP0));
  }
      /* hover */
  .ck >label:hover,
  .ck >:hover+label::before,
  .sN i:hover,.sB i:hover {
    color: rgb(var(--crT0));
  }
  
  /* Iconos */
  
  [class*="sl"]::before {
    content: "";
  }
  
  [type="checkbox"]+label::before {
    content: "";
  }
  
  [type="checkbox"]:checked+label::before {
    content: "";
  }
  
  [type="radio"]+label::before {
    content: "";
  }
  
  [type="radio"]:checked+label::before {
    content: "";
  }
  
  /* fecha */
  .slF::before {
    content: "";
  }
  
  /* hora */
  .slH::before {
    content: "";
  }
  
  /* Color */
  .slC::before{
    content: "";
  }
  
  /* ENVIAR */
  /* mensajes y avisos*/
  [class*="mE"] {
    width: 100%;
    font-size: var(--fs4);
    text-shadow: var(--saT);
    border: solid var(--beB) rgba(var(--crB), var(--od3));
    height: var(--eo5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(var(--crT3));
    text-align: center;
  }
  .mE0{
    background-color: rgb(var(--crE0));

  }
  
  .mE1{
    background-color: rgb(var(--crE1));

  }
  
  .mE2{
    background-color: rgb(var(--crE2));
    color: rgb(var(--crT0));
  }
  
  .mj0{ color: rgb(var(--crE0)); }
  .mj1{ color: rgb(var(--crE1)); }
  .mj2{ color: rgb(var(--crE2)); }
  
  /* copia */
  form .c {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--eo7);
  }
  
  /* botón enviar */
  form .b {
    display: flex;
    justify-content: space-between;
  }
  
  
  /* ------------------------------------------- */