/* ============================
   ESTILOS GENERALES
============================ */

body {
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    margin: 0;
    padding: 20px;
}

.contenedor {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

h1 {
    margin-bottom: 20px;
    text-align: center;
}

/* ============================
   ACCIONES (EXPORTAR / VOLVER)
============================ */

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 25px;
}

.acciones button {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s ease;
}

.acciones button:hover {
    background: #1e40af;
}

#btnVolverPanel {
    background: #6b7280;
}

#btnVolverPanel:hover {
    background: #4b5563;
}

/* ============================
   SECCIÓN DE FILTROS
============================ */

.seccion-filtros {
    background: #f9fafb;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

/* ================================
   ESTILO GENERAL DE INPUTS Y SELECTS (ESCRITORIO)
   ================================ */
/* ================================
   INPUTS, SELECTS Y BOTONES — COMPACTO ESCRITORIO
================================ */
.filtros-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;                 /* 🔥 antes 8–14px → ahora MUY compacto */
    margin-bottom: 15px;
}

#filtroDiaFecha,
#filtroDiaHora,
#filtroMes,
#filtroAnio,
#tipoFiltro {
    width: 135px;             /* un poco más pequeño */
    height: 38px;
    padding: 6px 8px;
    margin: 2px 4px;          /* 🔥 antes 4px 6px → ahora casi pegados */
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    text-align: center;
    box-sizing: border-box;
	flex: 0 0 auto;
}


/* Botones igual de compactos */
#btnAplicarFiltro,
#btnQuitarFiltros {
    margin: 2px 2px;          /* 🔥 igual que inputs */
    padding: 8px 18px;        /* más compacto */
    height: 38px;
    font-size: 0.95rem;
}



/* Botón Filtrar */
#btnAplicarFiltro {
    background: linear-gradient(135deg, #234b92, #8a89b0);
    color: white;
    font-weight: bold;
    font-size: 1rem;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgb(19 16 11 / 35%);
    transition: all 0.25s ease;
}

#btnAplicarFiltro:hover {
    background: linear-gradient(135deg, #005dff, #726d60);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgb(127 130 146 / 50%);
}

/* Botón Quitar filtros */
#btnQuitarFiltros {
    background: #e5e7eb;
    color: #333;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#btnQuitarFiltros:hover {
    background: #d1d5db;
}

/* ============================
   TABLA
============================ */

.tabla-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

#tablaHistorial {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    background: white;
    font-size: 15px;
}

/* Encabezados */
#tablaHistorial thead th {
    background: #e5e7eb;
    padding: 12px;
    border-bottom: 2px solid #ccc;
    text-align: left;
}

/* Celdas */
#tablaHistorial tbody td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #eee;
}

#tablaHistorial tbody td:last-child {
    border-right: none;
}

/* Alternancia */
#tablaHistorial tbody tr:nth-child(even) {
    background: #fafafa;
}

/* Hover */
#tablaHistorial tbody tr:hover {
    background: #f1f1f1;
}

/* ============================
   ESTILO PARA COLUMNA SELECCIONADA
============================ */
th.col-activa {
    background-color: #2563eb !important;
    color: white !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    transform: translateY(2px);   /* efecto de "hundido" */
    transition: all 0.15s ease;
}

/* Efecto al hacer hover si no está seleccionada */
#tablaHistorial thead th:not(.col-activa):hover {
    background-color: #d1d5db;
}

/* Cursor de puntero y transición para todas las cabeceras */
#tablaHistorial thead th {
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

/* Ajuste visual extra al hacer clic: sombra interna más fuerte */
#tablaHistorial thead th.col-activa:active {
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.4);
    transform: translateY(2px);
}

/* Mantener tus estilos existentes
#tablaHistorial thead th {
    background: #e5e7eb;
    padding: 12px;
    border-bottom: 2px solid #ccc;
    text-align: left;
} */

/* ============================
   🔝 BOTÓN FLOTANTE "VOLVER ARRIBA"
============================ */

#btnScrollTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #2563eb;
    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    display: none; /* 🔥 Oculto por defecto */
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 9999;
}

#btnScrollTop:hover {
    background: #1e40af;
    transform: translateY(-3px);
}


/* ============================================================
   📱 RESPONSIVE PARA TELÉFONOS Y PANTALLAS PEQUEÑAS
   ============================================================ */
 
      
@media (min-width: 760px) and (max-width: 1300px) {

 #filtroDiaFecha,
#filtroDiaHora,
#filtroMes,
#filtroAnio,
#tipoFiltro {
    width: 125px;             /* un poco más pequeño */
    height: 38px;
    padding: 6px 8px;
    margin: 2px 4px;          /* 🔥 antes 4px 6px → ahora casi pegados */
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    text-align: center;
    box-sizing: border-box;
	flex: 0 0 auto;
}

/* Botones igual de compactos */
#btnAplicarFiltro,
#btnQuitarFiltros {
    margin: 2px 2px;          /* 🔥 igual que inputs */
    padding: 8px 18px;        /* más compacto */
    height: 38px;
    font-size: 0.95rem;
}


} 
 

   
   
/* ============================================================
   ACCIONES RESPONSIVE — 2 COLUMNAS + TEXTO AJUSTADO
============================================================ */
@media (max-width: 600px) {

    /* ACCIONES */
    .acciones {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        margin-top: 12px;
    }

    .acciones button {
        width: 100%;
        padding: 10px;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ============================================================
       CENTRAR TODOS LOS ELEMENTOS DE .filtros-container
    ============================================================ */
    .filtros-container {
        display: flex;
        flex-direction: column;
        align-items: center;     
        justify-content: center;
        gap: 0px; /* más compacto en móvil */
        width: 100%;
    }

    /* Asegurar que TODOS los elementos internos se centren */
    .filtros-container > * {
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin: 0 auto;
    }

    /* Inputs y selects centrados */
    .filtros-container input,
    .filtros-container select,
    .filtros-container button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* Ajuste especial para el bloque de día (fecha + hora) */
    #filtroDia {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
	
	/* Botones igual de compactos */
#btnAplicarFiltro {
	margin-top: 20px; 
}


#btnQuitarFiltros {
	margin-top: 10px; 
}

	

}

/* ============================================================
   Pantallas MUY estrechas (Galaxy Z Fold 5 cerrado, iPhone SE)
============================================================ */
@media (max-width: 390px) {

    .acciones {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .acciones button {
        font-size: 0.8rem;
        padding: 8px;
    }
}

/* ============================================================
   Pantallas muy altas (Galaxy S20 Ultra, S21 Ultra)
============================================================ */
@media (min-height: 1200px) and (max-width: 500px) {

    .acciones button {
        font-size: 0.85rem;
        padding: 10px;
    }
	}
	/* =========================================
	   🎨 ESTILO PREMIUM UNIFICADO PARA TODOS LOS INPUTS
	   (date, select, number)
	========================================= */

	#filtroDiaFecha,
	#filtroDiaHora,
	#filtroMes,
	#filtroAnio,
	#tipoFiltro {
		width: 165px;
		height: 42px;
		margin: 4px;
		font-size: 0.95rem;

		color: #6b6b6b;
		font-weight: 500;
		background-color: #fafafa;
		border-radius: 12px;
		border: 1px solid #ccc;

		padding-left: 14px;
		padding-right: 42px;

		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;

		/* 🔥 Alineación izquierda REAL */
		text-align: left !important;
		text-align-last: left !important;

		box-sizing: border-box;

		/* Flecha SVG premium */
		background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a7a7a'>\
		<path d='M5.5 7.5L10 12l4.5-4.5'/>\
		</svg>");
		background-repeat: no-repeat;
		background-size: 16px;
		background-position: right 14px center;
		}

		/* 🔥 INPUT DATE — texto interno alineado */
		#filtroDiaFecha::-webkit-datetime-edit,
		#filtroDiaFecha::-webkit-datetime-edit-fields-wrapper,
		#filtroDiaFecha::-webkit-datetime-edit-text,
		#filtroDiaFecha::-webkit-datetime-edit-month-field,
		#filtroDiaFecha::-webkit-datetime-edit-day-field,
		#filtroDiaFecha::-webkit-datetime-edit-year-field {
			color: #6b6b6b;
			text-align: left !important;
		}

		/* Icono nativo del date */
		#filtroDiaFecha::-webkit-calendar-picker-indicator {
			filter: brightness(0.55);
			opacity: 0.9;
			cursor: pointer;
		}

		/* 🔥 INPUT NUMBER — quitar flechas nativas */
		#filtroAnio::-webkit-inner-spin-button,
		#filtroAnio::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		/* Hover */
		#filtroDiaFecha:hover,
		#filtroDiaHora:hover,
		#filtroMes:hover,
		#filtroAnio:hover,
		#tipoFiltro:hover {
			color: #3f3f3f;
		}

		/* Focus */
		#filtroDiaFecha:focus,
		#filtroDiaHora:focus,
		#filtroMes:focus,
		#filtroAnio:focus,
		#tipoFiltro:focus {
			color: #3f3f3f;
			border-color: #2563eb;
			
	}

