/* =============================== */
/*          GENERAL STYLES         */
/* =============================== */
/* variables de color */
:root {
  /* body */
  --body: #f4f7fa;

  /* colores base */
  --texto-1: #272626;
  --texto-2: #072664;
  --dark-1: #e7e7e7;
  --dark-2: #757575;

  --label: #939393;
  --fondo-1: #a6a6a6;
  --fondo-2: #aeacac;
  --total-hover: #737373;
  --hover: #ababab66;
  --light-hover: #d6edfb;
  --hover-input: #989797;
  --borde: #8d8d8d;
  --dark-shadow: #e1e1e114;
  --light-shadow: #00000011;
  --button: #ebebeb66;

  /* losses */
  --losses-bc: #e3f2fd;
  --losses-cabecera-2: #d2ebf9;
  --losses-borde: #dcdfe1;
  /* #box-earings */
  --earings-bc: #fffde7;
  --earings-cabecera-2: #fafad9;
  --earings-borde: #ececec;
  --earings-hover: #faf3c2;
  /* box summary */
  --summary: #ebf4f4;
  --summary-dark: #a5a5a7;
  --summary-bc: #ebf4f4;

  /* colores específicos */
  --fuente: #368f3f;
  --fuente-active: #2e2925;
  --principal: #92c99b;
  --hover: #d9ebd8;
  --fuente15: #79b47f;
  --btn: #489950;
  --text-area: #ffffff;

  --color-fondo: #f4f7fa;
  --color-primario: #2d6b3a;
  --color-secundario: #368f3f;
  --color-hover: #489950;
  --color-texto: #2e2925;
  --color-blanco: #fff;
  --radio: 10px;
}

/* Contenedor principal para ordenar las cajas para adaptarse a pantallas*/
* {
  box-sizing: border-box;
  outline: none;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  background-color: var(--body);
}

/* Mantener el encabezado centrado */
h1 {
  text-align: center;
  color: var(--texto-1);
  margin: 20px 0;
  font-size: 1.5rem;
}

h1:hover {
  transform: scale(1.3);
  transition: all 0.6s ease;
}

/*-- para adaptarse a pantallas--*/
section {
  width: 90%;
  max-width: 1200px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 6px var(--light-shadow);
  font-size: 1rem;
}

/* ─────────────────────────────── */
/* Indicador flotante (responsive) */
/* ─────────────────────────────── */
#box-indicador-flotante {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  background: var(--body);
  color: var(--texto-1);
  padding: clamp(0.25rem, 1.5vw, 0.5rem) clamp(0.5rem, 3vw, 1rem);
  border: 2px solid var(--borde);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  font-weight: bold;
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  z-index: 1000;
  pointer-events: none;
  opacity: 0.85;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

#box-indicador-flotante:hover {
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 480px) {
  #box-indicador-flotante {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }
}

/* =============================== */
/*         CALCULADORA             */
/* =============================== */

/* Estilos para los iconos de calculadora */
.calculadora-icon {
  cursor: pointer;
  margin-left: 10px;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  padding: 3px;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  z-index: 10;
}

/* Estilo base para las celdas que contienen iconos de calculadora */
.table__perdidas td:first-child,
.table__ingresos td:first-child {
  position: relative;
  padding-right: 30px;
}

/* Nuevos estilos para las calculadoras de pérdidas */
.medicacion-icon,
.sangre-icon,
.oral-icon,
.sng-icon,
.drenajes-icon,
.vomitos-icon {
  color: var(--borde);
  background-color: transparent;
  border: 1px solid var(--borde);
}

.calculadora-icon:hover {
  transform: scale(1.2);
}

/* Contenedor de la calculadora */
.calculadora-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--body);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 15px;
  z-index: 1000;
  box-shadow: 0 4px 20px var(--light-shadow);
  width: 90%;
  max-width: 320px;
}

/* Estilos específicos para cada tipo de calculadora */
.calculadora-medicacion {
  border-top: 4px solid #1976d2;
}

.calculadora-sangre {
  border-top: 4px solid #d32f2f;
}

.calculadora-oral {
  border-top: 4px solid #2fd337;
}

.calculadora-sng {
  border-top: 4px solid #ff6f00;
}

.calculadora-drenajes {
  border-top: 4px solid #77b0b3;
}

.calculadora-vomitos {
  border-top: 4px solid #574002;
}

/* Display de la calculadora */
.calculadora-display {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 0 10px 15px 10px;
  font-size: 1.5rem;
  text-align: right;
  border: 1px solid var(--borde);
  border-radius: 5px;
  background-color: var(--body);
  color: var(--texto-2);
}

