/* ============================================================
   OFICIA CLOCK — styles.css  (v1.8.3)
   CSS unificado para toda la aplicación.

   ESTRUCTURA:
      1. Variables CSS (base del sistema de temas)
      2. Reset & tipografía base
      3. Layouts: body, .container, .header
      4. Cards
      5. Botones
      6. Formularios (inputs, selects, labels)
      7. Toggle switch
      8. Badges & estados
      9. Mensajes / alertas inline
     10. Info-boxes (info, warning, success, highlight)
     11. Tablas
     12. Modales
     13. Spinner / loading
     14. Cookie banner
     15. Reloj esquina
     16. Estadísticas (summary-cards, stat-box)
     17. Filtros
     18. Hourglass (fichando...)
     19. Páginas de contenido (legal, privacy, DPA…)
     20. Responsive global
   ============================================================ */


/* ============================================================
   1. VARIABLES CSS
      Todo el tema se controla desde aquí.
      Para cambiar el look de la app entera solo toca estas
      variables (o las sobreescribe desde JS en document.body).
   ============================================================ */
:root {
    /* --- Fondos --- */
    --bg-grad-start:       #667eea;
    --bg-grad-end:         #764ba2;
    --bg-gradient:         linear-gradient(135deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);

    --bg-admin-start:      #1e3c72;
    --bg-admin-end:        #2a5298;
    --bg-admin-gradient:   linear-gradient(135deg, var(--bg-admin-start) 0%, var(--bg-admin-end) 100%);

    /* --- Superficies --- */
    --card-bg:             #ffffff;
    --card-radius:         15px;
    --card-shadow:         0 5px 20px rgba(0,0,0,0.1);
    --card-shadow-lg:      0 10px 40px rgba(0,0,0,0.2);

    --bg-light:            #f8f9fa;
    --bg-content:          #ffffff;

    /* --- Textos --- */
    --text-main:           #333333;
    --text-sub:            #666666;
    --text-muted:          #999999;

    /* --- Bordes --- */
    --border:              #dee2e6;
    --border-focus:        var(--bg-grad-start);

    /* --- Botones de fichaje --- */
    --btn-in-start:        #56ab2f;
    --btn-in-end:          #a8e063;
    --btn-out-start:       #eb3349;
    --btn-out-end:         #f45c43;
    --btn-break-start:     #f093fb;
    --btn-break-end:       #f5576c;
    --btn-info-start:      #00b4db;
    --btn-info-end:        #0083b0;

    /* --- Mensajes --- */
    --msg-success-bg:      #d4edda;
    --msg-success-text:    #155724;
    --msg-success-border:  #c3e6cb;

    --msg-error-bg:        #f8d7da;
    --msg-error-text:      #721c24;
    --msg-error-border:    #f5c6cb;

    --msg-warning-bg:      #fff3cd;
    --msg-warning-text:    #856404;
    --msg-warning-border:  #ffeeba;

    --msg-info-bg:         #d1ecf1;
    --msg-info-text:       #0c5460;
    --msg-info-border:     #bee5eb;
	

    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --glass-radius: 16px;
    --is-glass-mode: 0;


	
}

/* ============================================================
   2. RESET & TIPOGRAFÍA BASE
   ============================================================ */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-main);
}

/* body.page-user  → gradiente usuario (fichajes, index, config-geo, rfid) */
body.page-user {
    background: var(--bg-gradient);
    min-height: 100vh;
    padding: 20px;
}

/* body.page-login → login centrado (login.html, ver-pin.html) */
body.page-login {
    background: var(--bg-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* body.page-admin → gradiente admin (admin, reportes) */
body.page-admin {
    background: var(--bg-admin-gradient);
    min-height: 100vh;
    padding: 20px;
}

/* body.page-admin-login → admin-login centrado */
body.page-admin-login {
    background: var(--bg-admin-gradient);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* body.page-content → páginas de contenido estático (legal, privacy, DPA, politica-cookies) */
body.page-content {
    background: #f5f5f5;
}


/* ============================================================
   3. LAYOUTS
   ============================================================ */
.container {
    max-width: 900px;
    margin: 0 auto;
}
.container-2 {
    max-width: 100%;
    margin: 0 auto;
}
.container.wide {
    max-width: 1200px;
}
.container.wider {
    max-width: 1400px;
}

/* Header — versión centrada (login, fichajes) */
.header {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow-lg);
    margin-bottom: 20px;
    text-align: center;
}
.header-2 {
    background: none !important;
    padding: 30px;
    box-shadow: none !important;
    margin-bottom: 20px;
    text-align: center;
	color: white;
	border: 0px !important;
}
.header h1 {
    color: var(--text-main);
    margin-bottom: 10px;
    font-size: 32px;
}
.header .welcome,
.header .subtitle {
    color: var(--text-sub);
    font-size: 16px;
}

/* Header — versión con botón logout a la derecha (admin, reportes) */
.header.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}
.header-content { flex: 1; }

.logout-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220,53,69,0.3);
}
.logout-btn:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220,53,69,0.4);
}

