
:root {
    --gris1: #3b3b3b;
    --gris2: #b4b4b4;
    --gris3 : #c1c1c1;
    --white1: #fff;
    --white2 : #ffffff0d;
    --white3: #ffffff70;
    --white4: #ffffffcf;
    --white5: #ffffffb5;
    
    --naranja1 : #c43b3b;
    
    --rojo1 : #FF0044;
    --blue1: #082C50;
    --blue3: #0A1A33;
    --green1 : #0e1e2f;
    --blue2 :#050c13;
    --green2 :#06FF44;
    --green3 :#0c8b23;
    --green4 : #021A39;

}

/* 
table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

th {
    background-color: #3f51b5;
    color: white;
    padding: 12px 15px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #f8f8f8;
}

tr:hover {
    background-color: #e6e6fa;
    cursor: pointer;
}

tr:last-child td {
    border-bottom: none;
} */


/* Contenedor principal de la tabla */
.tabla-responsive {
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 100%;
}

/* Las filas se comportan como contenedores flex */
.fila {
    display: flex;
        flex-direction: column;
    /* <-- Clave: Alinea las celdas horizontalmente */
    border-bottom: 1px solid #eee;
}

.fila:last-child {
    border-bottom: none;
}

/* Estilo para los encabezados */
.encabezados {
    font-weight: bold;
    background-color: #f1f1f1;
}

/* Estilo de las celdas */
.celda {
    padding: 2px;
    flex: 1;
    /* Distribuye el espacio equitativamente entre las celdas */
    text-align: center;
}



.tbr {
    /* La clave: Si el contenido es más ancho que el contenedor, permite el scroll */
    overflow-x: auto;
    width: 100%;
    margin-bottom: 20px;
    /* Espacio debajo de la tabla */
}

/* Opcional: Asegúrate de que la tabla no se encoja forzadamente */
.tbr table {
    /* Establece un ancho mínimo para que el scroll funcione */
    min-width: 600px;
    border-collapse: collapse;
}

/* Estilos de tabla del ejemplo anterior para que se vea bien */
.tbr th,
.tbr td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.bg_color_blue{
    background: var(--blue1);
}
.bg_color_blue2 {
    background: var(--blue2);
}

.bg_color_blue3 {
    background: var(--blue3);
}


.bg_color_white {
    background: var(--white1);
}

.bg_color_white_2 {
    background: var(--white2);
}

.color_w2{
    color:var(--white2);
}
.color_w3 {
    color: var(--white3);
}
.color_w4 {
    color: var(--white4);
}
.color_w5 {
    color: var(--white5);
}
.color_b1 {
    color: var(--blue1);
}

.color_r_1 {
    color: var(--rojo1);
}

.color_green_1 {
        color: var(--green1);
}
 .color_green_2 {
     color: var(--green2);
 }
  .color_green_3 {
      color: var(--green3);
  }

  .color_green_4 {
      color: var(--green4);
  }

  .text_dec_line_th{
    text-decoration: line-through;
  }

  .input_text {
        border-style: solid;
            border-width: 1px;
            border-color: #848484;
            border-radius: 13px;
            padding: 5px;
            padding-left: 13px;
            padding-right: 13px;
            color: #404040;
            padding-right: 42px;
            margin-top: 13px;
            margin-bottom: 12px;
            width: 88%;
            
  }

 :focus-visible {
    outline: 1px solid #132643;
  }

/* mobile */
@media (max-width : 480px) {
    /* .fullheight {
            height: 100svh !important;
    } */

    .h80vh {
            height: 80svh !important;
    }

   .h91vh {
            height: 91vh !important;
   }
}
/* btn  */
.btn {
width: max-content;
    padding: 10px;
    background: #086C4D;
    background: linear-gradient(0deg, rgba(8, 108, 77, 1) 0%, rgba(14, 209, 117, 1) 99%);
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 14px;
    outline-style: double;
    outline-width: 5px;
    box-shadow: #1856d1ab -1px 0px 9px 8px;
    color: var(--white1);
    font-weight: 600;
    width: max-content;
}

.btn.disabled{
    background: var(--gris2);
}
/* btn */

