/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.color_de_link{
  color: #202020;
  text-decoration-line: none;
}

.color_de_link_titulos{
  color: #19AA54;
  text-decoration-line: none;
}

.color_de_link_azul{
  color: blue;
  text-decoration-line: none;
}

.color_de_link_verde{
  color: green;
  text-decoration-line: none;
}

.color_de_link_blanco{
  color: white;
  text-decoration-line: none;
}

.color_ok{
  color: green;
  text-decoration-line: none;
}

.color_error{
  color: red;
  text-decoration-line: none;
}

.color_warning{
  color: #FFB300;
  text-decoration-line: none;
}

.verde{
  color: green;
  text-decoration-line: none;
}

.amarillo{
  color: #E36B2C;
}

.rojo{
  color: red;
}

.azul{
  color:blue;
} 

.card {
  box-shadow: 0 0px 20px 0 rgb(187, 191, 188)!important;
  }

.bg-secondary {
    background-color: rgb(0,38,10)!important;
  }

.letra_italica {
    font-style: italic;
  }

.letra_gris {
    color: grey;
  }

.letra_blanca {
    color: white;
  }

.letra_label {
    color: grey;
    font-style: italic;
  }

.letra_chica {
  font-size: 0.78rem; /* un poco más chico que el tamaño base */
} 

.alineado_derecha {
  text-align: right;
}

.alineado_izquierda {
  text-align: left;
}

.alineado_centro {
  text-align: center;
}

.espacio_alineado_vertical {
  padding: 2px 0;
}

.flotar {
   style: float-left;
 }

.sin_borde {
  border: 0;
}

.sin_relleno {
  background-color: white;
}

.fondo_gris_azul {
  background-color: #7F7FAA;
}

.fondo_gris_claro {
  background-color: #f1f1f1;
}

.fondo_celeste {
  background-color: #42b0f5;
}

.angosta {
  font-size: small;
}

.espacio_alineado_vertical {
  padding: 0.5% 0;
} 

.letra_titulos {
  color: #198054;
  font-style: italic;
}

.letra_titulos_campos {
  font-style: italic;
  font-size: x-small;
} 

.letra_estandar {
  font-family: sans-serif;
  font-size: x-small;
} 

.letra_aclaraciones {
  font-style: italic;
  font-size: small;
} 

.boton_ok{
  background:url("/assets/ok-73e6a96d.png");
  border: none;
  background-size: 100% 100%;
  color:  white;
}

.boton_bloque{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  color:  darkgreen;
  font-size: 1rem;
  font-weight: 700;
  background-color: #7fff00;
  margin: 0.2rem;
}

.boton_bloque_amarillo{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  color:  darkgreen;
  font-size: 1rem;
  font-weight: 700;
  background-color: yellow;
  margin: 0.2rem;
}

.boton_bloque_gris{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  border:  none;
  color: green;
  font-size: 1rem;
  background-color: #dedede;
  margin: 0.2rem;
}

.boton_bloque_naranja{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  border:  none;
  color:  white;
  font-size: 1rem;
  background-color: #f4623a;
  margin: 0.2rem;
}

.boton_bloque_rojo{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  color:  darkgreen;
  background-color: #ff3300;
  margin: 0.2rem;
}

.boton_bloque_menu{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  color:  white;
  background-color: #efeff4;
  margin: 0.2rem;
}

.boton_bloque_menu_chico{
  background-size: 100% 100%;
  border-radius: 0.5rem;
  background-color: darkolivegreen;
  padding: 0px 3px;
  font-size: 10px;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  visibility: hidden;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

hr.divider {
  height: 0.2rem;
  max-width: 3.25rem;
  margin: 1.5rem auto;
  background-color: #f4623a;
  opacity: 1;
}

hr.divider_largo {
  height: 0.2rem;
  max-width: 100%;
  margin: 1rem auto;
  background-color: #f4623a;
  opacity: 1;
}

hr.divider-light {
  background-color: #fff;
}

.boton_bloque_verde_arriba{
  background-size: 100% 100%;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  background-color: #54B8B7;
}

.boton_bloque_rojo_arriba{
  background-size: 100% 100%;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  background-color: #ff5533;
}

.boton_bloque_amarillo_arriba{
  background-size: 100% 100%;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  background-color: #ffdd55;
}

.boton_bloque_gris_centro{
  background-size: 100% 100%;
  background-color: #cfcff4;
}

.boton_bloque_verde_centro{
  background-size: 100% 100%;
  background-color: #54B8B7;
}

.boton_bloque_verde_abajo{
  background-size: 100% 100%;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  background-color: #54B8B7;
}

.boton_bloque_rojo_abajo{
  background-size: 100% 100%;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  background-color: #ff5533;
}

.boton_bloque_amarillo_abajo{
  background-size: 100% 100%;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  background-color: #ffdd55;
}

.boton_bloque_gris_abajo{
  background-size: 100% 100%;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  background-color: #cfcff4;
}

.separador {
  height: 0.5rem;
  max-width: 100%;
  margin: 0rem auto;
  background-color: #ffffff;
}

.cuadro_l {
    width: 95%;           /* 50% del ancho del contenedor */
    height: 120px;          /* 30% del alto del contenedor */
    border: 2px solid darkgrey;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: white;
    padding: 20px;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

.cuadro_xl {
    width: 95%;           /* 50% del ancho del contenedor */
    height: 200px;          /* 30% del alto del contenedor */
    border: 2px solid darkgrey;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: white;
    padding: 20px;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

.cuadro_m {
    width: 95%;           /* 50% del ancho del contenedor */
    height: 80px;          /* 30% del alto del contenedor */
    border: 2px solid darkgrey;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: white;
    padding: 20px;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

.cuadro_ajustado{
    width: 95%;           /* 50% del ancho del contenedor */
    height: 100%;          /* 30% del alto del contenedor */
    border: 2px solid darkgrey;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: white;
    padding: 20px;
    box-sizing: border-box; /* Incluye el padding en el tamaño total */
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none; /* Oculto por defecto */
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

.fondo-warning {
  background-color: #b58900; /* amarillo oscuro */
  color: white; /* opcional, para que el texto contraste */
  padding: 4px; /* opcional, para que se vea mejor */
}

.fondo-error {
  background-color: #8b0000; /* amarillo oscuro */
  color: white; /* opcional, para que el texto contraste */
  padding: 4px; /* opcional, para que se vea mejor */
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

summary::-webkit-details-marker {
  display: none;
}

summary {
  cursor: pointer;
}