/* ============================================================
   SHELL DE TESORERÍA — layout con sidebar institucional + contenido
   Sidebar: paleta institucional marrón (ISSEMYM). Contenido: se conserva
   el estilo Fluent / glassmorphism (acentos azules translúcidos).
   ============================================================ */

:root {
    /* Acento Fluent del proyecto (patrón de canvas) */
    --fl-accent: #7a1f33;
    --fl-accent-soft: #f8eef0;
    --fl-accent-border: #e3c4cb;
    /* Paleta institucional ISSEMYM — usar lo MÍNIMO */
    --inst: #7A1F33;
    /* Gradiente del sidebar (cápsula glass). Cambiar estos 2 tonos para otro color. */
    --sb-top: #1e5b8f;
    --sb-bottom: #0a1a2b;
}

/* ===== Layout general ===== */
.tes-shell {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: #eef1f5;
}

/* ===== Sidebar flotante tipo cápsula con gradiente glass ===== */
.tes-sidebar {
    width: 264px;
    min-width: 264px;
    height: calc(100vh - 24px);
    position: sticky;
    top: 12px;
    margin: 12px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(244, 247, 251, 0.92) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(10, 26, 43, 0.10);
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease;
}

/* Botón de colapsar/expandir (círculo claro) */
.tes-collapse-btn {
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #d7dde5;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    transition: all 0.12s;
}

.tes-collapse-btn:hover { border-color: var(--fl-accent); color: var(--fl-accent); background: var(--fl-accent-soft); }
.tes-collapse-btn i { transition: transform 0.18s ease; }

.tes-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
}

.tes-brand-img {
    height: 26px;
    width: auto;
    flex-shrink: 0;
    user-select: none;
}

/* Separador sutil entre el logo del proveedor y el nombre del sistema */
.tes-sidebar-brand .tes-brand-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1f2a37;
    padding-left: 10px;
    border-left: 1px solid #dfe4ea;
    line-height: 1.1;
}

/* ===== Menú colapsable (cápsula glass claro) ===== */
.tes-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px 12px;
}