/* Botones de la calculadora */
.calculadora-botones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 10px;
}

.calculadora-btn {
  padding: 12px 0;
  font-size: 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 5px;
  background-color: var(--body);
  color: var(--texto-2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.calculadora-btn:hover {
  background-color: var(--hover);
}

/* Botón igual */
.calculadora-btn.igual {
  grid-column: span 2;
}

.calculadora-medicacion .calculadora-btn.igual {
  background-color: #1976d2;
  color: white;
}

.calculadora-sangre .calculadora-btn.igual {
  background-color: #d32f2f;
  color: white;
}

.calculadora-oral .calculadora-btn.igual {
  background-color: #2fd337;
  color: white;
}

.calculadora-sng .calculadora-btn.igual {
  background-color: #ff6f00;
  color: white;
}

.calculadora-drenajes .calculadora-btn.igual {
  background-color: #77b0b3;
  color: white;
}

.calculadora-vomitos .calculadora-btn.igual {
  background-color: #574002;
  color: white;
}

/* Botón limpiar */
.calculadora-btn.limpiar {
  background-color: #fff3e0;
}

/* Overlay */
.calculadora-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Media queries para móviles */
@media (max-width: 480px) {
  .calculadora-container {
    width: 95%;
    padding: 10px;
  }

  .calculadora-display {
    font-size: 1.3rem;
    padding: 8px;
    margin-bottom: 10px;
  }

  .calculadora-btn {
    padding: 10px 0;
    font-size: 1rem;
  }

  .calculadora-icon {
    font-size: 1rem;
    margin-left: 5px;
  }
}

/* X DE LA CALCULADORA ESTILOS */
.calculadora-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 4px;
}

.calculadora-header span {
  font-weight: bold;
  color: var(--texto-1);
}

.calculadora-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-1);
  transition: all 0.3s ease;
  font-size: 1.5rem;
  line-height: 1;
}

.calculadora-cerrar:hover {
  color: #ff4757;
  transform: scale(1.1);
}

.calculadora-cerrar i {
  display: block;
}

/* Layout de calculadora sin decimales - 5 filas */
.calculadora-botones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
  padding: 0 10px;
  height: auto;
}

/* Botón 0 ocupa 2 columnas en la fila 4 */
.calculadora-btn.cero {
  grid-column: span 2;
}

.calculadora-btn.igual {
  grid-column: span 4;
  margin-top: 5px;
}

/* =============================== */
/*         BOX NAVIGATION          */
/* =============================== */

#box-navigation {
  background-color: var(--body);
  width: 100%;
  text-align: center;
  margin-top: 10px;
  max-width: 1705px;
}

.container__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.container__nav ul li {
  flex: 1 1 calc(8.33% - 10px);
  text-align: center;
}

.container__nav ul li a {
  display: block;
  padding: 10px;
  background-color: var(--body);
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: var(--texto-1);
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 2px 4px var(--light-shadow);
}

.container__nav ul li a:hover {
  background-color: var(--light-hover);
  color: var(--texto-2);
  box-shadow: 0 2px 4px var(--light-shadow);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* ———————————————————————————— */
/* BOX NAVIGATION: enlace activo */
/* ———————————————————————————— */
#box-navigation .container__nav ul li a.active {
  background-color: var(--borde) !important;
  color: var(--dark-1) !important;
  border-color: var(--borde) !important;
  box-shadow: 0 0 8px var(--dark-shadow) !important;
  transform: scale(1.05) !important;
}

#box-navigation .container__nav ul li.active a {
  background-color: var(--borde) !important;
  color: var(--dark-1) !important;
}

/* =============================== */
/* ======icono_balance============ */
/* =============================== */
.icono-container {
  position: relative;
  display: inline-block;
  width: 25px !important;
  height: 25px !important;
}

.icono {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
}

/* Mostrar el icono azul por defecto */
.icono.azul {
  opacity: 1;
}

/* Ocultar el icono verde por defecto */
.icono.verde {
  opacity: 0;
}

/* Cuando se hace hover, el azul desaparece y el verde aparece */
.icono-container:hover .azul {
  opacity: 0;
}

.icono-container:hover .verde {
  opacity: 1;
}

/* Fin icono_balance */

/* =============================== */
/*             DATOS              */
/* =============================== */