/* Back button (reportes → admin) */
.btn-back {
    padding: 12px 24px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}
.btn-back:hover { background: #5a6268; }


/* ============================================================
   4. CARDS
   ============================================================ */
.card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}
/* Variante login: card centrada estrecha con sombra fuerte */
.card.login-card {
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 100%;
    margin-bottom: 0;
}
.card h2 {
    color: var(--text-main);
    margin-bottom: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* h1 dentro de card login centrado */
.card.login-card h1 {
    text-align: center;
    color: var(--text-main);
    margin-bottom: 30px;
    font-size: 28px;
}
.card p {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 10px;
}
.card.full-width { grid-column: 1 / -1; }

/* .container en ver-pin actúa como card centrada (max-width 500px) */
.container.login-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
}
.container.login-card h1 {
    text-align: center;
    color: var(--text-main);
    margin-bottom: 10px;
    font-size: 28px;
}
.container.login-card .subtitle {
    text-align: center;
    color: var(--text-sub);
    margin-bottom: 30px;
    font-size: 14px;
}

/* Grid de cards (admin) — 3 columnas en desktop, responsive en tablets/móviles */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


/* ============================================================
   5. BOTONES
   ============================================================ */
.btn {
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: white;
}
.btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Icono dentro de botón fichaje */
.btn .icon { font-size: 32px; }

/* Variantes de color */
.btn-primary {
    background: var(--bg-gradient);
    color: white;
}
.btn-success {
    background: linear-gradient(135deg, var(--btn-in-start) 0%, var(--btn-in-end) 100%);
    color: white;
}
.btn-danger {
    background: linear-gradient(135deg, var(--btn-out-start) 0%, var(--btn-out-end) 100%);
    color: white;
}
.btn-warning {
    background: linear-gradient(135deg, var(--btn-break-start) 0%, var(--btn-break-end) 100%);
    color: white;
}
.btn-info {
    background: linear-gradient(135deg, var(--btn-info-start) 0%, var(--btn-info-end) 100%);
    color: white;
}
.btn-secondary {
    background: #6c757d;
    color: white;
}

/* Botones de fichaje (panel usuario) — con icono apilado */
.btn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}
.btn-fichaje {
    padding: 20px;
    flex-direction: column;
    gap: 8px;
}
.btn-fichaje .icon { font-size: 32px; }

.btn-in {
    background: linear-gradient(135deg, var(--btn-in-start) 0%, var(--btn-in-end) 100%);
    color: white;
}
.btn-out {
    background: linear-gradient(135deg, var(--btn-out-start) 0%, var(--btn-out-end) 100%);
    color: white;
}
.btn-break {
    background: linear-gradient(135deg, var(--btn-break-start) 0%, var(--btn-break-end) 100%);
    color: white;
}

/* big-button (admin) */
.big-button {
    width: 100%;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    color: white;
}
.big-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.big-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.big-button.btn-primary  { background: var(--bg-gradient); }
.big-button.btn-success  { background: linear-gradient(135deg, var(--btn-in-start), var(--btn-in-end)); }
.big-button.btn-info     { background: linear-gradient(135deg, var(--btn-info-start), var(--btn-info-end)); }
.big-button.btn-warning  { background: linear-gradient(135deg, var(--btn-break-start), var(--btn-break-end)); }
.big-button.btn-secondary { background: #6c757d; }

/* Botones pequeños de tabla */
.btn-edit-fichaje {
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
    transition: background 0.2s;
}
.btn-edit-fichaje:hover { background: #0056b3; }

.btn-delete-fichaje {
    background: linear-gradient(135deg, var(--btn-out-start) 0%, var(--btn-out-end) 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}
.btn-delete-fichaje:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(235,51,73,0.4);
}

/* Modal autoclock buttons */
.modal-autoclock-btn {
    width: 100%;
    padding: 15px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
}
.modal-autoclock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-reconfig  { background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); }
.btn-disable   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }


/* ============================================================
   6. FORMULARIOS
   ============================================================ */
.input-group { margin-bottom: 20px; }

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-sub);
    font-weight: 600;
    font-size: 14px;
}

input,
select {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s;
    background: var(--bg-content);
}
input:focus,
select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

input[type="password"] {
    font-size: 24px;
    letter-spacing: 10px;
    text-align: center;
}

/* Time input (auto clockout) */
.time-input {
    width: 150px;
    padding: 10px;
    font-size: 16px;
}

/* Form grid (reportes, geo-config) */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.form-group label {
    font-weight: 600;
    color: var(--text-main);
}
.form-group small {
    color: var(--text-sub);
    font-size: 13px;
}

/* Botón de login / formularios centrados */
.btn-login {
    width: 100%;
    padding: 15px;
    background: var(--bg-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 10px;
}
.btn-login:hover  { transform: translateY(-2px); }
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Variante admin-login: gradiente oscuro */
.btn-login.admin {
    background: var(--bg-admin-gradient);
}


/* ============================================================
   7. TOGGLE SWITCH
   ============================================================ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider            { background-color: var(--btn-in-start); }
input:checked + .slider:before     { transform: translateX(26px); }

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Auto-clockout box */
.auto-clockout-section {
    background: #e7f3ff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}


/* ============================================================
   8. BADGES & ESTADOS
   ============================================================ */
.status-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    margin: 20px 0;
}
.status-in {
    background: linear-gradient(135deg, var(--btn-in-start), var(--btn-in-end));
    color: white;
}
.status-out {
    background: linear-gradient(135deg, var(--btn-out-start), var(--btn-out-end));
    color: white;
}
.status-break {
    background: linear-gradient(135deg, var(--btn-break-start), var(--btn-break-end));
    color: white;
}

/* Badges pequeñas (tablas) */
.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-active   { background: #d4edda; color: #155724; }
.badge-inactive { background: #f8d7da; color: #721c24; }
.badge-in       { background: #d4edda; color: #155724; }
.badge-out      { background: #cce5ff; color: #004085; }
.badge-info     { background: #dbeafe; color: #1e40af; }
.badge-success  { background: #d1fae5; color: #065f46; }
.badge-warning  { background: #fef3c7; color: #92400e; }

/* Location badges (admin fichajes) */
.location-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
.location-valid   { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.location-invalid { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.location-none    { background: #e9ecef; color: #6c757d; border: 1px solid #dee2e6; }
.location-coords  { font-family: monospace; font-size: 11px; color: #666; display: block; margin-top: 2px; }
.location-distance { font-size: 11px; color: #666; }
.map-icon         { cursor: pointer; color: #007bff; text-decoration: none; font-size: 16px; margin-left: 5px; }
.map-icon:hover   { color: #0056b3; }


/* ============================================================
   9. MENSAJES / ALERTAS INLINE
   ============================================================ */
.message {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    display: none;
}
.message.success {
    background: var(--msg-success-bg);
    color: var(--msg-success-text);
    border: 1px solid var(--msg-success-border);
}
.message.error {
    background: var(--msg-error-bg);
    color: var(--msg-error-text);
    border: 1px solid var(--msg-error-border);
}
.message.warning {
    background: var(--msg-warning-bg);
    color: var(--msg-warning-text);
    border: 1px solid var(--msg-warning-border);
}

/* .result — versión usada en admin (same concept, different class name) */
.result {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    display: none;
}
.result.success { background: var(--msg-success-bg); color: var(--msg-success-text); border: 2px solid var(--msg-success-border); }
.result.error   { background: var(--msg-error-bg);   color: var(--msg-error-text);   border: 2px solid var(--msg-error-border); }
.result.info    { background: var(--msg-info-bg);    color: var(--msg-info-text);    border: 2px solid var(--msg-info-border); }
.result.warning { background: var(--msg-warning-bg); color: var(--msg-warning-text); border: 2px solid var(--msg-warning-border); }

/* .result en ver-pin: fondo gradiente, texto blanco */
.result.pin-result {
    margin-top: 30px;
    padding: 30px;
    background: var(--bg-gradient);
    border-radius: 15px;
    text-align: center;
    animation: slideIn 0.3s ease;
    border: none;
}
.result.pin-result h2 { color: white; margin-bottom: 15px; font-size: 20px; }
.result.pin-result .user-info { color: white; font-size: 14px; opacity: 0.9; margin-top: 15px; background: none; border: none; display: block; }

/* Error box en login — clase .error (login.html, admin-login.html) */
.error-box, .card.login-card .error, .container.login-card .error {
    background: #fee;
    color: #c33;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    display: none;
}
/* Variante ausencia (login bloqueado) */
.error-box.ausencia, .card.login-card .error.ausencia, .container.login-card .error.ausencia {
    background: linear-gradient(135deg, #fff0f3 0%, #ffe0e5 100%);
    border: 2px solid #f5576c;
    color: #c0392b;
    padding: 16px;
    font-size: 15px;
    line-height: 1.6;
}


/* ============================================================
  10. INFO-BOXES (laterales con borde izquierdo)
   ============================================================ */
/* Info-box: por defecto es el panel gris de datos (fichajes: Última acción / Hora) */
.info-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
}
/* Variante con borde izquierdo azul (ver-pin, rfid, etc.) */
.info-box.blue {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    margin-bottom: 20px;
}
.warning-box {
    background: #fff3cd;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #ffc107;
}
.success-box {
    background: #d4edda;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #28a745;
}
.highlight-box {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    margin: 20px 0;
}

/* Info-box dentro de card fichajes (datos entrada/salida) */
.info-panel {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-weight: 600; color: var(--text-sub); }
.info-value { color: var(--text-main); font-weight: bold; }

/* Geolocalización — caja de permiso */
.location-permission-box {
    margin: 15px 0;
    padding: 15px;
    background: var(--msg-warning-bg);
    border: 2px solid #ffc107;
    border-radius: 10px;
}
.location-permission-box p { margin: 0 0 10px 0; }
.location-permission-box button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
.location-permission-box button:hover { background: #0056b3; }


/* ============================================================
  11. TABLAS
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th {
    background: var(--bg-light);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
}
td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
tr:hover { background: var(--bg-light); }

.table-container {
    max-height: 600px;
    overflow-y: auto;
}

/* PIN display */
.pin {
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-sub);
    letter-spacing: 3px;
}

/* Action buttons inside table rows */
.action-buttons {
    display: flex;
    gap: 10px;
}
.action-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    background: #007bff;
    color: white;
    transition: background 0.2s;
}
.action-buttons button:hover { background: #0056b3; }


/* ============================================================
  12. MODALES
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.modal-overlay.active { display: flex; }

.modal-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalIn 0.25s ease;
}
.modal-content h2 { margin-bottom: 15px; color: var(--text-main); }
.modal-content p  { color: var(--text-sub); margin-bottom: 10px; }

.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: flex-end;
}
.btn-confirm {
    background: #dc3545;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}
.btn-confirm:hover { background: #c82333; }

.btn-cancel {
    background: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}

/* Edit modal specifics */
#editModal .modal-content { max-width: 400px; }
#editModal input[type="time"],
#editModal input[type="datetime-local"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px 0;
}
#editModal .edit-info {
    background: var(--bg-light);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}
#editModal .edit-info p { margin: 5px 0; }


/* ============================================================
  13. SPINNER / LOADING
   ============================================================ */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--bg-grad-start);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
.spinner.large { width: 40px; height: 40px; margin: 30px auto; }

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}
.empty-state .icon { font-size: 64px; margin-bottom: 15px; opacity: 0.5; }

.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-muted);
}


/* ============================================================
  14. COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #2c3e50;
    color: white;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 99999;
    animation: slideUp 0.5s ease;
}
.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-text {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex: 1;
}
.cookie-icon { font-size: 32px; flex-shrink: 0; }
.cookie-text p { margin: 0; font-size: 14px; line-height: 1.5; }
.cookie-text a { color: #3498db; text-decoration: underline; }
.cookie-text a:hover { color: #5dade2; }
.cookie-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.cookie-btn-accept          { background: #27ae60; color: white; }
.cookie-btn-accept:hover    { background: #2ecc71; }
.cookie-btn-reject          { background: transparent; color: white; border: 2px solid #95a5a6; }
.cookie-btn-reject:hover    { background: #95a5a6; color: #2c3e50; }


/* ============================================================
  15. RELOJ ESQUINA
   ============================================================ */
.reloj-esquina {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
}
.reloj-esquina .hora {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
}
.reloj-esquina .fecha {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 5px;
}


/* ============================================================
  16. ESTADÍSTICAS (summary-cards / stat-box)
   ============================================================ */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}
.summary-card {
    background: var(--bg-gradient);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s;
}
.summary-card[onclick]       { cursor: pointer; }
.summary-card[onclick]:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.summary-card .number { font-size: 36px; font-weight: bold; margin-bottom: 5px; }
.summary-card .label  { font-size: 14px; opacity: 0.9; }

/* stat-box (versión flex usada en algunos sitios del admin) */
.stats { display: flex; gap: 20px; margin: 20px 0; }
.stat-box {
    flex: 1;
    background: var(--bg-gradient);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
.stat-box h3 { font-size: 36px; margin-bottom: 5px; }
.stat-box p  { font-size: 14px; opacity: 0.9; }

/* stat-card (reportes preview) — alias del mismo estilo */
.stat-card { background: var(--bg-gradient); color: white; padding: 20px; border-radius: 10px; text-align: center; }
.stat-card .number { font-size: 36px; font-weight: bold; margin-bottom: 5px; }
.stat-card .label  { font-size: 14px; opacity: 0.9; }
.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}


/* ============================================================
  17. FILTROS
   ============================================================ */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 10px;
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-group label {
    font-weight: 600;
    color: var(--text-main);
    font-size: 14px;
}
.filter-group select {
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}


/* ============================================================
  18. HOURGLASS (fichando…)
   ============================================================ */
.flipping-hourglass {
    display: inline-block;
    animation: flip 5s ease-in-out infinite;
}


/* ============================================================
  19. PÁGINAS DE CONTENIDO (legal, privacy, DPA, politica-cookies)
      Se aplican cuando el body tiene class="page-content"
   ============================================================ */
.page-content .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-content header {
    background: var(--bg-gradient);
    color: white;
    padding: 40px 20px;
    text-align: center;
    margin: -40px -20px 40px -20px;
}
.page-content header h1 { font-size: 2.5em; margin-bottom: 10px; color: white; }
.page-content .last-update { font-size: 0.9em; opacity: 0.9; }

.page-content h2 {
    color: var(--bg-grad-start);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-grad-start);
}
.page-content h3 {
    color: var(--bg-grad-end);
    margin-top: 20px;
    margin-bottom: 10px;
}
.page-content p { margin-bottom: 15px; text-align: justify; }
.page-content ul, .page-content ol { margin-left: 30px; margin-bottom: 15px; }
.page-content li { margin-bottom: 8px; }

/* Tablas en contenido legal — fondo de header azul */
.page-content table { margin: 20px 0; }
.page-content th { background: var(--bg-grad-start); color: white; border: 1px solid #ddd; }
.page-content td { border: 1px solid #ddd; }

.page-content .footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
    color: var(--text-sub);
    font-size: 0.9em;
}

/* Política de cookies — layout ligeramente diferente */
.page-cookies .header-content {
    background: var(--bg-admin-gradient);
    color: white;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 40px;
}
.page-cookies .content {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.page-cookies h2 {
    color: var(--bg-admin-start);
    border-bottom: 2px solid #eee;
}
.page-cookies h3 { color: var(--bg-admin-end); }
.page-cookies .cookie-table { font-size: 14px; }
.page-cookies .cookie-table th { background: var(--bg-admin-start); color: white; }
.page-cookies .cookie-table tr:nth-child(even) { background: #f9f9f9; }
.page-cookies .cookie-table tr:hover { background: #f1f1f1; }
.page-cookies .highlight-box {
    background: #e8f4fd;
    border-left: 4px solid var(--bg-admin-end);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}
.page-cookies .highlight-box strong { color: var(--bg-admin-start); }


/* ============================================================
  20. RESPONSIVE GLOBAL
   ============================================================ */

/* Cookie banner */
@media (max-width: 768px) {
    .cookie-content     { flex-direction: column; text-align: center; }
    .cookie-text        { flex-direction: column; align-items: center; }
    .cookie-buttons     { width: 100%; justify-content: center; }
}

/* Header space-between → apila en móvil */
@media (max-width: 768px) {
    .header.space-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .logout-btn { width: 100%; }
}

/* Grid de cards → responsive */
@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Admin .container usa wider (1400px) */
body.page-admin .container { max-width: 1400px; }

/* Summary cards → 2 columnas en móvil */
@media (max-width: 769px) {
    .summary-cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Tablas → se ocultan en móvil, se usan .mobile-cards */
@media (max-width: 768px) {
    table { display: none; }
    .mobile-cards { display: block !important; }
    .action-buttons { flex-direction: column; gap: 8px; }
    .action-buttons button { width: 100%; }
}
/* En desktop se oculta la versión móvil */
.mobile-cards { display: none; }

.mobile-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 15px;
}
.mobile-card-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-card-row:last-child { border-bottom: none; }
.mobile-card-label  { font-weight: 600; color: var(--text-sub); font-size: 13px; }
.mobile-card-value  { text-align: right; color: var(--text-main); font-size: 13px; }

/* mobile-only / desktop-only */
@media (min-width: 769px) { .mobile-only { display: none !important; } }
@media (max-width: 768px) { .desktop-only { display: none !important; } }

/* Charts → 1 columna en tablets */
@media (max-width: 1024px) {
    .charts-container { grid-template-columns: 1fr; }
}

/* Página contenido responsive */
@media (max-width: 768px) {
    .page-cookies .content { padding: 20px; }
    .page-cookies .cookie-table { font-size: 12px; }
    .page-cookies .cookie-table th,
    .page-cookies .cookie-table td { padding: 8px; }
}

/* Print */
@media print {
    body { background: white !important; }
    .container { box-shadow: none; }
    .no-print { display: none; }
}


/* ============================================================
  21. ANIMACIONES
   ============================================================ */
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes flip {
    0%, 100% { transform: rotateZ(0deg); }
    50%      { transform: rotateZ(360deg); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Utilidades de animación */
.anim-fadeIn    { animation: fadeIn 0.5s ease; }
.anim-fadeInUp  { animation: fadeInUp 0.6s ease both; }
.status-indicator {
    display: inline-block;
    width: 12px; height: 12px;
    background: #4CAF50;
    border-radius: 50%;
    animation: pulse 2s infinite;
    margin-right: 8px;
}


/* ============================================================
  22. CHARTS (admin)
   ============================================================ */
.charts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}
.chart-box {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.chart-box h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}
.chart-box canvas { max-height: 400px; }


/* ============================================================
  23. MISCELÁNEO / UTILIDADES
   ============================================================ */
.inline-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.inline-flex img { width: 32px; height: auto; }

/* Enlaces retorno */
.back-link { text-align: center; margin-top: 20px; }
.back-link a { color: #2a5298; text-decoration: none; font-size: 14px; }
.back-link a:hover { text-decoration: underline; }

/* Olvidar contraseña (login) */
.forgot-pin {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}
.forgot-pin a { color: var(--bg-grad-start); text-decoration: none; font-size: 14px; font-weight: 600; }
.forgot-pin a:hover { color: var(--bg-grad-end); text-decoration: underline; }

.helper-text { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 10px; }

/* Preview reporte */
.preview-header {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.preview-actions { display: flex; gap: 10px; }
.preview-content {
    background: white;
    padding: 30px;
    border: 2px solid var(--border);
    border-radius: 0 0 10px 10px;
    max-height: 600px;
    overflow-y: auto;
}

/* Manual clockout card z-index */
#manualClockoutCard { position: relative; z-index: 100; }
#manualClockoutCard table button { transition: all 0.2s; }
#manualClockoutCard table button:hover { background: #c82333 !important; transform: scale(1.05); }

/* breaksMovil toggle */
#breaksMovil { display: none !important; }
@media (max-width: 769px) { #breaksMovil { display: block !important; } }


/* ============================================================
  24. CLASES ADICIONALES — completadas tras auditoría
   ============================================================ */

/* Logo (login, ver-pin, admin-login) */
.logo {
    text-align: center;
    font-size: 60px;
    margin-bottom: 20px;
}

/* Clase loading genérica */
.loading {
    text-align: center;
    padding: 20px;
    color: var(--text-sub);
}
.loading .spinner { margin: 0 auto 15px; }

/* Actions row (ver-pin, reportes) */
.actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.actions button {
    flex: 1;
    padding: 12px;
    font-size: 14px;
    width: 100%;
    background: var(--bg-gradient);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}
.actions button:hover { transform: translateY(-2px); }
/* Botón secundario dentro de actions (ver-pin: dentro del bloque gradiente) */
.actions .btn-secondary {
    background: rgba(255,255,255,0.2);
}
.actions .btn-secondary:hover {
    background: rgba(255,255,255,0.3);
}

/* highlight (privacy, geo) */
.highlight {
    background: #fff3cd;
    padding: 15px;
    border-left: 4px solid #ffc107;
    margin: 20px 0;
}

/* user-info (rfid, ver-pin) */
.user-info {
    background: #f0fdf4;
    border: 2px solid #86efac;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    display: none;
}
.user-info.show { display: block; animation: fadeIn 0.3s; }
.user-info strong { color: #166534; display: block; margin-bottom: 5px; }
.user-info p { color: #15803d; margin: 3px 0; }

/* btn-sm */
.btn-sm { padding: 6px 16px; font-size: 14px; }

/* copy-btn */
.copy-btn { background: #007bff !important; }

/* pin-display (ver-pin) */
.pin-display {
    background: white;
    color: var(--bg-grad-start);
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 15px;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    font-family: monospace;
    text-align: center;
}

/* ============================================================
  25. INDEX.HTML — cards de portada
   ============================================================ */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* card en index actúa como enlace */
a.card, .card[onclick] {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.3s ease;
}
a.card:hover, .card[onclick]:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}

.card-icon        { font-size: 64px; margin-bottom: 20px; display: block; }
.card-title       { font-size: 28px; font-weight: bold; color: var(--text-main); margin-bottom: 15px; }
.card-description { color: var(--text-sub); font-size: 16px; line-height: 1.6; margin-bottom: 25px; }
.card-button {
    display: inline-block;
    padding: 15px 30px;
    background: var(--bg-gradient);
    color: white;
    border-radius: 10px;
    font-weight: bold;
    font-size: 16px;
    border: none;
    transition: transform 0.3s;
}
.card-button:hover { transform: scale(1.05); }

/* card.admin — variante rosa de la card portada */
.card.admin {
    background: linear-gradient(135deg, var(--btn-break-start) 0%, var(--btn-break-end) 100%);
    color: white;
}
.card.admin .card-title,
.card.admin .card-description { color: white; }
.card.admin .card-button { background: white; color: var(--btn-break-end); }

/* Quick links (index) */
.quick-links {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    margin-top: 40px;
    animation: fadeIn 1s ease;
}
.quick-links h3 { color: white; margin-bottom: 15px; font-size: 20px; }
.quick-links a {
    display: inline-block;
    margin: 5px 10px 5px 0;
    padding: 10px 20px;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s;
}
.quick-links a:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); }


/* ============================================================
   26. GLASSMORPHISM MODE
   ============================================================ */

/* Variables glass (se sobreescriben cuando se activa el tema glass) */
:root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(12px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Glass mode - Activado con data-theme="glass" */
[data-theme="glass"] {
    --card-bg: transparent !important;
    --bg-content: transparent !important;
    --bg-light: transparent !important;
    --text-main: #ffffff !important;
    --text-sub: rgba(255, 255, 255, 0.8) !important;
    --text-muted: rgba(255, 255, 255, 0.6) !important;
    --text-primary: #ffffff !important;
	--bg-gradient:         linear-gradient(135deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
    --bg-grad-start: #135de9 !important;
    --bg-grad-end: #614b9a !important;
}

/* Aplicar glassmorphism a todos los elementos blancos cuando está activo */
[data-theme="glass"] .card,
[data-theme="glass"] .header,
[data-theme="glass"] .container.login-card,
[data-theme="glass"] .info-box,
[data-theme="glass"] .info-panel,
[data-theme="glass"] .filters,
[data-theme="glass"] .modal-content,
[data-theme="glass"] .reloj-esquina,
[data-theme="glass"] .cookie-banner,
[data-theme="glass"] .preview-card,
[data-theme="glass"] .controls-panel,
[data-theme="glass"] .preview-panel,
[data-theme="glass"] .chart-box,
[data-theme="glass"] .auto-clockout-section,
[data-theme="glass"] .warning-box,
[data-theme="glass"] .success-box,
[data-theme="glass"] .highlight-box,
[data-theme="glass"] .location-permission-box,
[data-theme="glass"] footer,
[data-theme="glass"] .quick-links {
    background: rgba(40, 40, 70, 0.35) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Texto más visible en glass mode */
[data-theme="glass"] .card h2,
[data-theme="glass"] .card h3,
[data-theme="glass"] .card p,
[data-theme="glass"] .card label,
[data-theme="glass"] .card span,
[data-theme="glass"] .card div,
[data-theme="glass"] .header h1,
[data-theme="glass"] .header .subtitle,
[data-theme="glass"] .header .welcome,
[data-theme="glass"] .info-box,
[data-theme="glass"] .big-button,
[data-theme="glass"] a,
[data-theme="glass"] .subtitle,
[data-theme="glass"] .info-label,
[data-theme="glass"] .info-value,
[data-theme="glass"] .card-title,
[data-theme="glass"] .card-description,
[data-theme="glass"] .card-button,
[data-theme="glass"] footer,
[data-theme="glass"] footer p,
[data-theme="glass"] footer a,
[data-theme="glass"] .reloj-esquina .hora,
[data-theme="glass"] .reloj-esquina .fecha {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Los botones mantienen su texto original si ya lo tienen blanco */
[data-theme="glass"] .btn,
[data-theme="glass"] .big-button,
[data-theme="glass"] button {
    color: white !important;
}

/* Botones dentro de cards en index.html - mantener su fondo con glassmorphism sutil */
[data-theme="glass"] .card-button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Badges y estados en glass mode */
[data-theme="glass"] .badge,
[data-theme="glass"] .status-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Links en glass mode */
[data-theme="glass"] .back-link a,
[data-theme="glass"] .forgot-pin a {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="glass"] .back-link a:hover,
[data-theme="glass"] .forgot-pin a:hover {
    color: white !important;
}

/* Inputs en glass mode */
[data-theme="glass"] input,
[data-theme="glass"] select,
[data-theme="glass"] textarea {
    background: rgba(40, 40, 70, 0.6) !important;  /* Fondo oscuro semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;  /* Borde más visible */
    color: white !important;
}

[data-theme="glass"] input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Options dentro de select en glass mode */
[data-theme="glass"] select option {
    background: #2c3e50 !important;
    color: white !important;
    padding: 10px;
}

[data-theme="glass"] select option:checked,
[data-theme="glass"] select option:hover {
    background: #34495e !important;
    color: white !important;
}


/* Tablas en glass mode */
[data-theme="glass"] table {
    background: transparent;
}

[data-theme="glass"] th {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    backdrop-filter: blur(16px);
}

[data-theme="glass"] td {
    color: white !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="glass"] tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Fallback si backdrop-filter no está soportado */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-theme="glass"] .card,
    [data-theme="glass"] .header,
    [data-theme="glass"] .modal-content {
        background: rgba(40, 40, 70, 0.85) !important;
    }
}

/* ============================================================
   27. GLASS MODE - OVERRIDES ESPECÍFICOS
   ============================================================ */

/* Forzar texto blanco en elementos específicos que tienen colores hardcoded */
[data-theme="glass"] .reloj-esquina .hora {
    color: white !important;
}

[data-theme="glass"] .reloj-esquina .fecha {
    color: rgba(255, 255, 255, 0.8) !important;
}


/* Footer index */
footer {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
    text-align: center;
    color: white;
}
footer p { margin: 0 0 10px 0; font-size: 14px; opacity: 0.9; }
footer a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    padding: 8px 15px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    display: inline-block;
    margin-top: 5px;
    transition: all 0.3s;
}
footer a:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); }