:root {
    --color-accent: #ff9900;
    --color-gray: #808080;
    --color-gold: #ffd700;
    --color-rose: #ff66cc;
    /* --color-teal: #008080; */
    --color-teal: #438496;
    --color-navy: #000080;
    --color-lilac: #c8a2c8;
    --color-mint: #98ff98;
    --color-coral: #ff7f50;
    --color-orchid: #da70d6;
    --color-slate: #708090;
    --color-olive: #808000;
    --color-plum: #dda0dd;
    --color-crimson: #dc143c;
    --color-turquoise: #40e0d0;
    --color-silver: #c0c0c0;
    --color-amber: #ffbf00;
    --color-purple: #993399;
    --color-dusty: #96858F;
    --color-lavendar: #6D7993;
    --color-overcast: #9099A2;
    --color-aper: #D5D5D5;
    --color-posy: #813772;
    --color-embers: #B82601;
    --color-ink: #062F4F;
    --color-grain: #D7CEC7;
    --color-blackboard: #565656;
    --color-oxblood: #76323F;
    --color-tan: #C09F80;
    --color-orange: #fd7e14;
    --color-coffyWhite: #A99797;
    --color-lavender: #6C648B;
    --color-white: #ffffff;
    --color-summerSky: #286DA8;
    --color-field: #B37D4E;
    --color-azulEicomidita: #0d7ccc;
    --color-azulEicomiditaHover: #38acff;
    --color-verdeEicomidita: #a2e54a;
    --color-principal: #109BF5;
    /*--color-principal: #0d7ccc;*/
    --color-principal-degrado: #5ca8ea;
    --color-secundario: #062F4F;
}

.text-principal {
    color: var(--color-principal);
}
.bg-principal {
    background-color: var(--color-principal);
}
.btn.btn-principal {
    background-color: var(--color-principal);
    color: white;
}
.btn.btn-principal:hover {
    background-color: var(--color-principal-degrado);
}
  
.border-gradient {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* Altura del "borde" */
  background: linear-gradient(90deg, rgba(13, 124, 204, 1) 0%, rgba(162, 229, 74, 1) 100%);
}


  

.text-secundario {
    color: var(--color-secundario);
}
.bg-secundario {
    background-color: var(--color-secundario);
}
.btn.btn-secundario {
    background-color: var(--color-secundario);
    color: white;
}
.btn.btn-secundario:hover {
    background-color: darken(var(--color-secundario), 50%);
}
.btn.btn-outline-principal {
    border: 1px solid var(--color-principal); /* Borde transparente */
    color: var(--color-principal); /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave en los cambios */
  }
  
  /* Cambios en el estilo al pasar el cursor sobre el botón outline*/
  .btn.btn-outline-principal:hover {
    border-color: var(--color-principal); /* Cambio de color del borde */
    color: var(--color-white); /* Cambio de color del texto */
    background-color: var(--color-principal); /* Fondo transparente */
  }

/**********************************************termina configuracion general*/




.text-coffyWhite {
    color: var(--color-coffyWhite);
}
.bg-coffyWhite {
    background-color: var(--color-coffyWhite);
}
.btn.btn-coffyWhite {
    background-color: var(--color-coffyWhite);
    color: white;
}


/***************************************************************** Estilos base para el botón outline */
.btn.btn-outline-teal {
    border: 1px solid #008080; /* Borde transparente */
    color: #008080; /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave en los cambios */
  }
  
  /* Cambios en el estilo al pasar el cursor sobre el botón outline*/
  .btn.btn-outline-teal:hover {
    border-color: var(--color-teal); /* Cambio de color del borde */
    color: var(--color-white); /* Cambio de color del texto */
    background-color: var(--color-teal); /* Fondo transparente */
  }

  
  .btn.btn-outline-lavender {
    border: 1px solid #6C648B; /* Borde transparente */
    color: #6C648B; /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    /* padding: 10px 20px;       Espaciado interno  */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave en los cambios */
  }
  
  /* Cambios en el estilo al pasar el cursor sobre el botón outline*/
  .btn.btn-outline-lavender:hover {
    border-color: var(--color-lavender); /* Cambio de color del borde */
    color: var(--color-white); /* Cambio de color del texto */
    background-color: var(--color-lavender); /* Fondo transparente */
  }

  .btn.btn-outline-summerSky {
    border: 1px solid #286DA8; /* Borde transparente */
    color: #286DA8; /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    /* padding: 10px 20px;       Espaciado interno  */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave en los cambios */
  }
  
  /* Cambios en el estilo al pasar el cursor sobre el botón outline*/
  .btn.btn-outline-summerSky:hover {
    border-color: var(--color-summerSky); /* Cambio de color del borde */
    color: var(--color-white); /* Cambio de color del texto */
    background-color: var(--color-summerSky); /* Fondo transparente */
  }


  .btn.btn-outline-field {
    border: 1px solid #B37D4E; /* Borde transparente */
    color: #B37D4E; /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    /* padding: 10px 20px;       Espaciado interno  */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transition: all 0.3s ease; /* Transición suave en los cambios */
  }
  
  /* Cambios en el estilo al pasar el cursor sobre el botón outline*/
  .btn.btn-outline-field:hover {
    border-color: var(--color-field); /* Cambio de color del borde */
    color: var(--color-white); /* Cambio de color del texto */
    background-color: var(--color-field); /* Fondo transparente */
  }