/* =========================================
   📱 RESPONSIVE — 3 FILAS EN MÓVIL
========================================= */

@media (max-width: 600px) {

    #filtroDiaFecha,
    #filtroDiaHora,
    #filtroMes,
    #filtroAnio,
    #tipoFiltro {
        width: 100%;
        max-width: 300px;
        height: 46px;
        margin: 6px auto;
    }

    #filtroDia {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        gap: 10px;
    }

    .filtros-container {
        flex-direction: column;
        width: 100%;
        gap: 0px;
    }
}


/* =========================================
   🖥️ ESCRITORIO — Inputs más anchos y alineados
========================================= */

@media (min-width: 800px) {

    #filtroDiaFecha,
    #filtroDiaHora,
    #filtroMes,
    #filtroAnio,
    #tipoFiltro {
        width: 180px;        /* 🔥 antes 135px → ahora más ancho */
        height: 46px;        /* un poco más alto para premium */
        margin: 6px 8px;     /* separación más elegante */
        font-size: 1rem;
    }

    /* Contenedor alineado en fila */
    .filtros-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5px;           /* separación uniforme */
    }

    /* El bloque de día (fecha + hora) también alineado */
    #filtroDia {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: center;
    }
}

/* =========================================
   🕶️ OCULTAR ICONO NATIVO DEL INPUT DATE
   (sin romper iPhone ni Android)
========================================= */

/* Ocultar icono nativo en navegadores WebKit */
#filtroDiaFecha::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

/* Ocultar icono nativo en Firefox */
#filtroDiaFecha::-moz-focus-inner {
    border: 0;
}

/* Asegurar que el input sigue siendo clicable */
#filtroDiaFecha {
    position: relative;
    cursor: pointer;
}


/* ============================
   🔥 TABLA ULTRA COMPACTA PREMIUM
   (Integrado sin romper tu diseño)
============================ */

#tablaHistorial {
    font-size: 12px !important;       /* antes 15px */
    min-width: 900px !important;      /* más pequeño para que quepa todo */
}

/* Encabezados y celdas más compactos */
#tablaHistorial thead th,
#tablaHistorial tbody td {
    padding: 4px 6px !important;      /* antes 12px → ahora muy compacto */
    white-space: nowrap !important;   /* evita saltos de línea */
}

/* Tamaño de letra */
#tablaHistorial thead th {
    font-size: 12px !important;
}

#tablaHistorial tbody td {
    font-size: 11.5px !important;
}