#box-data {
  display: flex;
  background-color: var(--body);
  color: var(--texto-2);
  flex-direction: column;
  width: 100%;
  max-width: 1705px;
  margin: 0;
  padding: 10px;
  gap: 15px;
  align-items: center;
  align-self: center;
  margin-bottom: 20px;
}

#selected-box {
  font-weight: bold;
  color: var(--texto-2);
  text-align: center;
  margin: 0 auto;
}

.input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.input-group .label {
  font-weight: bold;
  margin: 0 auto;
}

/* =============================== */
/*-----OPACIDAD CAJAS---*/
/* =============================== */
.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* =============================== */
/*   ROW INGRESOS Y PERDIDAS       */
/* =============================== */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto;
}

.row > section {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

/* =============================== */
/*             PERDIDAS           */
/* =============================== */
#box-losses {
  background-color: var(--losses-bc);
  box-shadow: 0 2px 4px var(--light-shadow);
  padding-bottom: 20px;
  border-radius: 10px;
  margin-bottom: 180px;
  color: var(--texto-2);
}

.container-perdidas-item {
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  animation: aparecer both;
  animation-timeline: view();
  animation-range: cover 10% contain 20%;
  margin-bottom: 85px;
}

.table__perdidas {
  width: 100%;
  height: 102.5%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  padding: 0;
  box-shadow: 0 4px 12px var(--light-shadow);
}

.table__perdidas td {
  background-color: var(--losses-bc);
  border: 1px solid var(--losses-borde);
  box-shadow: 0 4px 6px var(--light-shadow);
  text-align: center;
  padding: 10px 20px;
  vertical-align: center;
  font-weight: bold;
  color: var(--texto-2);
}

.table__perdidas th {
  background-color: var(--losses-cabecera-2);
  border: 1px solid var(--losses-borde);
  box-shadow: 0 4px 6px var(--light-shadow);
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  font-weight: bold;
  border-collapse: collapse;
}

.table__perdidas tfoot th,
.table__perdidas tfoot td {
  background-color: var(--losses-cabecera-2);
  border: 1px solid var(--losses-borde);
  color: var(--texto-2);
}

.table__perdidas tfoot th:hover,
.table__perdidas tfoot td:hover {
  opacity: 0.6;
}

.table__perdidas td .input {
  background-color: var(--losses-bc);
  color: var(--texto-2);
  border: 1px solid var(--losses-borde);
  width: 90%;
  margin: 0 auto;
  padding: 5px;
  border-radius: 5px;
  display: block;
  font-weight: bold;
}

.table__perdidas td .input + .input {
  background-color: var(--losses-bc);
  border: 1px solid var(--losses-borde);
  margin-top: 5px;
  border-radius: 5px;
}

.table__perdidas .input {
  background-color: var(--losses-bc);
  border: 1px solid var(--losses-borde);
  width: 95%;
  margin: 0 auto;
  padding: 5px;
  border-radius: 5px;
  display: block;
}

/* Alinear las columnas de concepto y valor */
.table__perdidas th:first-child,
.table__perdidas td:first-child {
  text-align: left;
  box-shadow: 0 4px 6px var(--light-shadow);
}

.table__perdidas th:last-child,
.table__perdidas td:last-child {
  text-align: right;
  box-shadow: 0 4px 6px var(--light-shadow);
}

#table__perdidas-concepto,
#table__perdidas-valor {
  font-size: 1.2rem;
  text-align: center;
}

/*--  input perdidas --*/
.table__perdidas td input {
  display: block;
  margin-bottom: 10px;
}

.table__perdidas td input:last-child {
  margin-bottom: 0;
}

.table__perdidas tbody tr:hover td {
  background-color: var(--light-hover);
  box-shadow: 0 1px 3px var(--light-shadow);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  color: var(--label);
}

/* FINAL DE BOX-LOSSES */

/* =============================== */
/*             INGRESOS           */
/* =============================== */
#box-earings {
  background-color: var(--earings-bc);
  box-shadow: 0 2px 4px var(--light-shadow);
  padding-bottom: 20px;
  border-radius: 10px;
  margin-bottom: 175px;
  color: var(--texto-2);
}

.container-ingresos-item {
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  animation: aparecer both;
  animation-timeline: view();
  animation-range: cover 10% contain 20%;
  margin-bottom: 85px;
}

.table__ingresos {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  padding: 0;
  box-shadow: 0 4px 12px var(--light-shadow);
}

.table__ingresos td {
  background-color: var(--earings-bc);
  border: 1px solid var(--earings-borde);
  box-shadow: 0 4px 6px var(--light-shadow);
  text-align: center;
  padding: 10px 20px;
  vertical-align: center;
  font-weight: bold;
  color: var(--texto-2);
  position: relative;
}