/******************************************************* FIN Estilos base para el botón outline */
 






/**************************************************** Clases de texto */
.text-summerSky {
    color: var(--color-summerSky);
}
.text-lavender {
    color: var(--color-lavender);
}
.text-accent {
    color: var(--color-accent);
}

.text-gray {
    color: var(--color-gray);
}

.text-gold {
    color: var(--color-gold);
}

.text-rose {
    color: var(--color-rose);
}

.text-teal {
    color: var(--color-teal);
}

.text-navy {
    color: var(--color-navy);
}

.text-lilac {
    color: var(--color-lilac);
}

.text-mint {
    color: var(--color-mint);
}

.text-coral {
    color: var(--color-coral);
}

.text-orchid {
    color: var(--color-orchid);
}

.text-slate {
    color: var(--color-slate);
}

.text-olive {
    color: var(--color-olive);
}

.text-plum {
    color: var(--color-plum);
}

.text-crimson {
    color: var(--color-crimson);
}

.text-turquoise {
    color: var(--color-turquoise);
}

.text-silver {
    color: var(--color-silver);
}

.text-amber {
    color: var(--color-amber);
}

.text-purple {
    color: var(--color-purple);
}

.text-dusty {
    color: var(--color-dusty);
}

.text-lavendar {
    color: var(--color-lavendar);
}

.text-overcast {
    color: var(--color-overcast);
}

.text-aper {
    color: var(--color-aper);
}

.text-posy {
    color: var(--color-posy);
}

.text-embers {
    color: var(--color-embers);
}

.text-ink {
    color: var(--color-ink);
}

.text-grain {
    color: var(--color-grain);
}

.text-blackboard {
    color: var(--color-blackboard);
}

.text-oxblood {
    color: var(--color-oxblood);
}

.text-tan {
    color: var(--color-tan);
}

.text-orange {
    color: var(--color-orange);
}

/******************************************************** Clases de fondo */

.bg-field {
    background-color: var(--color-field);
}

