/* TeamsHub3 - Capa visual moderna y segura
   Este archivo se carga por encima de teamsHub.css para no romper la app original. */
:root {
    --th3-bg: #f6f8fc;
    --th3-surface: rgba(255, 255, 255, 0.88);
    --th3-border: rgba(15, 23, 42, 0.08);
    --th3-text: #172033;
    --th3-muted: #64748b;
    --th3-shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
    --th3-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
    --th3-radius: 22px;
    --th3-radius-sm: 14px;
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at top left, rgba(102,126,234,.14), transparent 34rem),
        radial-gradient(circle at 85% 10%, rgba(118,75,162,.12), transparent 28rem),
        var(--th3-bg) !important;
    color: var(--th3-text);
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
    z-index: -1;
}

.sidebar {
    width: 282px !important;
    background: linear-gradient(180deg, #090d1f 0%, #111936 55%, #172554 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 18px 0 50px rgba(15, 23, 42, .24) !important;
}
.sidebar-header { padding-top: 30px !important; }
.sidebar-logo { max-width: 76px !important; border-radius: 22px !important; }
.sidebar-header h2 { font-size: 22px !important; letter-spacing: -.7px; }
.sidebar-header .version {
    color: #dbeafe !important;
    background: rgba(59, 130, 246, .18) !important;
    border-color: rgba(147, 197, 253, .25) !important;
}
.sidebar-menu li a {
    height: 46px !important;
    margin: 3px 14px !important;
    border-radius: 14px !important;
    color: #cbd5e1 !important;
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: rgba(255,255,255,.095) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(2,6,23,.22) !important;
}
.sidebar-divider span { color: #8794b5 !important; }
.sidebar-footer a {
    margin: 12px 14px 18px !important;
    border-radius: 14px !important;
    background: rgba(239,68,68,.09);
}

.main-content {
    margin-left: 282px !important;
    padding: 30px clamp(18px, 3vw, 42px) !important;
}
.top-bar,
.page-header,
.content-card,
.widget-card,
.stat-card,
.project-card,
.task-card,
.meeting-card,
.document-card,
.curso-card,
.salon-card,
.help-card,
.settings-card,
.calendar-container,
.chat-container,
.modal,
.panel,
.card,
.table-container {
    background: var(--th3-surface) !important;
    border: 1px solid var(--th3-border) !important;
    border-radius: var(--th3-radius) !important;
    box-shadow: var(--th3-shadow-soft) !important;
    backdrop-filter: blur(14px);
}
.top-bar,
.page-header {
    min-height: 78px;
    margin-bottom: 28px !important;
}
.page-header h1,
.welcome h1 {
    color: var(--th3-text) !important;
    letter-spacing: -.7px;
}
.page-header h1 i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102,126,234,.14), rgba(118,75,162,.12));
}

.widgets-grid,
.stats-grid,
.cursos-grid,
.salones-grid,
.documents-grid,
.projects-grid,
.tasks-grid,
.meetings-grid {
    gap: 22px !important;
}
.widget-card,
.stat-card,
.project-card,
.task-card,
.meeting-card,
.document-card,
.curso-card,
.salon-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.widget-card:hover,
.stat-card:hover,
.project-card:hover,
.task-card:hover,
.meeting-card:hover,
.document-card:hover,
.curso-card:hover,
.salon-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(102,126,234,.26) !important;
    box-shadow: var(--th3-shadow) !important;
}
.widget-icon,
.user-avatar,
.contact-avatar,
.message-avatar,
.comment-avatar {
    box-shadow: 0 12px 24px rgba(102,126,234,.22);
}

button,
.btn,
.btn-primary,
.btn-save,
.btn-send,
.btn-login,
.btn-add,
a.btn {
    border-radius: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .1px;
}
input,
select,
textarea {
    border-radius: 13px !important;
    border-color: rgba(15,23,42,.12) !important;
    background: rgba(255,255,255,.82) !important;
}
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(102,126,234,.12) !important;
}

