/* === ADMIN GLOBAL CSS (CON TODOS LOS ESTILOS DE BOTÓN) === */
:root {
    --sidebar-bg: #EA3857;
    --main-bg: #F7F8FA;
    --header-bg: #FFFFFF;
    --accent-blue: #0d6efd; /* <-- NUEVA VARIABLE AÑADIDA */
    --text-on-accent: #FFFFFF;
    --text-inactive: rgba(255, 255, 255, 0.7);
    --hover-bg: rgba(0, 0, 0, 0.1);
    --text-dark: #202939;
    --text-light: #697586;
    --border-color: #E9EDF2;
    --card-shadow: 0 2px 4px rgba(0,0,0,0.05);
    --font-family: 'Plus Jakarta Sans', sans-serif;
    --green-active: #2ED47A; 
    --red-inactive: #FF6B6B;
    --blue-vacation: #4B95E3;
    --text-general:font-size:0.9em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-family); background-color: #eee; color: var(--text-dark); font-size:var(--text-general); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ... (código del sidebar y layout sin cambios) ... */
.sidebar { width: 280px; background-color: var(--sidebar-bg); color: var(--text-on-accent); height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; padding: 20px; z-index: 1001; }
.user-profile { text-align: center; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.user-profile img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px; border: 3px solid var(--text-on-accent); object-fit: cover; }
.user-profile .user-name { font-weight: 700; font-size: 1em; }
.user-profile .user-role { font-size: 0.8em; opacity: 0.8; text-transform: uppercase; }
.sidebar-nav { flex-grow: 1; margin-top: 20px; }
.sidebar-nav ul li a { display: flex; align-items: center; padding: 10px 15px 10px 15px; margin-bottom: 5px; color: var(--text-inactive); font-weight: 600; transition: all 0.2s ease-in-out; border-radius: 5px; }
.sidebar-nav ul li a i:first-child { font-size: 1.3em; margin-right: 15px; width: 24px; }
.sidebar-nav ul li a .arrow { margin-left: auto; transition: transform 0.2s ease; }
.sidebar-nav ul li.open > a .arrow { transform: rotate(180deg); }
.sidebar-nav ul li a:hover { color: var(--text-on-accent); background-color: var(--hover-bg); }
.sidebar-nav ul li.active > a { color: var(--text-on-accent); background-color: var(--hover-bg); }
.sidebar-nav ul ul { padding-left: 44px; display: none; margin-top: 5px; }
.sidebar-nav ul li.open > ul { display: block; }
.sidebar-footer { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2);margin-bottom: 30px; }
.logout-button { display: flex; align-items: center; padding: 15px; color: var(--text-on-accent); font-weight: 600; border-radius: 8px; transition: background-color 0.2s ease-in-out; }
.logout-button:hover { background-color: var(--hover-bg); }
.logout-button i { font-size: 1.3em; margin-right: 15px; }
.page-wrapper { margin-left: 280px; width: calc(100% - 280px); }
.main-header { display: flex; justify-content: space-between; align-items: center; background-color: #FFFFFF; padding: 15px 30px; border-bottom: 1px solid var(--border-color); }
.main-header h1 { font-size: 1.6em; font-weight: 700; position: relative; padding-bottom: 10px; }
.main-header h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background-color: var(--sidebar-bg); }
.main-header p { color: var(--text-light); font-size: 0.9em; margin-top: 5px; }
.header-right { display: flex; align-items: center; gap: 15px; }
.header-icon { font-size: 1.5em; color: var(--text-light); position: relative; cursor: pointer; transition: color 0.2s ease; }
.header-icon:hover { color: var(--text-dark); }
.header-icon .notification-dot { width: 8px; height: 8px; background-color: var(--sidebar-bg); border-radius: 50%; position: absolute; top: -2px; right: -2px; border: 1.5px solid #FFFFFF; }
.main-content { padding: 15px 20px 20px 20px;background: #eee; }


/* === ESTILOS GENÉRICOS DE COMPONENTES === */

/* Estilo de Tarjeta Genérica */
.card { background-color: #FFFFFF; padding: 15px !important; border-radius: 5px; box-shadow: var(--card-shadow); margin-bottom: 10px; }

/* Estilo de Botones Genéricos (COMPLETO) */
.btn { padding: 10px 20px; border: none; border-radius: 5px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; font-size: 0.8em;}
.btn-primary { background-color: var(--sidebar-bg); color: #FFFFFF; }
.btn-primary:hover { background-color: #d32f4b; }
.btn-secondary { background-color: #343a40; color: #FFFFFF; }
.btn-secondary:hover { background-color: #495057; }
.btn-tertiary { background-color: #e9ecef; color: #495057; }
.btn-tertiary:hover { background-color: #dee2e6; }

/* Estilo de Tabla de Datos Genérica */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle;font-size: 0.8em;color:#333; }
.data-table th { font-weight: 600; font-size: 0.8em; color: #000; /*text-transform: uppercase;*/ letter-spacing: 0.5px; background-color:#eee; }
.data-table tr:hover { background-color: #f8f9fa; }
.no-results { text-align: center; padding: 40px; color: var(--text-light); }
.table-user-cell { display: flex; align-items: center; gap: 12px; font-weight: 600;}
.table-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.actions-cell { text-align: right; white-space: nowrap; }

.action-icon { font-size: 1.3em; margin: 0 5px; transition: color 0.2s ease; }
.action-icon.edit-btn { color: #28a745; }
.action-icon.delete-btn { color: #dc3545; }
.action-icon.qr-btn { color: #333; }
.action-icon:hover { color: #bbbbbb; }

/* Estilos para Etiquetas de Estado */
.status-label { padding: 10px 12px; border-radius: 15px; font-size: 0.7em; font-weight: 700; text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; white-space: nowrap; }
.status-activo { background-color: forestgreen; }
.status-activa { background-color: forestgreen; }
.status-ausente { background-color: gray; }
.status-de-vacaciones { background-color: deepskyblue; }
.status-finalizada { background-color: darkgreen; }

/* --- NUEVOS ESTILOS PARA NOTIFICACIONES --- */
.notice {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 500;
}
.notice.error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.notice.success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
/* === ESTILOS PARA CABECERAS DE TABLA ORDENABLES === */

.data-table th a.sortable {
    color: inherit; /* Hereda el color del texto de la cabecera */
    text-decoration: none;
    display: block; /* Permite que el enlace ocupe todo el espacio */
    position: relative;
    padding-right: 20px; /* Espacio para la flecha */
}

.data-table th a.sortable::after {
    content: '\2195'; /* Código para la flecha arriba-abajo (↕) */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #cccccc; /* Color gris claro para la flecha por defecto */
    font-size: 1.1em;
    font-weight: normal;
}

.data-table th a.sortable.asc::after {
    content: '\2191'; /* Flecha hacia arriba (↑) */
    color: var(--text-dark); /* Color oscuro cuando está activa */
}

.data-table th a.sortable.desc::after {
    content: '\2193'; /* Flecha hacia abajo (↓) */
    color: var(--text-dark); /* Color oscuro cuando está activa */
}

th, td {
  border: 1px solid var(--border-color); /* Borde para todas las celdas por defecto */
  padding: 8px;
  text-align: left;
  /*border-top: none;*/
}

/* Eliminar el borde izquierdo de la primera columna */
td:first-child {
  /*border-left: none;*/
}

/* Eliminar el borde derecho de la última columna */
td:last-child {
  /*border-right: none;*/
}

/* Eliminar el borde izquierdo de la primera columna */
th:first-child {
  /*border-left: none;
  border-top: none;*/
}

/* Eliminar el borde derecho de la última columna */
th:last-child {
  /*border-right: none;
  border-top: none;*/
}
.reload-btn i {
    animation: heartbeat 2s infinite;
    transform-origin: center;
}
.header-icon i {
    /*font-size: 24px;*/
    transition: transform 0.3s, color 0.3s, text-shadow 0.3s;
}
.header-icon {
    position: relative;
    cursor: pointer;
}
.miga-card{
    display:none;
}