.table__ingresos th {
  background-color: var(--earings-cabecera-2);
  border: 1px solid var(--earings-borde);
  box-shadow: 0 4px 6px var(--light-shadow);
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  font-weight: bold;
  border-collapse: collapse;
}

.table__ingresos tfoot th,
.table__ingresos tfoot td {
  background-color: var(--earings-cabecera-2);
  border: 1px solid var(--earings-borde);
  color: var(--texto-2);
}

.table__ingresos tfoot th:hover,
.table__ingresos tfoot td:hover {
  opacity: 0.6;
}

.table__ingresos td .input {
  background-color: var(--earings-bc);
  color: var(--texto-2);
  border: 1px solid var(--earings-borde);
  width: 90%;
  margin: 0 auto;
  padding: 5px;
  border-radius: 5px;
  display: block;
  font-weight: bold;
}

.table__ingresos td .input + .input {
  background-color: var(--earings-bc);
  border: 1px solid var(--earings-borde);
  margin-top: 5px;
  border-radius: 5px;
}

.table__ingresos .input {
  background-color: var(--earings-bc);
  border: 1px solid var(--earings-borde);
  width: 95%;
  margin: 0 auto;
  padding: 5px;
  border-radius: 5px;
  display: block;
}

/* Alinear las columnas de concepto y valor */
.table__ingresos th:first-child,
.table__ingresos td:first-child {
  text-align: left;
  box-shadow: 0 4px 6px var(--light-shadow);
}

.table__ingresos th:last-child,
.table__ingresos td:last-child {
  text-align: right;
  box-shadow: 0 4px 6px var(--light-shadow);
}

#table__ingresos-concepto,
#table__ingresos-valor {
  font-size: 1.2rem;
  text-align: center;
}

/*--  input ingresos --*/
.table__ingresos td input {
  display: block;
  margin-bottom: 10px;
}

.table__ingresos td input:last-child {
  margin-bottom: 0;
}

.table__ingresos tbody tr:hover td {
  background-color: var(--earings-hover);
  box-shadow: 0 1px 3px var(--light-shadow);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  color: var(--label);
}

/* FINAL DE BOX-EARINGS */

/* =============================== */
/*       TOTALES Y BALANCES       */
/* =============================== */
#box-summary {
  background-color: var(--body);
  border-top: 2px solid var(--losses-borde);
  box-shadow: 0 -4px 6px var(--light-shadow);
  position: fixed;
  bottom: 0;
  margin-top: 20px;
  align-self: center;
  margin: 5px auto;
  padding: 5px 20px;
  width: 100%;
  max-width: 1705px;
  opacity: 0.6;
  text-align: center;
}

.container__totales-item {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 20px;
}

.table-summary th,
.table-summary td {
  padding: 5px;
  text-align: left;
}

/* Inputs readonly de  box summary*/
.input.readonly {
  background-color: var(--summary-bc);
  color: var(--texto2);
  border-color: var(--losses-borde);
}

#balance-total-box {
  background-color: inherit;
  color: var(--texto-1);
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem !important;
}

/* =============================== */
/* ==========FOOTER=============== */
/* =============================== */
footer {
  color: var(--dark-2);
  text-align: center;
  padding: 5px;
  margin-bottom: 5px;
  margin: 0 auto;
  font-size: 8px;
  font-weight: bold;
  width: 100%;
  z-index: 50;
}

/* =============================== */
/*       AJUSTES PARA INPUTS       */
/* =============================== */
.input,
.input perdida,
.input ingreso {
  width: 100%;
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--borde);
  font-size: 1rem;
  background-color: transparent;
  color: var(--texto-2);
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px var(--light-shadow);
  text-align: center;
  font-weight: bold;
}

.input:focus {
  outline: none;
  border: 1px solid var(--borde);
  box-shadow: 0 0 10px var(--light-shadow);
  transition: all 0.3s;
}

/* =============================== */
/*             BUTTON             */
/* =============================== */
/*--Botón Datos--*/
#borrar-datos-principal {
  background-color: #cadbee;
  color: var(--texto-2);
  border: none;
  border-radius: 10px;
  padding: 7px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#borrar-datos-principal:hover {
  background-color: var(--body);
  border: 1px solid var(--texto-2);
}

/*--Botones perdidas e ingresos--*/
.button {
  text-align: center;
  margin: 10px 0 30px 0;
}

