:root {
    --color-fondo: #e4e4d9;
    --color-tabla: #ddd;
    --color--cabezatabla: rgb(149, 201, 201);
    /* Define la variable */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo);
    
}

.contenedor {
    height: 100%;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 10% 90%;
    background-color: var(--color-fondo);

    justify-items: center;
    align-items: center;
    gap: 0px;
    margin-top: 5vh;
    
}

.encabezado {
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: var(--color-fondo);
  
    width: 100%;
    justify-self: center;
    margin-top: 0%;
    margin-bottom: 0px;
    text-align: center;
}

.tituloGrafico {
    grid-column: 2/3;
    grid-row: 1/2;
    background-color: var(--color-fondo);
    width: 100%;
    height: 100%;
    margin-top: 10%;
    margin-bottom: 0px;
    text-align: center;
    font-size: 2.1vh;
    display: flex;
  align-items: end;
  justify-content: center;
    
}

table {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
    border-collapse: separate; /* Cambia a 'separate' si 'collapse' no funciona */
    background-color: var(--color-fondo);
    display: table !important;
    word-wrap: break-word;
    justify-self: center;
    align-self: start;
    margin-top: 10vh;
    width: 80%;
    height: 60%;
    font-size: 1.1vh;
    border-radius: 12px; /* Redondea las esquinas */
    overflow: hidden; /* Asegura bordes redondeados */
    box-shadow: 3px 14px 18px rgba(0, 0, 0, 0.3); /* Agrega sombra para que sea más visible */
}




.grafico1 {
    grid-column: 2/3;
    grid-row: 1/4;
    background-color: var(--color-fondo);

    height:75%;
    width: 80%;
    justify-self: center;
    place-self: center;
    margin-top: 10vh;
}



th {
    background-color: rgb(149, 201, 201);
    background-color: var(_color--cabezatabla);
    font-size: 1.5vh;
    text-align: center;
    border: 1px dotted #8f8585;
}

td {
    border: 1px dotted #8f8585;
    
}

button {
    font-size: 1.2vh;
    background-color: rgba(121, 184, 184, 0.613);
}


/* Estilos de filas */
.fila1, .fila2, .fila3, .fila4, .fila13, .fila14 {
    height: clamp(20px, 0.1vh, 50px);
    padding: 0.5vh;
    box-sizing: border-box;
    border: none;
    font-size: 1.9vh;
}

.fila1 td, .fila2 td, .fila3 td, .fila4 td, .fila13 td, .fila14 td {
    border: none;
}




.fila5, .fila6, .fila7, .fila8, .fila9, .fila10, 
.fila11, .fila12 {
    height: clamp(20px, 5vh, 30px);
    padding: 0.5vh;
    box-sizing: border-box;
    border: 1px dotted #8f8585;
    background-color: var(--color-tabla);
}



.col2, .col3, .col4 {
    border: 1px dotted #8f8585;
    padding: 5px;
    text-align: center;
}

.fila1 .col2, .fila2 .col2, .fila3 .col2 {
    text-align: right;   
    font-size: 1.5vh;
}

input[type="number"] {
    width: 40%;
    text-align: center;
}



.encabezado h1 {
    font-size: 2.5vh;
}

.fila11 .col2 {
    font-size: 1.6vh;
} 

 .fila6 .col1, .fila7 .col1, .fila8 .col1, .fila9 .col1, .fila10 .col1, .fila11 .col1, .fila12 .col1 {
    font-size: 1.6vh;
    padding-left: 1vh;
}

.fila12 .col1 {
    font-size: 1.5vh;    
}

.fila12 .col3 {
    text-align: right; 
    font-size: 1.9vh;
    padding-right: 3vh;
    
    
}

 .fila6 .col5, .fila7 .col5, .fila8 .col5, .fila9 .col5, .fila10 .col5 {
    text-align: right; 
    font-size: 1.5vh;
    padding-right: 3vh;
}

.fila3 .col5, .fila14  {
    text-align: center;
} 

/* Safari (Webkit) a veces oculta las flechas si hay estilos personalizados */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: inner-spin-button;
      opacity: 1;
    }

    /* Firefox muestra flechitas por defecto, pero si necesitas asegurarlo: */
    input[type="number"] {
      -moz-appearance: textfield;
    }

    /* Mostrar flechitas incluso en inputs estilizados */
    input[type="number"]::-webkit-inner-spin-button {
      opacity: 1 !important;
    }
    .fila1 .col4 {
        text-align: right;
        
    }