.caja-tabla {
	overflow-x: auto; /* Por si la tabla es muy ancha en el móvil */
	overflow-y: hidden;
}

.alto-max-tabla {
	max-height: 500px;
	overflow-y: auto;
}

.caja-tabla h4 {
	color: #006f53;
	text-transform: uppercase;
	font-family: 'Public Sans', sans-serif !important;
	margin-bottom: 10px;
	font-size: 20px;
	width: 50%;
}

.h4-completo .caja-tabla h4{
	width:100% !important;
}

.tabla-estadistica {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.tabla-estadistica th {
	background-color: #006f53; /* El verde del pantallazo */
	color: white;
	padding: 10px 5px;
	border: 1px solid #ddd;
	font-size: 11px;
	text-transform: uppercase;
}

.tabla-estadistica td {
	padding: 8px;
	text-align: center;
	border: 1px solid #ddd;
	font-size: 12px;
}

.tabla-estadistica tr:nth-child(even) {
	background-color: #f9f9f9;
}

/*Ocultamos celdas que no queremos */
#contenedor-tabla-cotiz-hist tr > th:nth-child(10),
#contenedor-tabla-cotiz-hist tr > th:nth-child(11),
#contenedor-tabla-cotiz-hist tr > th:nth-child(12),
#contenedor-tabla-cotiz-hist tr > th:nth-child(13),
#contenedor-tabla-cotiz-hist tr > th:nth-child(14),
#contenedor-tabla-fwd-hist tr > th:nth-child(8),
#contenedor-tabla-fwd-hist tr > th:nth-child(9),
#contenedor-tabla-fwd-hist tr > th:nth-child(10),
#contenedor-tabla-fwd-hist tr > th:nth-child(11),
#contenedor-tabla-fwd-hist tr > th:nth-child(12),
#contenedor-tabla-cotiz-hist tr > td:nth-child(10),
#contenedor-tabla-cotiz-hist tr > td:nth-child(11),
#contenedor-tabla-cotiz-hist tr > td:nth-child(12),
#contenedor-tabla-cotiz-hist tr > td:nth-child(13),
#contenedor-tabla-cotiz-hist tr > td:nth-child(14),
#contenedor-tabla-fwd-hist tr > td:nth-child(8),
#contenedor-tabla-fwd-hist tr > td:nth-child(9),
#contenedor-tabla-fwd-hist tr > td:nth-child(10),
#contenedor-tabla-fwd-hist tr > td:nth-child(11),
#contenedor-tabla-fwd-hist tr > td:nth-child(12) {
	display: none;
}

/* Estilos para el Histórico */
.maximo {
	background-color: #f8d7da !important; /* Rojo suave */
	color: #721c24;
	font-weight: bold;
}

.minimo {
	background-color: #c8e7f5 !important; /* Verde suave */
	color: #2196f3;
	font-weight: bold;
}

.fila-promedio td {
	background-color: #eee;
	font-weight: bold;
	border-top: 2px solid #006f53;
}

.cabecera-intermedia th {
	background-color: #006f53 !important;
	color: white;
	padding: 10px 5px;
	border: 1px solid #ddd;
	font-size: 11px;
	text-transform: uppercase;
}

.contenedor-desplegable-graficas {
	background: #fff;
	padding: 20px;
	border: 1px solid #ddd;
	margin-top: 10px;
	border-radius: 5px;
}

.contenedor-desplegable-graficas canvas {
	max-height: 150px; /* Altura controlada para las gráficas apiladas */
	width: 100% !important;
}

.boton-grafica {
	background-color: #f7fafc !important;
	border: 1px solid #006f53;
	color: #006f53 !important;
	padding: 5px 10px;
	text-transform: uppercase;
	font-size: 13px;
	align-items: center;
	gap: 3px;
	z-index: 1;
}

.mt-m30{
	margin-top:-30px;
}

.boton-grafica:hover {
	background-color: #97f0ca !important;
	color: #006f53;
}

.ico-grafica {
	width: 20px;
}

.modal-est {
	border: none;
	border-radius: 8px;
	padding: 0;
	width: 90%;
	max-width: 1000px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.modal-est::backdrop {
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(3px);
}

.modal-contenido {
	padding: 40px 20px 20px 20px;
	position: relative;
	background: #fff;
}

.modal-cerrar {
	position: absolute;
	top: 10px;
	right: 15px;
	background: #006f53;
	color: white;
	border: none;
	font-size: 24px;
	cursor: pointer;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	line-height: 1;
	padding: 0px;
}

#contenedor-grafica-modal {
	width: 100%;
	min-height: 500px;
}

.est-caja-grafica {
	display: flex;
	justify-content: end;
}

/* Este es el contenedor de cada una de las 3 gráficas de cotización */
.sub-grafica-item {
	position: relative; /* Obligatorio para Chart.js */
	height: 150px; /* Altura fija para que no crezca sola */
	width: 100%;
	margin-bottom: 60px; /* Espacio para que no se peguen */
}

/* El contenedor del modal también necesita control */
#contenedor-grafica-modal {
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* El canvas debe ocupar el 100% de su padre (.sub-grafica-item) */
.sub-grafica-item canvas {
	width: 100% !important;
	height: 100% !important;
}

.est-status-area {
	margin-top: 15px;
	width: 100%;
}

/*
*   ALERTAS
*/

.alerta-est {
	padding: 12px 20px;
	border-radius: 4px;
	font-weight: 500;
	border-left: 5px solid;
}

.alerta-error {
	background-color: #f8d7da;
	color: #721c24;
	border-color: #f5c6cb;
}

.alerta-info {
	background-color: #e0e3e5;
	color: #383d41;
	border-color: #e0e3e5;
}

.alerta-cargando {
	background-color: #fff3cd;
	color: #856404;
	border-color: #ffeeba;
}

.alerta-est:empty {
	display: none;
}

/*
*   FILTROS DE FECHAS
*/
.est-caja-filtro {
	background: #f8f9fa;
	border: 1px solid #dce0e2;
	border-radius: 8px;
	padding: 20px 25px;
	display: flex;
	align-items: flex-end; /* Alinea botón abajo con el input */
	gap: 25px;
	max-width: 100%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
	margin-bottom: 10px;
}

.est-contenedor-inputs {
	display: flex;
	gap: 20px;
	flex-grow: 1;
}

.est-bloque-input {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.est-label-pequena {
	font-size: 11px;
	color: #7a7a7a;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.est-input-linea {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #c4c4c4;
	padding-bottom: 5px;
	position: relative;
}

.est-input-linea:focus-within {
	border-bottom-color: #006f53;
}

.est-input-linea input[type='date'] {
	border: none !important;
	background: transparent !important;
	font-size: 18px;
	color: #333;
	padding: 0 10px !important;
	font-family: inherit;
	width: 100%;
	outline: none !important;
	cursor: pointer;
}

.est-icono-calendario {
	display: flex;
	align-items: center;
}

.est-boton-enviar {
	background-color: #006f53 !important;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 12px 35px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
}

@media (max-width: 1024px) {
	.est-caja-filtro {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.est-contenedor-inputs {
		flex-direction: column;
	}
	.est-boton-enviar {
		width: 100%;
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	
	.caja-tabla h4 {
		width: 100%;
	}
	.est-input-linea input[type='date']{
		font-size:16px;
	}
	
	.mt-m30 {
		margin-top: 10px;
	}
}