table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}
table th { color: var(--th3-muted) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
table td { background: rgba(255,255,255,.74); border-top: 1px solid rgba(15,23,42,.06); border-bottom: 1px solid rgba(15,23,42,.06); }
table td:first-child { border-left: 1px solid rgba(15,23,42,.06); border-radius: 12px 0 0 12px; }
table td:last-child { border-right: 1px solid rgba(15,23,42,.06); border-radius: 0 12px 12px 0; }

.notification-dropdown,
.dropdown-menu {
    border-radius: 18px !important;
    border: 1px solid var(--th3-border) !important;
    box-shadow: var(--th3-shadow) !important;
}

@media (max-width: 900px) {
    .sidebar { width: 78px !important; }
    .sidebar-header h2,
    .sidebar-header .version,
    .sidebar-menu li a span,
    .sidebar-divider,
    .sidebar-footer span { display: none !important; }
    .sidebar-menu li a { justify-content: center; margin-inline: 10px !important; padding: 0 !important; }
    .main-content { margin-left: 78px !important; padding: 18px !important; }
    .widgets-grid,
    .stats-grid { grid-template-columns: 1fr !important; }
    .page-header,
    .top-bar { align-items: flex-start !important; flex-direction: column; gap: 12px; }
}


/* TeamsHub3 v3.0.2 - cambios visibles globales */
.teamshub3-ui {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.teamshub3-ui .sidebar {
    background:
        radial-gradient(circle at 30% 0%, rgba(96,165,250,.28), transparent 15rem),
        linear-gradient(180deg, #050816 0%, #111827 54%, #172554 100%) !important;
}
.teamshub3-ui .sidebar::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}
.teamshub3-ui .main-content::before {
    content: 'TeamsHub3';
    display: block;
    width: fit-content;
    margin: 0 0 14px auto;
    padding: 8px 13px;
    border-radius: 999px;
    color: #4338ca;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.teamshub3-ui .top-bar,
.teamshub3-ui .page-header {
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.90)) !important;
    border: 1px solid rgba(99,102,241,.15) !important;
}
.teamshub3-ui .top-bar::before,
.teamshub3-ui .page-header::before {
    content: '';
    width: 5px;
    align-self: stretch;
    border-radius: 999px;
    background: linear-gradient(180deg, #2563eb, #7c3aed);
    margin-right: 12px;
}
.teamshub3-ui .stat-card,
.teamshub3-ui .widget-card,
.teamshub3-ui .content-card,
.teamshub3-ui .project-card,
.teamshub3-ui .task-card,
.teamshub3-ui .meeting-card,
.teamshub3-ui .document-card,
.teamshub3-ui .curso-card,
.teamshub3-ui .salon-card {
    position: relative;
    overflow: hidden;
}
.teamshub3-ui .stat-card::before,
.teamshub3-ui .widget-card::before,
.teamshub3-ui .content-card::before,
.teamshub3-ui .project-card::before,
.teamshub3-ui .task-card::before,
.teamshub3-ui .meeting-card::before,
.teamshub3-ui .document-card::before,
.teamshub3-ui .curso-card::before,
.teamshub3-ui .salon-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #7c3aed, #06b6d4);
    opacity: .85;
}
.teamshub3-ui .sidebar-header h2::after {
    content: ' Nueva interfaz';
    display: block;
    margin-top: 6px;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.teamshub3-ui .btn-primary,
.teamshub3-ui .btn-save,
.teamshub3-ui .btn-send,
.teamshub3-ui .btn-login,
.teamshub3-ui .btn-add {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 14px 28px rgba(37,99,235,.22) !important;
}
.teamshub3-ui.th3-login-page .login-container {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(18px);
}
.teamshub3-ui.th3-login-page .login-header h1::after {
    content: ' v3 preview';
    color: #2563eb;
    font-size: 14px;
}
@media (max-width: 900px) {
}

/* TeamsHub3 - Notificaciones globales v1.2 */
.th3-notifications {
    position: fixed;
    top: 18px;
    right: 168px;
    z-index: 9998;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.th3-notification-button {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    color: #1f2937;
    box-shadow: 0 18px 40px rgba(15,23,42,.14), inset 0 0 0 1px rgba(148,163,184,.22);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.th3-notification-button:hover {
    transform: translateY(-2px);
    color: var(--color-primary, #667eea);
    box-shadow: 0 22px 46px rgba(15,23,42,.18), inset 0 0 0 1px rgba(102,126,234,.25);
}
.th3-notification-button.has-new { animation: th3BellPulse .75s ease-in-out; }
@keyframes th3BellPulse {
    0%,100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-12deg) scale(1.04); }
    45% { transform: rotate(12deg) scale(1.08); }
    70% { transform: rotate(-7deg) scale(1.03); }
}
.th3-notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(239,68,68,.35);
}
.th3-notification-panel {
    position: absolute;
    top: 60px;
    right: 0;
    width: min(390px, calc(100vw - 28px));
    background: rgba(255,255,255,.98);
    color: #111827;
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(15,23,42,.24);
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.22);
    opacity: 0;
    transform: translateY(-10px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.th3-notification-panel.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.th3-notification-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 18px 12px;
    background: linear-gradient(135deg, rgba(102,126,234,.12), rgba(118,75,162,.10));
}
.th3-notification-panel-header strong { display: block; font-size: 17px; }
.th3-notification-panel-header span { display: block; margin-top: 3px; color: #64748b; font-size: 12px; }
.th3-notification-link {
    border: 0;
    background: transparent;
    color: var(--color-primary, #667eea);
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 0;
}
.th3-notification-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef2f7;
}
.th3-notification-tabs button,
.th3-notification-tabs a {
    border: 0;
    text-decoration: none;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.th3-notification-tabs button.active,
.th3-notification-tabs a:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary, #667eea), var(--color-secondary, #764ba2));
}
.th3-notification-list { max-height: 430px; overflow: auto; padding: 8px; }
.th3-notification-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.th3-notification-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateX(-2px);
}
.th3-notification-item.unread { background: #f8f9ff; border-color: rgba(102,126,234,.16); }
.th3-notification-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: var(--color-primary, #667eea);
}
.th3-notification-item.priority-urgent .th3-notification-icon { background: #fee2e2; color: #dc2626; }
.th3-notification-item.priority-important .th3-notification-icon { background: #fff7ed; color: #ea580c; }
.th3-notification-content { min-width: 0; flex: 1; }
.th3-notification-message {
    display: block;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    color: #1f2937;
}
.th3-notification-meta { display: block; margin-top: 5px; color: #64748b; font-size: 11px; }
.th3-notification-empty { text-align: center; padding: 32px 18px; color: #94a3b8; }
.th3-notification-empty i { font-size: 28px; margin-bottom: 8px; }
.th3-notification-empty p { margin: 0; font-size: 13px; }
.th3-notification-panel-footer { padding: 13px 16px 16px; border-top: 1px solid #eef2f7; text-align: center; }
.th3-notification-panel-footer a { color: var(--color-primary, #667eea); text-decoration: none; font-weight: 800; font-size: 13px; }
.th3-toast {
    position: fixed;
    right: 22px;
    bottom: 24px;
    max-width: min(420px, calc(100vw - 44px));
    background: #111827;
    color: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 24px 60px rgba(15,23,42,.26);
    z-index: 9999;
    font-family: Inter, system-ui, sans-serif;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transform: translateY(10px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.th3-toast.show { opacity: 1; transform: translateY(0); }
.th3-toast i { color: #facc15; margin-top: 2px; }
.th3-toast strong { display: block; font-size: 13px; margin-bottom: 2px; }
.th3-toast span { display: block; font-size: 12px; color: #cbd5e1; }
@media (max-width: 768px) {
    .th3-notifications { top: 12px; right: 118px; }
    .th3-notification-button { width: 44px; height: 44px; border-radius: 14px; }
    .th3-notification-panel { top: 54px; }
}
@media (max-width: 520px) {
    .th3-notifications { right: 92px; }
    .th3-notification-panel { right: -74px; width: min(92vw, 360px); }
}