.fullwidth{
    width: 100%;
}

.border-bottom-round{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.radius39{
    border-radius: 39px;
}

.radius12 {
    border-radius: 12px;
}

.w-max-content{
width: max-content;
}
.text_center{
        text-align: center;
}
.t-uppercase {
    text-transform: uppercase;
}

.t-underline {
    text-decoration: underline;
}

.auto_text_decoration{
    text-decoration: auto;
}

.auto_text_decoration a {
    text-decoration: auto;
}


.dflex-jc-space-evenly
{
    justify-content: space-evenly;
}

.dflex-jc-space-between {
    justify-content: space-between;
}

.dflex-jc-center {
    justify-content: center;
}
.pt5 {
    padding-top: 5px;
}
.pt18 {
    padding-top: 18px;
}

.ptb5 {
    padding-top: 5px;
    padding-bottom: 5px;
}
.ptb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.ptb20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ptb35  {
    padding-top: 35px;
    padding-bottom: 35px;
}

.pl4 {
    padding-left: 4px;
}
    
.pl12 {
    padding-left: 12px;
}
.plr5 {
    padding-left: 5px;
    padding-right: 5px;
}
.plr25 {
    padding-left: 25px;
    padding-right: 25px;
}
.plr10 {
    padding-left: 10px;
    padding-right: 10px;
}
.plr5e {
    padding-left: 5em;
    padding-right: 5em;
}
 

.color-w {
    color: var(--white1);
}

.color-w-a a {
    color: var(--white1);
}

.color-gris1 {
    color: var(--gris1);
}

.color-gris2 {
    color: var(--gris2);
}
.color-gris3{
    color:var(--gris3);
}

.blur_backdrop_10{
        backdrop-filter: blur(10px);
}
.blur_f_10 {
    filter: blur(9px);
}

.fw100 {
    font-weight: 100;
}

/* Thin */
.fw200 {
    font-weight: 200;
}

/* ExtraLight */
.fw300 {
    font-weight: 300;
}

/* Light */
.fw400 {
    font-weight: 400;
}

/* Regular */
.fw500 {
    font-weight: 500;
}

/* Medium */
.fw600 {
    font-weight: 600;
}

/* SemiBold */
.fw700 {
    font-weight: 700;
}

/* Bold */
.fw800 {
    font-weight: 800;
}

/* ExtraBold */
.fw900 {
    font-weight: 900;
}

/* Black */

.pt3 {
    padding-top: 3px;

}

.pall10{
    padding: 10px;
}

.pall15 {
    padding: 15px;
}
.pall12 {
    padding: 12px;
}
.pall52 {
    padding: 52px;
}

.ptr3 {
    padding-right: 6px;

}

.mlr5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mt17 {
    margin-top: 17px;
}

.mt55 {
    margin-top: 55px;
}

.mtb5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.lh15{
    line-height: 15px;
}

.mtb155 {
    margin-top: 15px;
    margin-bottom: 5px;
}

.mtb105 {
    margin-top: 10px;
    margin-bottom: 5px;
}

.mtb10 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.mtb20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb2010 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.line {
    border-bottom-color: #c8c8c878;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    width: 100%;
}


.mlr810 {
    margin-left: 8px;
    margin-right: 10px;
}

.mr65 {
    margin-right: 65px;
}

.mr10 {
    margin-right: 10px;
}

.mb1 {
    margin-bottom: 18px;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.pointer {
    cursor: pointer;
}

.w29 {
    width: 29px;
}

.mt10 {
    margin-top: 10px;
}

.space {
    height: 32px;
}
.h1cl{
	margin-block-start: 0;
    margin-block-end: 0;
}
.fs05 {
    font-size: 0.5em ;
}
.fs03 {
    font-size: 0.3em;
}
.fs02 {
    font-size: 0.2em;
}
.fs04 {
    font-size: 0.4em;
}
.fs06 {
    font-size: 0.6em ;
}

.fs07 {
    font-size: 0.7em ;
}

.fs08 {
    font-size: 0.8em ;
}

.fs09 {
    font-size: 0.9em ;
}
.fs10 {
    font-size: 1.0em ;
}

.fs12 {
    font-size: 1.2em ;
}

.fs15 {
    font-size: 1.5em ;
}

.fs18 {
    font-size: 1.8em ;
}
.fs20 {
    font-size: 2.0em ;
}
.fs22 {
    font-size: 2.2em ;
}
.fs25 {
    font-size: 2.5em;
}
.fs30 {
    font-size: 3.0em ;
}

.fs40 {
    font-size: 4.0em ;
}
.fs32 {
    font-size: 3.2em ;
}

.fs60 {
    font-size: 6.0em ;
}
.fs120 {
    font-size: 12.0em;
}
.clampfs60{ 
	/*minimo, preferido, maximo*/
	font-size:  clamp(3.0em, 6.0em,6.0em);	
}


.fullheight{
    height: 100vh;
}

.h91vh{
	height: 91vh;
}
.h80vh {
    height: 80vh;
}

.overflow_hidden{
        overflow: hidden;
}

.btn_orange {
    color: #ffffff;
    border-radius: 6px;
    border-style: none;
    padding-top: 3px;
    margin-top: 9px;
    text-transform: uppercase;
    padding-bottom: 3px;
    font-size: 0.6em;
    background: #F3AFA8;
    background: -webkit-linear-gradient(180deg, rgb(243, 175, 168) 0%, rgb(226, 54, 37) 80%);
    background: -moz-linear-gradient(180deg, rgb(243, 175, 168) 0%, rgb(226, 54, 37) 80%);
    background: linear-gradient(180deg, rgb(243, 175, 168) 0%, rgb(226, 54, 37) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F3AFA8", endColorstr="#E23625", GradientType=0);
}

.dflex {
    display: flex;
}

.w_fit_content{
        width: fit-content;
}
.mg0auto {
    margin: 0 auto;
}


.dflex-center {
    align-items: center;
    justify-content: center;
}
.maxw44e{
    max-width: 44em;
}

.dflexh {
    display: flex;
    flex-direction: column;
}

.dflexai-flex-end
{
	align-items: flex-end;
}

.dflexai-center {
    align-items: center;
}
.dflexai-flex-start {
    align-items: flex-start;
}

.dflexjc-flex-end {
    justify-content: flex-end
}

.trans5s {
    transition: .5s;
}


.dflexjc-space-around {
    justify-content: space-around;
}
.wdfull{
    width: -webkit-fill-available;
        /* Chrome, Safari, Edge */
        width: -moz-available;
        /* Firefox */
        width: stretch;
        /* estándar moderno */
}
.hdfull{
    height: -webkit-fill-available  ;
        /* Chrome, Safari, Edge */
        height: -moz-available;
        /* Firefox */
        /* height: stretch; */
        /* estándar moderno */
        max-height: 100%;
}
.dflex-wrap {
    flex-wrap: wrap;
}
.dflex-nowrap {
    flex-wrap: nowrap;
}
.dflex-gap3 {
    column-gap: 3px;
}

.max_50p{
        max-width: 50%;
}

.dflex-gap5 {
    column-gap: 5px;
}

.dflex-gap9 {
    column-gap: 9px;
}
.dflex-gap20 {
    column-gap: 20px;
}
.dflex_gap22 {
    column-gap: 22px;
}
.dflex_gap110 {
    column-gap: 110px;
}

.dflex_gap70 {
    column-gap: 70px;
}

.dflex-gap10_r {
    row-gap: 10px;
}
.dflex-gap20_r {
    row-gap: 20px;
}
.dflex-gap35_r {
    row-gap: 35px;
}
.dflex-gap5_r {
    row-gap: 5px;
}
.dflex-gap3_r {
    row-gap: 3px;
}
.dflex-gap60_r {
    row-gap: 60px;
}

.dflex-gap6 {
    column-gap: 6px;
}

.dflex-gap3 {
    column-gap: 3px;
}

.dflex-gap30 {
    column-gap: 30px;
}

.wf {
    width: 100%;
}
.w90p{
    width: 90%;
}

.h20p{height: 20%;}
.h90p{height: 90%;}
.h100p{height: 100%;}