.button button {
  padding: 10px 20px;
  background-color: #eaeaea88;
  color: var(--texto-2);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}

.button button:hover {
  background-color: transparent;
  color: var(--texto-2);
  border: 1px solid var(--texto-2);
}

/* =============================== */
/*         CAMPOS READONLY         */
/* =============================== */
input[readonly] {
  pointer-events: none;
  text-align: center;
  outline: none;
}

input[type="number"] {
  font-size: 0.8rem;
  width: 90%;
  padding: 5px;
  color: var(--texto-1);
}

input[type="number"]:invalid {
  border-color: #ff0000;
  background-color: #ff0000;
  color: #fff;
}

input:invalid {
  border-color: #ff0000;
  background-color: #ff0000;
  color: #fff;
}

/*==============================*/
/*     ANIMACIONES BALANCE      */
/*==============================*/
/*  ------ANIMACIONES SECTION------*/
section {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*  ------ANIMACIONES INPUT READONLY------*/
.input.readonly.balance {
  animation: pulse 2s 1;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 5px rgba(23, 24, 23, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(23, 24, 23, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(23, 24, 23, 0.5);
  }
}

/*  ------ANIMACIONES PERDIDAS------*/
.table__perdidas,
.table__ingresos {
  animation: fadeIn 1.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Sombrea la última fila en "Total Ingresos" */
#box-earings .table__ingresos tfoot tr:hover td,
#box-earings .table__ingresos tfoot tr:hover th {
  background-color: var(--earings-hover);
  color: var(--texto-1);
  transition: background-color 0.3s ease;
}

/* Sombrea la última fila en "Total Pérdidas" */
#box-losses .table__perdidas tfoot tr:hover td,
#box-losses .table__perdidas tfoot tr:hover th {
  background-color: var(--light-hover);
  color: var(--texto-1);
  transition: background-color 0.3s ease;
}

#box-data:hover {
  background-color: var(--light-hover);
  box-shadow: 0 4px 10px var(--light-shadow);
  transform: scale(1.02);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Cambia el color de fondo al pasar el cursor sobre los inputs de peso y horas */
.input-container .input:hover {
  background-color: #d2e6f7b3;
  border: 1px solid #ccc;
  transition:
    background-color 0.3s ease,
    border 0.3s ease;
}

#box-earings:hover {
  background-color: #feffde98;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

#box-losses:hover {
  background-color: #d7eef8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Define la animación básica para la entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Configura la línea de tiempo de desplazamiento para cada contenedor */
#box-navigation,
#box-data,
#box-losses,
#box-earings,
#box-summary {
  scroll-timeline-name: fadeTimeline;
  scroll-timeline-axis: block;
  opacity: 0;
  animation: fadeInUp 1s linear both;
  animation-timeline: fadeTimeline;
  animation-range: auto;
}

/*----ANIMACIONES-----*/
@keyframes header-movement {
  from {
    padding: 20px 0;
    background-color: #fff;
  }
  to {
    padding: 0;
    background-color: #10163266;
    color: #fff;
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*--------ADAPTACION PANTALLAS-------*/
/* Media Query para dispositivos móviles */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
    gap: 5px;
  }

  .row > section {
    margin: 0;
    padding: 0;
  }

  #box-losses,
  #box-earings {
    margin: 0;
  }

  #box-earings {
    margin-bottom: 190px;
  }

  #box-data {
    margin: 0 auto;
    width: 100%;
    max-width: none;
  }

  .table-summary th,
  .table-summary td,
  .input.readonly,
  #balance-total-box {
    font-size: 12px;
  }
}

/* ocultando las flechas */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* =============================== */
/*          LOGOUT BUTTON          */
/* =============================== */
.logout-form {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.btn-logout {
  background: transparent;
  border: none;
  color: var(--texto-2);
  font:
    600 0.9rem/1 "Montserrat",
    sans-serif;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-logout i {
  font-size: 1rem;
  line-height: 1;
}

.btn-logout:hover,
.btn-logout:focus-visible {
  opacity: 0.7;
  outline: none;
}

@media (max-width: 480px) {
  .btn-logout .logout-text {
    display: none;
  }
}

/* ================================= */
/*         BOTÓN FIJO (TOP-RIGHT)    */
/* ================================= */
.logout-fixed {
  position: fixed;
  top: 16px;
  right: 20px;
  left: auto !important;
  transform: none !important;
  z-index: 1200;
  margin: 0;
}

@media (max-width: 480px) {
  .btn-logout .logout-text {
    display: none;
  }
}