.tes-nav::-webkit-scrollbar { width: 7px; }
.tes-nav::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 4px; }
.tes-nav::-webkit-scrollbar-thumb:hover { background: #aab4c0; }

/* Encabezado de sección */
.tes-nav-sec {
    padding: 12px 10px 5px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9aa3af;
}

/* Ítem base (Tablero / heredado / padre) — píldora */
.tes-nav-dash,
.tes-nav-parent {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin-top: 3px;
    border-radius: 14px;
    font-size: 0.84rem;
    line-height: 1.25;
    color: #3a4250;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: all 0.13s;
}

.tes-nav-dash:hover,
.tes-nav-parent:hover { background: rgba(122, 31, 51, 0.07); color: #1f2a37; }

/* Tablero/heredado activo = píldora azul sólida */
.tes-nav-dash.active {
    background: var(--fl-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(122, 31, 51, 0.28);
}

.tes-nav-dash.active .tes-nav-dash-code { color: rgba(255, 255, 255, 0.9); }

/* Módulo activo / abierto = tinte azul claro */
.tes-nav-parent.active,
.tes-nav-parent.open {
    background: var(--fl-accent-soft);
    color: #4a0f1d;
}

.tes-nav-parent.active { box-shadow: inset 3px 0 0 var(--fl-accent); }

/* Icono */
.tes-nav-icon,
.tes-nav-dash-code {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #6b7280;
}

.tes-nav-parent.active .tes-nav-icon,
.tes-nav-parent.open .tes-nav-icon { color: var(--fl-accent); }

.tes-nav-name { flex: 1; min-width: 0; }

/* Chip de código */
.tes-nav-code {
    flex-shrink: 0;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 700;
    color: #9aa3af;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 5px;
    padding: 1px 5px;
}

.tes-nav-parent.active .tes-nav-code { color: var(--fl-accent); background: rgba(122, 31, 51, 0.1); }

.tes-nav-arrow {
    flex-shrink: 0;
    font-size: 0.55rem;
    color: #aab2bd;
    transition: transform 0.15s;
}

.tes-nav-parent.open .tes-nav-arrow { transform: rotate(90deg); color: var(--fl-accent); }

/* Hijos (sub-opciones) */
.tes-nav-children {
    display: none;
    margin: 2px 0 6px 26px;
    padding-left: 10px;
    border-left: 1.5px solid #e1e6ed;
}

.tes-nav-children.open { display: block; }

.tes-nav-child {
    display: block;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 0.78rem;
    color: #5b6472;
    text-decoration: none;
    transition: all 0.1s;
}

.tes-nav-child:hover { color: #1f2a37; background: rgba(122, 31, 51, 0.06); }

.tes-nav-child.active {
    color: var(--fl-accent);
    background: var(--fl-accent-soft);
    font-weight: 600;
}

/* Badge "Listo" dentro del menú claro */
.tes-badge-menu {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #107c10;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
    align-self: center;
}

/* Badges (fondo claro: dashboard) */
.tes-badge-ok {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #107c10;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 1px 7px;
}

.tes-badge-wip {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #c67100;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 10px;
    padding: 1px 7px;
}

/* ===== Pie del sidebar: usuario (estático, glass claro) ===== */
.tes-sidebar-foot {
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tes-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tes-user-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fl-accent-soft);
    border: 1px solid var(--fl-accent-border);
    color: var(--fl-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tes-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.tes-user-info strong {
    font-size: 0.78rem;
    color: #1f2a37;
    font-weight: 700;
}

.tes-user-info span {
    font-size: 0.68rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   MODO COLAPSADO (rail) — iconos circulares + tooltips (atributo title)
   ============================================================ */
.tes-collapsed .tes-sidebar {
    width: 74px;
    min-width: 74px;
}

/* Ocultar todo lo textual */
.tes-collapsed .tes-brand-img,
.tes-collapsed .tes-brand-title,
.tes-collapsed .tes-nav-name,
.tes-collapsed .tes-nav-code,
.tes-collapsed .tes-badge-menu,
.tes-collapsed .tes-nav-arrow,
.tes-collapsed .tes-nav-sec,
.tes-collapsed .tes-nav-children,
.tes-collapsed .tes-user-info {
    display: none !important;
}

/* Brand: solo el botón, centrado */
.tes-collapsed .tes-sidebar-brand {
    justify-content: center;
    gap: 0;
    padding: 14px 0;
}

.tes-collapsed .tes-collapse-btn { margin-left: 0; }
.tes-collapsed .tes-collapse-btn i { transform: rotate(180deg); }

/* Ítems: botón circular centrado; el activo queda como círculo blanco */
.tes-collapsed .tes-nav { padding: 8px 0 14px; }

.tes-collapsed .tes-nav-parent,
.tes-collapsed .tes-nav-dash {
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 46px;
    height: 46px;
    margin: 8px auto;
    border-radius: 50%;
}

.tes-collapsed .tes-nav-icon,
.tes-collapsed .tes-nav-dash-code { width: auto; }

/* Pie: solo avatar centrado */
.tes-collapsed .tes-sidebar-foot { padding: 12px 0; }
.tes-collapsed .tes-user { justify-content: center; }

/* ===== Toasts (notificaciones flotantes) ===== */
.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid #e1e6ed;
    border-left: 4px solid var(--fl-accent);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(10, 26, 43, 0.18);
    padding: 12px 14px;
    animation: toastIn 0.22s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-ico { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; color: var(--fl-accent); }
.toast-body { min-width: 0; flex: 1; }
.toast-body strong { display: block; font-size: 0.85rem; color: #1f2a37; }
.toast-body span { font-size: 0.8rem; color: #5b6472; line-height: 1.35; }
.toast-close {
    background: transparent; border: none; color: #aab2bd; cursor: pointer;
    font-size: 0.95rem; padding: 0 2px; flex-shrink: 0;
}
.toast-close:hover { color: #5b6472; }

.toast-item.toast-exito { border-left-color: #107c10; }
.toast-item.toast-exito .toast-ico { color: #107c10; }
.toast-item.toast-advertencia { border-left-color: #c67100; }
.toast-item.toast-advertencia .toast-ico { color: #c67100; }
.toast-item.toast-error { border-left-color: #d13438; }
.toast-item.toast-error .toast-ico { color: #d13438; }

/* ===== Área de contenido ===== */
.tes-content {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== Dashboard ===== */
.tes-dashboard {
    padding: 22px 28px 40px 28px;
}

.tes-dashboard-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

.tes-dashboard-header i {
    font-size: 2rem;
    color: #7a1f33;
}

.tes-dashboard-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #323130;
    margin: 0;
}

.tes-dashboard-sub {
    font-size: 0.9rem;
    color: #605e5c;
    margin: 0 0 18px 0;
}

.tes-dashboard-area {
    margin-bottom: 22px;
}

.tes-dashboard-area-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #605e5c;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tes-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.tes-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px 16px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.tes-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    border-color: #7a1f33;
}

.tes-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tes-card-icon {
    font-size: 1.5rem;
    color: #7a1f33;
    width: 30px;
    text-align: center;
}

.tes-card-code {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: #605e5c;
    background: #f3f2f1;
    border-radius: 8px;
    padding: 2px 8px;
}

.tes-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #323130;
}

.tes-card-desc {
    font-size: 0.8rem;
    color: #605e5c;
    line-height: 1.35;
    flex: 1;
}

.tes-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2px;
}

.tes-card.tes-card-ok {
    border-color: #a5d6a7;
}

.tes-card.tes-card-ok .tes-card-icon { color: #107c10; }

/* ===== Módulo en construcción (placeholder) ===== */
.tes-modulo {
    padding: 22px 28px 40px 28px;
}

.tes-modulo-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.tes-modulo-head .tes-modulo-icon {
    font-size: 2.2rem;
    color: #7a1f33;
    margin-top: 2px;
}

.tes-modulo-head h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #323130;
    margin: 0 0 2px 0;
}

.tes-modulo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.tes-meta-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: #605e5c;
    background: #f3f2f1;
    border: 1px solid #e1dfdd;
    border-radius: 10px;
    padding: 3px 10px;
}

.tes-meta-chip.code { color: #7a1f33; background: #f8eef0; border-color: #e3c4cb; }

.tes-modulo-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff8ec;
    border: 1px solid #ffcc80;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tes-modulo-banner i {
    font-size: 1.8rem;
    color: #c67100;
}

.tes-modulo-banner .tes-banner-title {
    font-size: 1rem;
    font-weight: 700;
    color: #8a5200;
    margin: 0;
}

.tes-modulo-banner .tes-banner-text {
    font-size: 0.85rem;
    color: #8a5200;
    margin: 0;
}

.tes-modulo-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    padding: 20px 24px;
    max-width: 720px;
}

.tes-modulo-card h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #323130;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tes-modulo-card h2 i { color: #7a1f33; }

.tes-modulo-card p.tes-modulo-desc {
    font-size: 0.9rem;
    color: #605e5c;
    line-height: 1.45;
    margin: 0 0 16px 0;
}

.tes-pasos {
    list-style: none;
    counter-reset: paso;
    margin: 0;
    padding: 0;
}

.tes-pasos li {
    counter-increment: paso;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.88rem;
    color: #323130;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.tes-pasos li:last-child { border-bottom: none; }

.tes-pasos li::before {
    content: counter(paso);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f8eef0;
    color: #7a1f33;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Botón "volver al tablero" ===== */
.tes-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #7a1f33;
    text-decoration: none;
    margin-top: 18px;
}

.tes-back-link:hover { text-decoration: underline; }

/* ============================================================
   TOP BAR (cápsula slim, glass claro)
   ============================================================ */
.tes-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 12px 0 0;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(10, 26, 43, 0.06);
    position: sticky;
    top: 12px;
    z-index: 30;
}

.tes-topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tes-topbar-title > i { font-size: 1.15rem; color: var(--fl-accent); flex-shrink: 0; }

.tes-tb-bc { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; min-width: 0; }
.tes-tb-root { color: #6b7280; font-weight: 600; flex-shrink: 0; }
.tes-tb-sep { color: #c2c8d0; flex-shrink: 0; }
.tes-tb-cur { color: #1f2a37; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tes-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.tes-tb-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #4a0f1d;
    background: var(--fl-accent-soft);
    border: 1px solid var(--fl-accent-border);
    border-radius: 20px;
    padding: 4px 12px;
}

.tes-tb-icon {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e1e6ed;
    background: #fff;
    color: #5b6472;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.12s;
}

.tes-tb-icon:hover { border-color: var(--fl-accent); color: var(--fl-accent); background: var(--fl-accent-soft); }
.tes-tb-logout:hover { border-color: #f1bcbe; color: #d13438; background: #fde7e9; }

.tes-tb-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d13438;
    border: 1.5px solid #fff;
}

.tes-topbar-burger {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e1e6ed;
    background: #fff;
    color: #5b6472;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

/* ===== Responsive (sidebar off-canvas en móvil) ===== */
@media (max-width: 860px) {
    .tes-sidebar {
        position: fixed;
        z-index: 9000;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .tes-shell.tes-sidebar-open .tes-sidebar {
        transform: translateX(0);
    }

    .tes-topbar-burger { display: flex; }
    .tes-tb-period { display: none; }
}