.bg-summerSky {
    background-color: var(--color-summerSky);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-rose {
    background-color: var(--color-rose);
}

.bg-teal {
    background-color: var(--color-teal);
}

.bg-navy {
    background-color: var(--color-navy);
}

.bg-lilac {
    background-color: var(--color-lilac);
}

.bg-mint {
    background-color: var(--color-mint);
}

.bg-coral {
    background-color: var(--color-coral);
}

.bg-orchid {
    background-color: var(--color-orchid);
}

.bg-slate {
    background-color: var(--color-slate);
}

.bg-olive {
    background-color: var(--color-olive);
}

.bg-plum {
    background-color: var(--color-plum);
}

.bg-crimson {
    background-color: var(--color-crimson);
}

.bg-turquoise {
    background-color: var(--color-turquoise);
}

.bg-silver {
    background-color: var(--color-silver);
}

.bg-amber {
    background-color: var(--color-amber);
}

.bg-purple {
    background-color: var(--color-purple);
}

.bg-dusty {
    background-color: var(--color-dusty);
}

.bg-lavendar {
    background-color: var(--color-lavendar);
}

.bg-overcast {
    background-color: var(--color-overcast);
}

.bg-aper {
    background-color: var(--color-aper);
}

.bg-posy {
    background-color: var(--color-posy);
}

.bg-embers {
    background-color: var(--color-embers);
}

.bg-ink {
    background-color: var(--color-ink);
}

.bg-grain {
    background-color: var(--color-grain);
}

.bg-blackboard {
    background-color: var(--color-blackboard);
}

.bg-oxblood {
    background-color: var(--color-oxblood);
}

.bg-tan {
    background-color: var(--color-tan);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-lavender {
    background-color: var(--color-lavender);


}
.bg-GradientEi {
    background: #0f9cf7; /* Old browsers */
    background: -moz-linear-gradient(left, #0f9cf7 0%, #ff6600 0%, #0f9cf7 0%, #ea2803 100%, #ff0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #0f9cf7 0%,#ff6600 0%,#0f9cf7 0%,#ea2803 100%,#ff0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #0f9cf7 0%,#ff6600 0%,#0f9cf7 0%,#ea2803 100%,#ff0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f9cf7', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
}
/****************************************************** COLORES DE BOTONES */
.btn.btn-summerSky {
    background-color: var(--color-summerSky);
    color: white;
}

.btn.btn-lavender {
    background-color: var(--color-lavender);
    color: white;
}
.btn.btn-accent {
    background-color: var(--color-accent);
    color: white;
}

.btn.btn-gray {
    background-color: var(--color-gray);
    color: white;
}

.btn.btn-gold {
    background-color: var(--color-gold);
    color: white;
}

.btn.btn-rose {
    background-color: var(--color-rose);
    color: white;
}

.btn.btn-teal {
    background-color: var(--color-teal);
    color: white;
}

.btn.btn-lavender {
    background-color: var(--color-lavender);
    color: white;
}


.btn.btn-teal:hover {
 
    background-color: rgba(0, 128, 128, 0.7);
    color: white; /* Puedes mantener el mismo color de texto */
}

.btn.btn-navy {
    background-color: var(--color-navy);
    color: white;
}

.btn.btn-lilac {
    background-color: var(--color-lilac);
    color: white;
}

.btn.btn-mint {
    background-color: var(--color-mint);
    color: white;
}

.btn.btn-coral {
    background-color: var(--color-coral);
    color: white;
}

.btn.btn-orchid {
    background-color: var(--color-orchid);
    color: white;
}

.btn.btn-slate {
    background-color: var(--color-slate);
    color: white;
}

.btn.btn-olive {
    background-color: var(--color-olive);
    color: white;
}

.btn.btn-plum {
    background-color: var(--color-plum);
    color: white;
}

.btn.btn-crimson {
    background-color: var(--color-crimson);
    color: white;
}

.btn.btn-turquoise {
    background-color: var(--color-turquoise);
    color: white;
}

.btn.btn-silver {
    background-color: var(--color-silver);
    color: white;
}

.btn.btn-amber {
    background-color: var(--color-amber);
    color: white;
}

.btn.btn-purple {
    background-color: var(--color-purple);
    color: white;
}

.btn.btn-dusty {
    background-color: var(--color-dusty);
    color: white;
}

.btn.btn-lavendar {
    background-color: var(--color-lavendar);
    color: white;
}

.btn.btn-overcast {
    background-color: var(--color-overcast);
    color: white;
}

.btn.btn-aper {
    background-color: var(--color-aper);
    color: white;
}

.btn.btn-posy {
    background-color: var(--color-posy);
    color: white;
}

.btn.btn-embers {
    background-color: var(--color-embers);
    color: white;
}

.btn.btn-ink {
    background-color: var(--color-ink);
    color: white;
}

.btn.btn-grain {
    background-color: var(--color-grain);
    color: white;
}

.btn.btn-blackboard {
    background-color: var(--color-blackboard);
    color: white;
}

.btn.btn-oxblood {
    background-color: var(--color-oxblood);
    color: white;
}

.btn.btn-tan {
    background-color: var(--color-tan);
    color: white;
}

.btn.btn-orange {
    background-color: var(--color-orange);
    color: white;
}

.btn.btn-AzulEi {
    background-color: var(--color-azulEicomidita);
    color: white;
}

.btn.btn-gradientEi {
    background: #0f9cf7; /* Old browsers */
    background: -moz-linear-gradient(left, #0f9cf7 0%, #ff6600 0%, #0f9cf7 0%, #ea2803 100%, #ff0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #0f9cf7 0%,#ff6600 0%,#0f9cf7 0%,#ea2803 100%,#ff0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #0f9cf7 0%,#ff6600 0%,#0f9cf7 0%,#ea2803 100%,#ff0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f9cf7', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
    opacity:0.8;
    color: white;
}

.separator-line {
    border-top: 1px solid var(--line-color);
}



/************************************************************************ HOVER DE LOS BOTONES */
.btn.btn-purple:hover {
    background-color: darken(var(--color-purple), 50%);
}

.btn.btn-summerSky:hover {
    background-color: darken(var(--color-summerSky), 50%);
}

.btn.btn-AzulEi:hover {
    background-color: var(--color-azulEicomiditaHover);
    color: white;
}



/***********************************boton con felcha pensamiento  */
.thinkingButton-oxblood {
    position: relative;
    /*background-color: #286DA8;*/
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.thinkingButton-oxblood::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 10px 0;
    border-color: #76323F transparent transparent transparent;
}