/* Limitar solo nombre y apellido */
td[data-col="nombre"],
td[data-col="apellido"] {
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Email SIEMPRE completo */
td[data-col="email"] {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}


/* Scroll horizontal elegante si hace falta */
.tabla-wrapper {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}


/* MODO AMPLIO CUANDO HAY POCAS COLUMNAS */
.tabla-amplia td,
.tabla-amplia th {
    font-size: 1.2rem;       /* texto más grande */
    padding: 14px 12px;      /* más espacio */
}

.tabla-amplia {
    table-layout: auto !important;
}

.tabla-amplia td {
    white-space: nowrap;
}


/* Cuando la tabla está filtrada, hacer todo más legible */
#tablaHistorial.tabla-filtrada th,
#tablaHistorial.tabla-filtrada td {
    font-size: 1.2rem;
    padding: 14px 12px;
}

#tablaHistorial.tabla-filtrada {
    table-layout: auto;
}

#tablaHistorial.tabla-filtrada td {
    white-space: nowrap;
}

/* ============================================================
   🎯 MODO FILTRADO — TABLA GRANDE, LEGIBLE Y EXPANDIDA
   ============================================================ */

#tablaHistorial.tabla-filtrada {
    min-width: unset !important;      /* elimina el límite de 900px */
    width: 100% !important;
    table-layout: auto !important;
    font-size: 1.25rem !important;    /* texto grande */
}

#tablaHistorial.tabla-filtrada th,
#tablaHistorial.tabla-filtrada td {
    padding: 16px 22px !important;    /* más espacio */
    font-size: 1.15rem !important;    /* texto grande */
    white-space: nowrap !important;
}


/* ============================================================
   ORDEN CORRECTO DE LOS FILTROS
============================================================ */

.filtros-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

#tipoFiltro { order: 1; }
#filtroAnio { order: 2; }
#filtroMes { order: 3; }
#filtroDia { order: 4; }
#btnAplicarFiltro { order: 5; }
#btnQuitarFiltros { order: 6; }



/* ============================================================
   BOTONES BAJAN AUTOMÁTICAMENTE CUANDO NO HAY ESPACIO
============================================================ */



/* Los inputs deben ocupar prioridad en la fila */
#tipoFiltro,
#filtroAnio,
#filtroMes,
#filtroDia {
    flex: 0 1 auto;          /* permiten wrap */
}

/* Contenedor flexible */
.filtros-container {
    display: flex;
    flex-wrap: wrap;         /* 🔥 permite que los botones bajen */
    gap: 1px;
    align-items: center;
}


/* Contenedor de botones */
.grupo-botones {
    display: flex;
    gap: 10px;           
    flex: 0 1 auto;      
    order: 5;            
    width: 100%;         
    justify-content: center; /* CENTRAR botones en el contenedor */
}

/* Los botones dentro del grupo */
.grupo-botones button {
    flex: 0 1 auto;       /* no se estiren demasiado */
    min-width: 120px;     /* más pequeños que antes */
    max-width: 180px;     /* limitar ancho máximo */
    height: 38px;         /* un poco más bajos */
    font-size: 0.9rem;    
    border-radius: 8px;
    cursor: pointer;
	
}

/* Aplicar Filtro */
#btnAplicarFiltro {
    background: linear-gradient(135deg, #234b92, #8a89b0);
    color: white;
    font-weight: bold;
    box-shadow: 0 3px 8px rgb(19 16 11 / 35%);
}

#btnAplicarFiltro:hover {
    background: linear-gradient(135deg, #005dff, #726d60);
}

/* Quitar Filtros */
#btnQuitarFiltros {
    background: #e5e7eb;
    color: #333;
}

#btnQuitarFiltros:hover {
    background: #d1d5db;
}

/* Responsive móvil — botones apilados */
@media (max-width: 600px) {
    .grupo-botones {
        flex-direction: column;  
        gap: 5px;                /* reducir separación en móvil */
        width: 100%;
        margin-top: 0;            /* no agregar margen extra en móvil */
    }

    .grupo-botones button {
        width: 100%;             /* que ocupen todo el ancho disponible */
        height: 42px;            /* mantener altura original */
        font-size: 0.95rem;      
        min-width: auto;         
        max-width: none;         
    }
}

/* Margin-top solo para tablet y escritorio */
@media (min-width: 601px) {
    .grupo-botones {
        margin-top: 15px;  /* solo aquí */
    }
}