/* Cabecera y regreso compartidos. No aplicar clases de botones de cada módulo. */
.portal-module .portal-hub-header {
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 24px;
}
.portal-hub-header > :first-child { min-width:0; }
.portal-module .portal-header-heading { display:flex;align-items:center;gap:16px;min-width:0; }
.portal-module .portal-header-nav {
    display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
    grid-column:2;grid-row:1;align-self:start;position:relative;z-index:1;
}
.portal-module .portal-header-actions {
    grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
    align-self:auto;width:100%;position:relative;z-index:1;
}
.portal-module .portal-header-actions:not(:has(> :not([hidden]))) { display:none; }
.portal-module .portal-back {
    box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    flex:0 0 auto;min-height:44px;max-width:100%;margin:0;padding:10px 16px;border:1px solid #e2e8f0;
    border-radius:12px;background:#fff;color:#334155;font:700 13px/20px Outfit,system-ui,sans-serif;
    text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
    box-shadow:0 3px 10px #0f172a0a;transition:background .2s,border-color .2s,box-shadow .2s;
}
.portal-module .portal-back i { font-size:12px;transition:transform .2s ease; }
.portal-module .portal-back:hover { background:#f8fafc;border-color:#cbd5e1;box-shadow:0 5px 14px #0f172a14;color:#0f172a; }
.portal-module .portal-back:hover i { transform:translateX(-3px); }
.portal-module .portal-back:active { background:#eef2ff;box-shadow:none; }
.portal-module .portal-back:focus-visible { outline:3px solid #a5b4fc;outline-offset:3px; }
@media(max-width:760px) {
    .portal-module .portal-hub-header { grid-template-columns:minmax(0,1fr);gap:18px; }
    .portal-module .portal-header-nav { grid-column:1;grid-row:2;width:100%; }
}
@media(prefers-reduced-motion:reduce) {
    .portal-module .portal-back,.portal-module .portal-back i { transition:none; }
    .portal-module .portal-back:hover i { transform:none; }
}

html {
    scrollbar-gutter: stable;
}

body.intranet-page {
    background: #f1f3f6;
    height: 100vh;
    overflow: hidden;
}

.portal-shell {
    display: flex;
    gap: 20px;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.portal-sidebar {
    width: 300px;
    background: var(--cabo-dark);
    border-radius: var(--radius-premium);
    padding: 28px 18px;
    box-shadow: var(--shadow-sidebar);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.portal-logo {
    margin-bottom: 24px;
}

.portal-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}

.portal-nav-item {
    width: 100%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.93rem;
    text-align: left;
    cursor: pointer;
    transition: 0.3s ease;
}

.portal-nav-item i {
    width: 22px;
    text-align: center;
}

.portal-nav-item:hover {
    color: white;
    background: rgba(255,255,255,0.06);
}

.portal-nav-item.active {
    background: var(--cabo-orange);
    color: var(--cabo-dark);
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.2);
}

.portal-nav-item.ti-link {
    margin-top: 10px;
    background: rgba(255,255,255,0.08);
    color: white;
}

.portal-nav-item.ti-link i {
    color: var(--cabo-orange);
}

.portal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.portal-topbar {
    display: grid;
    grid-template-columns: 260px 1fr max-content;
    align-items: center;
    gap: 18px;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cuando hay scroll, el topbar se oculta elegantemente */
body.portal-scrolled .portal-topbar {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* Logo central de la topbar — aparece al salir del home */
.topbar-logo-center {
    position: fixed;
    top: clamp(8px, 1vw, 16px);
    left: clamp(48px, 4.5vw, 60px);
    right: 0;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.88);
    filter: blur(4px);
    transition:
        opacity 0.55s cubic-bezier(0.34, 1.3, 0.64, 1),
        transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1),
        filter 0.45s ease;
    z-index: 50; /* por debajo del contenido */
}

/* Cuando estamos en un módulo (no home) el logo aparece */
body.portal-in-module .topbar-logo-center {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
    pointer-events: none;
}

.topbar-logo-center img {
    pointer-events: auto;
}

/* Se oculta cuando hay scroll (los widgets laterales toman el relevo) */
body.portal-scrolled .topbar-logo-center {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.9);
    filter: blur(4px);
}

.portal-title {
    width: 100%;
    min-height: 72px;
    padding: 14px 28px;
    justify-self: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portal-title span {
    color: var(--cabo-orange);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.portal-title h1 {
    margin: 2px 0 0;
    color: var(--cabo-dark);
    font-size: 1.55rem;
    font-weight: 800;
}

.portal-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    justify-self: end;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    z-index: 500;
}

.portal-search {
    width: 54px;
    max-width: 54px;
    height: 54px;
    position: relative;
    justify-self: center;
    z-index: 8;
    transition: width 0.48s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.portal-search i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #94a3b8;
    font-size: 1.05rem;
    z-index: 2;
    pointer-events: none;
    transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}

.portal-search input {
    width: 100%;
    height: 54px;
    padding: 0;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 18px;
    font-family: var(--font-main);
    font-weight: 600;
    color: transparent;
    caret-color: transparent;
    outline: none;
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
    cursor: pointer;
    opacity: 1;
    transition: padding 0.42s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease, border-color 0.25s ease, box-shadow 0.32s ease, background 0.3s ease;
}

.portal-search input::placeholder {
    color: transparent;
    transition: color 0.22s ease;
}

.portal-search::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.22), transparent 68%);
    opacity: 0;
    transform: scale(0.72);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.portal-search:hover input {
    border-color: #fed7aa;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.portal-search.is-open,
.portal-search:focus-within {
    width: min(640px, calc(100vw - 72px));
    max-width: min(640px, calc(100vw - 72px));
    filter: drop-shadow(0 18px 32px rgba(15, 23, 42, 0.10));
}

.portal-search.is-open::after,
.portal-search:focus-within::after {
    opacity: 1;
    transform: scale(1);
}

.portal-search.is-open i,
.portal-search:focus-within i {
    left: 20px;
    transform: translateY(-50%) scale(1.04);
    color: var(--cabo-orange);
}

.portal-search.is-open input,
.portal-search:focus-within input {
    padding: 0 18px 0 52px;
    color: var(--cabo-dark);
    caret-color: var(--cabo-orange);
    cursor: text;
    border-color: #fed7aa;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
}

.portal-search.is-open input::placeholder,
.portal-search:focus-within input::placeholder {
    color: #64748b;
}

.portal-icon-btn {
    width: 52px;
    height: 52px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: 0.3s ease;
}

.portal-icon-btn:hover {
    transform: translateY(-2px);
    color: var(--cabo-orange);
}

.portal-live-cluster {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.portal-clock-chip,
.portal-weather-chip {
    min-height: 52px;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,0.92);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    display: inline-flex;
    align-items: center;
    font-family: var(--font-main);
}

.portal-clock-chip {
    min-width: 152px;
    padding: 7px 16px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.portal-clock-chip span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
}

.portal-clock-chip strong {
    color: var(--cabo-dark);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.portal-weather-chip {
    width: 258px;
    max-width: 258px;
    padding: 7px 14px 7px 8px;
    gap: 10px;
}

.portal-weather-ico {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.portal-weather-chip.is-cold .portal-weather-ico { background: linear-gradient(135deg, #eff6ff, #bfdbfe); color: #1e40af; }
.portal-weather-chip.is-rainy .portal-weather-ico { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.portal-weather-chip.is-night .portal-weather-ico { background: linear-gradient(135deg, #1e293b, #0f172a); color: #fbbf24; }
.portal-weather-chip.is-storm .portal-weather-ico { background: linear-gradient(135deg, #fef3c7, #f59e0b); color: #78350f; }

.portal-weather-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portal-weather-text strong {
    color: var(--cabo-dark);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
}

.portal-weather-text small {
    max-width: 166px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-session-chip {
    min-width: 0;
}

.portal-session-user,
.portal-session-login,
.portal-session-loading {
    height: 52px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    font-family: var(--font-main);
    cursor: pointer;
    transition: 0.3s ease;
}

.portal-session-user {
    max-width: 230px;
    padding: 0 14px 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cabo-dark);
}

.portal-session-user:hover,
.portal-session-login:hover,
.portal-session-loading:hover {
    transform: translateY(-2px);
    border-color: #fed7aa;
}

.portal-session-avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: #fff7ed;
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.portal-session-text {
    min-width: 0;
    text-align: left;
}

.portal-session-text small,
.portal-session-text strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-session-text small {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-session-text strong {
    color: var(--cabo-dark);
    font-size: 0.9rem;
    font-weight: 800;
}

.portal-session-login {
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
    font-weight: 800;
}

.portal-session-loading {
    width: 52px;
    color: var(--cabo-orange);
}

.portal-clock {
    min-width: 150px;
}

.portal-view {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-card);
    flex: 1;
    padding: 34px;
    overflow-y: auto;
    min-height: 0;
}

.portal-loader {
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cabo-orange);
    font-size: 2.2rem;
}

.portal-module {
    animation: fadeIn 0.35s ease-out;
}

.module-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 22px;
    margin-bottom: 24px;
}

.hero-panel {
    background: var(--cabo-dark);
    color: white;
    border-radius: 26px;
    padding: 32px;
    box-shadow: var(--shadow-sidebar);
    position: relative;
    overflow: hidden;
}

.hero-panel::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -75px;
    bottom: -80px;
    border: 34px solid rgba(245, 158, 11, 0.16);
    border-radius: 50%;
}

.hero-panel .eyebrow,
.section-eyebrow {
    color: var(--cabo-orange);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hero-panel h2 {
    margin: 10px 0 12px;
    font-size: 2.35rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: 0;
}

.hero-panel p {
    margin: 0;
    max-width: 680px;
    color: #cbd5e1;
    line-height: 1.6;
}

.hero-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.quick-metric,
.module-card,
.panel-card,
.document-card,
.course-card,
.employee-card,
.ticket-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.quick-metric {
    padding: 22px;
}

.quick-metric span {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.quick-metric strong {
    color: var(--cabo-dark);
    font-size: 2rem;
    font-weight: 800;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

@media (min-width: 1600px) {
    .systems-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 16px;
    }

    .systems-grid .module-card {
        min-height: 170px;
        padding: 18px 12px;
    }

    .systems-grid .module-card h3 {
        font-size: 0.98rem;
    }

    .systems-grid .module-card p {
        font-size: 0.82rem;
        line-height: 1.35;
    }
}

/* =====================================================================
   REVELADO PREMIUM DEL HUB DE HERRAMIENTAS — al abrir el hub, las
   tarjetas visibles entran escalonadas (una por una, rápido). Lo dispara
   initSystems() en intranet.js tras aplicar permisos (clases hub-reveal /
   hub-reveal-item + variable --reveal-i por tarjeta).
   ===================================================================== */
.systems-grid.hub-reveal .module-card {
    opacity: 0;
    transform: translateY(16px) scale(0.965);
}
.systems-grid.hub-reveal .module-card.hub-reveal-item {
    animation: hubCardIn .46s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--reveal-i, 0) * 42ms);
}
@keyframes hubCardIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.965); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .systems-grid.hub-reveal .module-card,
    .systems-grid.hub-reveal .module-card.hub-reveal-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

.module-card {
    min-height: 150px;
    padding: 20px 16px;
    text-align: center;
    color: var(--cabo-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-family: var(--font-main);
    transition: transform .4s cubic-bezier(.22,1,.36,1),
                box-shadow .4s cubic-bezier(.22,1,.36,1),
                border-color .3s ease,
                background .35s ease;
    position: relative;
    will-change: transform;
}

/* Premium: thin accent bar that grows from the top edge on hover */
.module-card:not(.folder-card)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 58%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--cabo-orange), #fb923c);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    pointer-events: none;
}

.module-card:hover {
    transform: translateY(-6px);
    border-color: var(--cabo-orange);
    box-shadow: 0 22px 40px rgba(245,158,11,.15), 0 8px 18px rgba(15,23,42,.06);
    background: linear-gradient(180deg, #fffdf8 0%, #ffffff 55%);
}

.module-card:hover::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

.module-card .icon-box,
.panel-icon {
    width: 100%;
    height: 64px;
    border-radius: 18px;
    background: transparent;
    border: none;
    color: var(--cabo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 10px;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), color .3s ease;
    overflow: hidden;
}

.module-card .icon-box img {
    max-width: 100%;
    height: 56px;
    object-fit: contain;
    display: block;
    margin: auto;
}

.external-mark img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    display: block;
}

.external-mark.brand-acc img,
.icon-box.brand-acc img { filter: drop-shadow(0 1px 1px rgba(6, 150, 215, 0.18)); }
.icon-box.brand-odoo,
.icon-box.brand-monday,
.icon-box.brand-acc,
.icon-box.brand-microsoft,
.icon-box.brand-cabo,
.icon-box.brand-helpdesk,
.icon-box.brand-ti {
    background: transparent;
    border-color: transparent;
}

.icon-box.brand-odoo img,
.icon-box.brand-monday img,
.icon-box.brand-acc img,
.icon-box.brand-microsoft img,
.icon-box.brand-helpdesk img,
.icon-box.brand-ti img {
    width: 46px;
    height: 46px;
}

.icon-box.brand-ti svg {
    width: 52px;
    height: 52px;
    display: block;
}

.icon-box.brand-cabo img {
    width: 46px;
    height: 30px;
}

.external-mark.brand-cabo img {
    width: 88px;
    height: auto;
}

.module-card:hover .icon-box {
    background: transparent;
    color: var(--cabo-orange);
    border-color: transparent;
    transform: translateY(-3px) scale(1.09);
}

/* Brand icons should keep their original color/background even on hover. */
.module-card:hover .icon-box.brand-odoo,
.module-card:hover .icon-box.brand-monday,
.module-card:hover .icon-box.brand-acc,
.module-card:hover .icon-box.brand-microsoft,
.module-card:hover .icon-box.brand-cabo,
.module-card:hover .icon-box.brand-helpdesk,
.module-card:hover .icon-box.brand-ti {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.icon-box.brand-suggestion {
    color: #d97706;
    background: transparent;
    border-color: transparent;
}

.icon-box.brand-nominas {
    color: #111827;
    background: transparent;
    border-color: transparent;
}

.icon-box.brand-tableros {
    background: transparent;
    border-color: transparent;
}
.icon-box.brand-tableros i {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 45%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.module-card:hover .icon-box.brand-tableros {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.icon-box.brand-nominas i {
    font-size: 2rem;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.12));
}

.module-card h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
}

.module-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.4;
    font-size: 0.8rem;
}

.module-card .module-arrow {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #ea580c;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: .03em;
    transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.module-card .module-arrow i {
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.module-card:hover .module-arrow {
    background: linear-gradient(135deg, var(--cabo-orange), #fb923c);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(245,158,11,.32);
}

.module-card:hover .module-arrow i {
    transform: translateX(4px);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.section-header h2,
.section-header h3 {
    margin: 4px 0 0;
    color: var(--cabo-dark);
    font-size: 1.55rem;
    font-weight: 800;
}

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

.panel-card {
    padding: 22px;
}

.panel-card h3 {
    margin: 0 0 8px;
    color: var(--cabo-dark);
    font-weight: 800;
}

.panel-card p,
.panel-card li {
    color: #64748b;
    line-height: 1.55;
}

.panel-card ul,
.panel-card ol {
    padding-left: 20px;
    margin: 10px 0 0;
}

.news-list {
    display: grid;
    gap: 16px;
}

.news-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 5px solid var(--cabo-orange);
    border-radius: 18px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    transition: 0.25s ease;
}

.news-item-clickable {
    cursor: pointer;
}

.news-item-clickable:hover {
    transform: translateY(-2px);
    border-left-color: var(--cabo-dark);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.news-meta {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    flex-wrap: wrap;
}

.news-meta i {
    color: var(--cabo-orange);
    margin-right: 4px;
}

.news-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff7ed;
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 1px solid #fed7aa;
}

/* Detalle de anuncio (modal) */
.anu-detail-popup { border-radius: 24px !important; padding: 14px !important; }
.anu-detail { font-family: var(--font-main); text-align: left; }
.anu-detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.anu-detail h2 { color: var(--cabo-dark); font-weight: 800; font-size: 1.5rem; margin: 0 0 10px; }
.anu-detail-meta { display: flex; gap: 16px; color: #94a3b8; font-weight: 600; margin-bottom: 18px; flex-wrap: wrap; }
.anu-detail-meta i { color: var(--cabo-orange); margin-right: 6px; }
.anu-detail-body { color: var(--cabo-dark); font-size: 1rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }

.anu-hero-actions { position:absolute; top:18px; right:18px; display:flex; gap:10px; align-items:center; z-index:3; }
.anu-hero-btn { min-height:44px; border-radius:14px; border:0; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-main); font-size:.86rem; font-weight:900; cursor:pointer; transition:transform .24s ease, box-shadow .24s ease, background .24s ease; }
.anu-hero-btn:hover { transform:translateY(-2px); }
.anu-hero-btn-soft { background:rgba(255,255,255,.13); color:white; border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(12px); }
.anu-hero-btn-soft:hover { background:rgba(255,255,255,.23); }
.anu-hero-btn-primary { background:var(--cabo-orange); color:var(--cabo-dark); box-shadow:0 14px 28px rgba(245,158,11,.30); }
.anu-new-wrapper { position:relative; }
.anu-new-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:258px; padding:8px; border-radius:18px; background:rgba(255,255,255,.96); border:1px solid rgba(226,232,240,.9); box-shadow:0 24px 54px rgba(15,23,42,.24); backdrop-filter:blur(16px); opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1); z-index:120; }
.anu-new-menu.is-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.anu-new-menu button { width:100%; border:0 !important; background:transparent !important; border-radius:14px !important; padding:12px !important; display:grid !important; grid-template-columns:40px 1fr; gap:11px !important; align-items:center; text-align:left !important; cursor:pointer; color:var(--cabo-dark) !important; font-family:var(--font-main) !important; }
.anu-new-menu button:hover { background:#fff7ed !important; }
.anu-new-menu button > div:first-child { width:40px !important; height:40px !important; border-radius:13px !important; background:#fff7ed !important; display:grid !important; place-items:center !important; }
.anu-new-menu button:nth-child(2) > div:first-child { background:#eff6ff !important; }
.anu-new-menu div div { font-weight:900; }
.anu-new-menu small { color:#94a3b8 !important; font-size:.72rem !important; font-weight:800 !important; }
.announcements-widget-grid { display:grid; grid-template-columns:minmax(290px,1.35fr) minmax(170px,.72fr) minmax(420px,2.55fr); gap:14px; margin-bottom:24px; align-items:stretch; }
.announcements-widget-grid > div:has(#anu-employee-widget) { display:none !important; }
.anu-important-panel { min-height:188px; background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-radius:20px; padding:20px 22px; box-shadow:0 18px 45px rgba(15,23,42,.20); position:relative; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .26s ease, box-shadow .26s ease; }
.anu-important-panel:hover { transform:translateY(-2px); box-shadow:0 24px 58px rgba(15,23,42,.26); }
.anu-important-panel > div[style*="position:absolute"] { display:none; }
.anu-important-panel::before, .anu-important-panel::after { content:""; position:absolute; border-radius:999px; pointer-events:none; }
.anu-important-panel::before { top:-36px; right:-24px; width:150px; height:150px; background:rgba(245,158,11,.13); }
.anu-important-panel::after { bottom:-42px; left:18%; width:180px; height:180px; background:rgba(59,130,246,.10); filter:blur(6px); }
.anu-mural-btn { background:rgba(245,158,11,.18) !important; border:1px solid rgba(245,158,11,.32) !important; color:#fbbf24 !important; font-size:.68rem !important; font-weight:900 !important; padding:7px 12px !important; border-radius:11px !important; cursor:pointer; font-family:inherit; flex-shrink:0; display:inline-flex; align-items:center; gap:6px; }
.anu-events-preview { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:14px 18px; flex:1; position:relative; z-index:1; }
@media (max-width: 640px)  { .anu-events-preview { grid-template-columns:1fr; } }

/* Pizarron XL — version grande */
.anu-important-panel-xl { min-height: 420px; padding: 28px !important; }
.anu-important-panel-xl .anu-events-preview-xl { grid-template-columns: repeat(5, 1fr); gap: 20px 10px; align-content: start; max-height: 420px; overflow-y: auto; padding: 12px 2px 10px !important; scrollbar-width: thin; scrollbar-color: rgba(139,94,52,0.55) rgba(0,0,0,0.18); }
.anu-important-panel-xl .anu-events-preview-xl::-webkit-scrollbar { width: 5px; }
.anu-important-panel-xl .anu-events-preview-xl::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); border-radius: 3px; }
.anu-important-panel-xl .anu-events-preview-xl::-webkit-scrollbar-thumb { background: rgba(139,94,52,0.75); border-radius: 3px; }

/* Pizarron XL — junto a sidebar de cumple/clima — 5 columnas */
.anu-important-panel-wide { min-height: 460px; padding: 28px 28px 30px !important; }
.anu-important-panel-wide .anu-events-preview-xl { grid-template-columns: repeat(5, 1fr); gap: 20px 10px; align-content: start; max-height: 430px; overflow-y: auto; padding: 12px 2px 10px !important; scrollbar-width: thin; scrollbar-color: rgba(139,94,52,0.55) rgba(0,0,0,0.18); }
.anu-important-panel-wide .anu-events-preview-xl::-webkit-scrollbar { width: 6px; }
.anu-important-panel-wide .anu-events-preview-xl::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); border-radius: 3px; }
.anu-important-panel-wide .anu-events-preview-xl::-webkit-scrollbar-thumb { background: rgba(139,94,52,0.75); border-radius: 3px; }
.anu-important-panel-wide .anu-events-preview-xl::-webkit-scrollbar-thumb:hover { background: rgba(139,94,52,1.00); }

/* Filtro mes/año en la franja del tablero */
.anu-cork-filter { display:flex; gap:6px; align-items:center; }
.anu-cork-filter select { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:white; font-family:'Outfit',sans-serif; font-size:0.72rem; font-weight:700; padding:5px 28px 5px 10px; border-radius:9px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; transition:.15s; }
.anu-cork-filter select:hover { background-color:rgba(255,255,255,0.20); border-color:rgba(255,255,255,0.40); }
.anu-cork-filter select:focus { background-color:rgba(255,255,255,0.22); border-color:rgba(245,158,11,0.70); box-shadow:0 0 0 2px rgba(245,158,11,0.20); }
.anu-cork-filter select option { background:#1e293b; color:white; font-weight:600; }

@media (max-width: 1280px) {
    .anu-important-panel-wide .anu-events-preview-xl { grid-template-columns: repeat(4, 1fr); }
    .anu-important-panel-xl .anu-events-preview-xl { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
    .anu-top-row { grid-template-columns: 1fr !important; }
    .anu-main-row { grid-template-columns: 1fr !important; }
    .anu-side-stack { flex-direction: row !important; }
    .anu-side-stack > * { flex: 1; }
    .anu-important-panel-wide .anu-events-preview-xl,
    .anu-important-panel-xl .anu-events-preview-xl { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 640px) {
    .anu-side-stack { flex-direction: column !important; }
    .anu-important-panel-xl .anu-events-preview-xl,
    .anu-important-panel-wide .anu-events-preview-xl { grid-template-columns: repeat(3, 1fr); max-height: 340px; }
}
.anu-event-card { border:1px solid rgba(226,232,240,.82); background:rgba(255,255,255,.94); border-radius:17px; padding:11px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:left; font-family:var(--font-main); cursor:pointer; transition:.22s ease; }
.anu-important-panel .anu-event-card { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.13); color:white; backdrop-filter:blur(10px); }
.anu-event-card:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(15,23,42,.14); }
.anu-event-card.is-today { border-color:rgba(245,158,11,.64); box-shadow:0 0 0 3px rgba(245,158,11,.14); }
.anu-event-date { width:42px; height:48px; border-radius:14px; background:#fff7ed; color:#c2410c; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.anu-event-date strong { font-size:1rem; font-weight:900; }
.anu-event-date small { margin-top:4px; font-size:.62rem; font-weight:900; text-transform:uppercase; }
.anu-event-body { min-width:0; display:flex; gap:9px; align-items:center; }
.anu-event-body i { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; }
.anu-event-photo { width:38px; height:38px; border-radius:13px; object-fit:cover; flex:0 0 auto; box-shadow:0 8px 18px rgba(15,23,42,.16); }
.anu-event-body b, .anu-event-body small { display:block; overflow:hidden; text-overflow:ellipsis; }
.anu-event-body b { color:var(--cabo-dark); font-size:.82rem; font-weight:900; white-space:nowrap; }
.anu-important-panel .anu-event-body b { color:white; }
.anu-event-body small { color:#94a3b8; font-size:.68rem; font-weight:800; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.anu-event-card em { border-radius:999px; background:#f97316; color:white; padding:4px 8px; font-size:.58rem; font-style:normal; font-weight:900; text-transform:uppercase; }
.anu-event-empty { grid-column:1/-1; min-height:110px; border:1px dashed rgba(255,255,255,.20); border-radius:17px; color:rgba(255,255,255,.70); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:18px; }
.anu-event-empty.light { background:#f8fafc; color:#64748b; border-color:#cbd5e1; }
.anu-event-empty i { color:var(--cabo-orange); font-size:1.35rem; }
.anu-form-popup, .anu-date-popup { border-radius:26px !important; padding:18px !important; }
.anu-swal-top { z-index:2000000 !important; }

/* ── SweetAlert2: siempre encima de todos los elementos del portal ─── */
.swal2-container { z-index: 2000000 !important; }
/* Icon picker para fechas importantes y categorías de anuncios */
.anu-icon-picker { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:7px; }
.anu-cat-picker  { grid-template-columns:repeat(auto-fill, minmax(72px, 1fr)) !important; }
.anu-icon-opt { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px 9px; border:1.5px solid #e2e8f0; border-radius:13px; cursor:pointer; transition:.18s; background:white; font-size:0.68rem; font-weight:700; color:#94a3b8; user-select:none; }
.anu-icon-opt i { font-size:1.35rem; color:var(--ico-color, #94a3b8); transition:.18s; }
.anu-icon-opt span { text-align:center; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.anu-icon-opt:hover { border-color:var(--ico-color, #94a3b8); background:#f8fafc; color:#475569; }
.anu-icon-opt.selected { border-color:var(--ico-color, #0f172a); background:#f0f4ff; color:#0f172a; box-shadow:0 0 0 3px rgba(15,23,42,0.07); }
.anu-icon-opt.selected i { color:var(--ico-color, #0f172a); }
/* Settings gate */
.anu-settings-card { display:flex; gap:14px; align-items:center; padding:14px 16px; border:1.5px solid #e2e8f0; border-radius:16px; cursor:pointer; background:white; transition:.18s; width:100%; text-align:left; font-family:'Outfit',sans-serif; }
.anu-settings-card:hover { border-color:#fed7aa; background:#fff7ed; transform:translateY(-1px); }
.anu-settings-card-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem; color:white; }
.anu-settings-card strong { display:block; font-weight:800; font-size:0.9rem; color:#0f172a; }
.anu-settings-card small { display:block; font-weight:600; font-size:0.75rem; color:#94a3b8; margin-top:2px; }
.anu-form-grid { text-align:left; font-family:var(--font-main); display:grid; grid-template-columns:1.2fr .8fr; gap:13px; }
.anu-form-grid label span { display:block; color:#64748b; font-size:.72rem; font-weight:900; text-transform:uppercase; margin-bottom:6px; }
.anu-form-grid input, .anu-form-grid select, .anu-form-grid textarea { width:100%; border:1px solid #e2e8f0; border-radius:15px; background:#f8fafc; color:var(--cabo-dark); font-family:inherit; font-weight:800; padding:12px 14px; outline:none; box-sizing:border-box; }
.anu-form-grid textarea { min-height:120px; resize:vertical; }
.anu-photo-field { border:2px dashed #cbd5e1; border-radius:18px; background:#f8fafc; padding:13px; display:grid; grid-template-columns:78px 1fr; gap:13px; align-items:center; cursor:pointer; transition:.22s ease; }
.anu-photo-field:hover, .anu-photo-field.is-dragover { border-color:var(--cabo-orange); background:#fff7ed; transform:translateY(-1px); }
.anu-photo-field input { display:none; }
.anu-photo-preview { width:78px; height:64px; border-radius:16px; background:white; border:1px solid #e2e8f0; display:grid; place-items:center; overflow:hidden; color:var(--cabo-orange); font-size:1.35rem; }
.anu-photo-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.anu-photo-field strong { display:block; color:var(--cabo-dark); font-weight:900; font-size:.88rem; }
.anu-photo-field small { display:block; color:#94a3b8; font-weight:800; font-size:.74rem; margin-top:2px; }
.anu-date-detail { font-family:var(--font-main); text-align:center; padding:12px 8px 4px; }
.anu-date-detail-photo { width:100%; max-height:340px; object-fit:contain; background:#f1f5f9; border-radius:22px; margin:0 0 16px; box-shadow:0 16px 34px rgba(15,23,42,.12); }
.anu-date-detail-icon { width:76px; height:76px; border-radius:24px; display:grid; place-items:center; margin:0 auto 14px; font-size:2rem; }
.anu-date-detail p { margin:0; color:var(--cabo-orange); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1.2px; }
.anu-date-detail h2 { margin:5px 0 10px; color:var(--cabo-dark); font-size:1.7rem; font-weight:900; }
.anu-date-detail strong { display:inline-flex; align-items:center; gap:7px; color:#475569; font-size:.94rem; margin-bottom:14px; }
.anu-date-detail div:not(.anu-date-detail-icon):not(.anu-date-actions) { color:#475569; line-height:1.6; font-weight:700; }
.anu-date-detail small { display:block; margin-top:12px; color:#94a3b8; font-weight:800; }
.anu-date-actions { margin-top:18px; display:flex; gap:10px; justify-content:center; }
.anu-date-actions button { border:0; border-radius:13px; padding:11px 15px; cursor:pointer; font-family:inherit; font-weight:900; }
.anu-date-actions button:first-child { background:#0f172a; color:white; }
.anu-date-actions button:last-child { background:#fee2e2; color:#dc2626; }
.mural-day { min-height:58px; border:1px solid #e2e8f0; border-radius:12px; background:white; color:var(--cabo-dark); cursor:default; display:flex; flex-direction:column; gap:3px; align-items:flex-start; justify-content:flex-start; padding:8px; font-family:var(--font-main); }
.mural-day:not(.is-empty) { cursor:pointer; transition:.2s ease; }
.mural-day:not(.is-empty):hover { transform:translateY(-2px); border-color:var(--cabo-orange); box-shadow:0 12px 24px rgba(15,23,42,.08); }
.mural-day.is-empty { background:transparent; border:0; }
.mural-day.has-events { background:#fff7ed; border-color:#fed7aa; }
.mural-day.is-today { box-shadow:inset 0 0 0 2px var(--cabo-orange); }
.mural-day span { width:7px; height:7px; border-radius:999px; display:inline-block; margin-right:3px; }
.mural-day-detail { font-family:var(--font-main); text-align:left; }
.mural-day-detail p { margin:0; color:var(--cabo-orange); font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1.2px; }
.mural-day-detail h2 { margin:5px 0 16px; color:var(--cabo-dark); font-size:1.65rem; font-weight:900; text-transform:capitalize; }
.mural-day-events { display:grid; gap:10px; max-height:420px; overflow:auto; padding-right:4px; }
.mural-day-detail #mural-add-day-event { margin-top:16px; width:100%; border:0; border-radius:15px; min-height:46px; background:var(--cabo-orange); color:var(--cabo-dark); font-family:inherit; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }

.news-item h3 {
    margin: 0 0 8px;
    color: var(--cabo-dark);
    font-size: 1.05rem;
}

.news-item p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag.orange {
    background: #fff7ed;
    color: #b45309;
}

.tag.green {
    background: #ecfdf5;
    color: #047857;
}

.tag.blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.tag.red {
    background: #fef2f2;
    color: #b91c1c;
}

.toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

.toolbar input,
.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
    height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: white;
    color: var(--cabo-dark);
    font-family: var(--font-main);
    font-weight: 600;
    padding: 0 14px;
    outline: none;
    box-sizing: border-box;
}

.toolbar input {
    min-width: 260px;
}

.btn-primary,
.btn-secondary,
.btn-soft {
    border: none;
    border-radius: 14px;
    min-height: 44px;
    padding: 0 18px;
    font-family: var(--font-main);
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn-primary {
    background: var(--cabo-dark);
    color: white;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.btn-secondary {
    background: var(--cabo-orange);
    color: var(--cabo-dark);
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.18);
}

.btn-soft {
    background: white;
    color: var(--cabo-dark);
    border: 1px solid #e2e8f0;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-soft:hover {
    transform: translateY(-2px);
}

/* ========= Buzon de sugerencias ========= */
.sug-swal-form {
    font-family: var(--font-main);
    text-align: left;
    display: grid;
    gap: 14px;
}

.sug-swal-grid {
    display: grid;
    grid-template-columns: 1fr 170px 150px;
    gap: 12px;
}

.sug-swal-field label {
    display: block;
    margin-bottom: 6px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sug-swal-field input,
.sug-swal-field select,
.sug-swal-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    color: var(--cabo-dark);
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.95rem;
    outline: none;
    padding: 13px 15px;
    transition: 0.22s ease;
}

.sug-swal-field textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.45;
}

.sug-swal-field input:focus,
.sug-swal-field select:focus,
.sug-swal-field textarea:focus {
    border-color: rgba(245, 158, 11, 0.55);
    background: white;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.10);
}

.sug-dropzone {
    min-height: 118px;
    border: 2px dashed #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: 0.24s ease;
    padding: 18px;
}

.sug-dropzone:hover,
.sug-dropzone.is-dragover {
    border-color: var(--cabo-orange);
    background: #fff7ed;
    color: #b45309;
    transform: translateY(-1px);
}

.sug-dropzone i {
    display: block;
    font-size: 2rem;
    color: var(--cabo-orange);
    margin-bottom: 8px;
}

.sug-dropzone strong {
    display: block;
    color: var(--cabo-dark);
    font-size: 0.98rem;
    font-weight: 900;
}

.sug-dropzone span {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 800;
}

.sug-file-list,
.sug-history-list,
.sug-attachment-list {
    display: grid;
    gap: 8px;
}

.sug-file-item,
.sug-history-item,
.sug-attachment-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: white;
    padding: 10px 12px;
}

.sug-file-item i,
.sug-history-item i,
.sug-attachment-item i {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: #fff7ed;
    color: var(--cabo-orange);
}

.sug-file-item strong,
.sug-history-item strong,
.sug-attachment-item strong {
    display: block;
    color: var(--cabo-dark);
    font-size: 0.86rem;
    font-weight: 900;
}

.sug-file-item small,
.sug-history-item small,
.sug-attachment-item small {
    display: block;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 800;
}

.sug-remove-file,
.sug-open-file,
.sug-open-detail {
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    width: 34px;
    height: 34px;
    cursor: pointer;
    transition: 0.2s ease;
}

.sug-remove-file:hover {
    background: #fee2e2;
    color: #dc2626;
}

.sug-open-file:hover,
.sug-open-detail:hover {
    background: #0f172a;
    color: white;
}

.sug-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.sug-status-pill.nueva { background: #fff7ed; color: #c2410c; }
.sug-status-pill.en-revision { background: #dbeafe; color: #1d4ed8; }
.sug-status-pill.aceptada,
.sug-status-pill.implementada { background: #dcfce7; color: #166534; }
.sug-status-pill.rechazada { background: #fee2e2; color: #991b1b; }
.sug-status-pill.planeada { background: #f3e8ff; color: #6d28d9; }

@media (max-width: 760px) {
    .sug-swal-grid { grid-template-columns: 1fr; }
}

.employee-grid,
.document-grid,
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.employee-card,
.document-card,
.course-card {
    padding: 20px;
}

.employee-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.employee-avatar {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: #fff7ed;
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex: 0 0 auto;
}

.employee-card h3,
.document-card h3,
.course-card h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--cabo-dark);
    font-weight: 800;
}

.employee-card p,
.document-card p,
.course-card p {
    margin: 0 0 10px;
    color: #64748b;
    line-height: 1.45;
    font-size: 0.9rem;
}

.info-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
    margin-top: 7px;
}

.info-line i {
    color: #94a3b8;
    width: 16px;
}

.doc-icon,
.course-thumb {
    width: 100%;
    height: 120px;
    border-radius: 18px;
    background: #f8fafc;
    color: var(--cabo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 16px;
    border: 1px solid #f1f5f9;
}

.course-thumb {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #f59e0b 160%);
    color: white;
}

.timeline {
    display: grid;
    gap: 14px;
}

.timeline-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
}

.timeline-number {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--cabo-dark);
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.external-panel {
    min-height: 440px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 24px;
    align-items: center;
}

.external-mark {
    width: 120px;
    height: 120px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: var(--cabo-dark);
    font-size: 3.2rem;
    border: 1px solid #e2e8f0;
}

.external-panel h2 {
    margin: 18px 0 12px;
    font-size: 2.2rem;
    color: var(--cabo-dark);
}

.external-panel p {
    color: #64748b;
    line-height: 1.6;
    max-width: 620px;
}

.external-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.external-actions a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.helpdesk-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.helpdesk-kpi {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}

.helpdesk-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.07);
}

.helpdesk-kpi span {
    color: #64748b;
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.helpdesk-kpi strong {
    color: var(--cabo-dark);
    font-size: 1.8rem;
    font-weight: 800;
}

.helpdesk-layout {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 18px;
}

.ticket-form-panel {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 24px;
    align-self: start;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.form-grid textarea {
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}

.ticket-intelligence {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 14px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ticket-list {
    display: grid;
    gap: 12px;
}

.ticket-card {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
}

.ticket-card h3 {
    margin: 0 0 7px;
    color: var(--cabo-dark);
    font-size: 1rem;
    font-weight: 800;
}

.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ticket-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 150px;
}

.ticket-actions button,
.ticket-actions select {
    height: 38px;
    border-radius: 11px;
    border: 1px solid #e2e8f0;
    background: white;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
}

.empty-state {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    background: white;
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
}

.empty-state i {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

/* ========= Tabs y vistas del directorio ========= */
.dir-tabs {
    display: flex;
    gap: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 6px;
    margin-bottom: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    width: fit-content;
}

.dir-tab {
    border: none;
    background: transparent;
    color: #64748b;
    font-family: var(--font-main);
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: 0.2s ease;
}

.dir-tab:hover { color: var(--cabo-dark); }

.dir-tab.active {
    background: var(--cabo-dark);
    color: white;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.dir-pane[hidden] { display: none !important; }

.dir-hint {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
}

.employee-grid .employee-card {
    cursor: pointer;
    transition: 0.25s ease;
}

.employee-grid .employee-card:hover {
    transform: translateY(-3px);
    border-color: var(--cabo-orange);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* ========= Organigrama — OrgChart Engine ========= */
/* .org-tree ya no se usa como contenedor externo; el engine inyecta su propio CSS.
   Mantenemos los estilos de las tarjetas y conectores que el engine reutiliza. */

#org-chart {
    /* Neutralizar padding/borde del antiguo contenedor */
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
}

.org-canvas {
    display: flex;
    justify-content: flex-start;
    gap: 60px;
    flex-wrap: nowrap;
    min-width: max-content;
    padding: 0;
    align-items: flex-start;
}

.org-branch {
    text-align: center;
    position: relative;
    overflow: visible;
}

.org-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--cabo-dark);
    border-radius: 16px;
    padding: 16px 18px;
    min-width: 185px;
    max-width: 220px;
    display: inline-block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s ease;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    text-align: center;
}

.org-card:hover {
    transform: translateY(-3px);
    border-top-color: var(--cabo-orange);
    box-shadow: 0 14px 26px rgba(0,0,0,0.08);
}

.org-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff7ed;
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin: 0 auto 8px;
    border: 2px solid #fed7aa;
}

.org-name {
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 0.95rem;
}

.org-role {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
}

.org-dept {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
}

.org-children {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 28px;
    position: relative;
}

.org-children::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    width: 2px;
    height: 26px;
    background: #cbd5e1;
}

.org-children > li {
    position: relative;
    padding-top: 26px;
    flex: 0 0 auto;
}

.org-children > li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 26px;
    background: #cbd5e1;
}

.org-children > li:not(:only-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #cbd5e1;
}

.org-children > li:first-child::after {
    left: 50%;
}

.org-children > li:last-child::after {
    right: 50%;
}

/* ========= Organigrama premium - vista intranet ========= */
.org-overview {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.org-overview-hero {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(360px, 1.7fr);
    gap: 16px;
    align-items: stretch;
    padding: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 0%, rgba(245, 158, 11, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.90));
    border: 1px solid rgba(226,232,240,0.95);
    box-shadow: 0 24px 70px rgba(15,23,42,0.08);
}

.org-overview-hero.org-overview-clean {
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    padding: 18px 20px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 4% 10%, rgba(245,158,11,0.14), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(248,250,252,0.74));
}

.org-overview-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
}

.org-overview-copy span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cabo-orange);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.org-overview-copy h3 {
    margin: 0;
    color: var(--cabo-dark);
    font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    font-weight: 900;
    letter-spacing: 0;
}

.org-overview-copy p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.5;
    max-width: 620px;
}

.org-overview-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.org-overview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.org-flow-action {
    min-height: 46px;
    border: 1px solid rgba(226,232,240,0.95);
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    color: var(--cabo-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15,23,42,0.06);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.org-flow-action:hover {
    transform: translateY(-2px);
    border-color: rgba(245,158,11,0.45);
    box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}

.org-flow-action.primary {
    background: var(--cabo-dark);
    border-color: var(--cabo-dark);
    color: white;
}

.org-flow-action i {
    color: var(--cabo-orange);
}

.org-flow-action.primary i {
    color: white;
}

.org-kpi-card {
    min-height: 112px;
    border: 1px solid rgba(226,232,240,0.9);
    border-radius: 22px;
    background: #fff;
    color: var(--cabo-dark);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 14px;
    text-align: left;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.org-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245,158,11,0.50);
    box-shadow: 0 18px 42px rgba(15,23,42,0.10);
}

.org-kpi-card strong {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.org-kpi-card span {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.22;
}

.org-kpi-card.attention {
    border-color: rgba(245,158,11,0.46);
    background: linear-gradient(180deg, #fff7ed, #fff);
}

.org-overview-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.org-overview-strip.org-overview-strip-clean {
    margin-top: -4px;
}

.org-overview-strip > div {
    display: grid;
    grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(226,232,240,0.86);
}

.org-overview-strip i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff7ed;
    color: var(--cabo-orange);
}

.org-overview-strip strong {
    color: var(--cabo-dark);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.org-overview-strip span {
    min-width: 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .org-overview-hero,
    .org-overview-strip {
        grid-template-columns: 1fr;
    }
    .org-overview-actions {
        justify-content: stretch;
    }
    .org-flow-action {
        flex: 1 1 180px;
    }
    .org-overview-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .org-overview-kpis {
        grid-template-columns: 1fr;
    }
    .org-overview-strip > div {
        grid-template-columns: 34px 1fr;
    }
    .org-overview-strip span {
        grid-column: 2;
    }
}

/* ========= Mapa de oficinas ========= */
.office-map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.office-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.office-card.obra { border-top: 4px solid #f97316; }
.office-card.corporativo { border-top: 4px solid #0ea5e9; }

.office-card header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.office-card header h3 {
    margin: 0;
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1.05rem;
}

.office-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: var(--cabo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.office-card.obra .office-icon { color: #f97316; background: #fff7ed; border-color: #fed7aa; }
.office-card.corporativo .office-icon { color: #0ea5e9; background: #ecfeff; border-color: #bae6fd; }

.office-type {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.office-count {
    margin-left: auto;
    background: #f1f5f9;
    color: var(--cabo-dark);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
}

.office-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.office-people li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    cursor: pointer;
    transition: 0.2s ease;
}

.office-people li:hover {
    background: white;
    border-color: var(--cabo-orange);
    transform: translateX(2px);
}

.office-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0f172a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.office-people li > div {
    flex: 1;
    min-width: 0;
}

.office-people li strong {
    display: block;
    color: var(--cabo-dark);
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.office-people li span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.office-people li i {
    color: #94a3b8;
}

/* ========= Folder card (carpetas en Acceso a Sistemas) ========= */
.module-card.folder-card {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 60%);
    border: 1px solid #fed7aa;
    padding-top: 32px;
    position: relative;
}

.module-card.folder-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 24px;
    width: 90px;
    height: 18px;
    background: linear-gradient(180deg, var(--cabo-orange), #fb923c);
    border-radius: 8px 8px 0 0;
}

.module-card.folder-card .folder-tab {
    display: none;
}

.module-card.folder-card:hover {
    border-color: var(--cabo-orange);
    transform: translateY(-6px);
    box-shadow: 0 18px 32px rgba(245, 158, 11, 0.18);
}

.module-card.folder-card .icon-box {
    background: transparent;
    color: #0078d4;
    border-color: transparent;
}

.portal-nav-subitem.folder-subitem i {
    color: var(--cabo-orange);
}

/* ========= Microsoft 365 ========= */
.ms365-intro {
    color: #64748b;
    font-weight: 600;
    margin: 0 0 22px;
    line-height: 1.55;
}

.ms365-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.ms365-tile {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px 18px;
    text-decoration: none;
    color: var(--cabo-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.ms365-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.10);
    border-color: transparent;
}

.ms365-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.ms365-icon img,
.ms365-icon svg {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.ms365-tile:hover .ms365-icon {
    background: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: transparent;
}

.ms365-tile h3 {
    margin: 0 0 4px;
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1rem;
}

.ms365-tile p {
    margin: 0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ========= Documentos: subcategorias ========= */
.docs-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.docs-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    text-align: left;
    transition: 0.25s ease;
    color: #64748b;
    font-family: var(--font-main);
}

.docs-tab i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: var(--cabo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.docs-tab span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.docs-tab strong {
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 0.92rem;
}

.docs-tab em {
    color: #94a3b8;
    font-style: normal;
    font-weight: 700;
    font-size: 0.78rem;
    margin-top: 2px;
}

.docs-tab:hover {
    border-color: var(--cabo-orange);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.docs-tab.active {
    border-color: var(--cabo-orange);
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.18);
}

.docs-tab.active i {
    background: var(--cabo-orange);
    color: white;
    border-color: var(--cabo-orange);
}

.btn-primary.is-locked,
button.btn-primary[disabled] {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.85;
}

/* ========= Pantalla de "Sin permisos" ========= */
.permission-gate {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    max-width: 540px;
    margin: 30px auto;
}

.permission-gate .gate-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff7ed;
    color: var(--cabo-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 4px solid #fed7aa;
}

.permission-gate h2 {
    margin: 0 0 8px;
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1.4rem;
}

.permission-gate p {
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* ========= Modal de contacto ========= */
.contact-popup { border-radius: 24px !important; padding: 18px !important; }

.contact-modal {
    text-align: center;
    font-family: var(--font-main);
}

.contact-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto 14px;
    background: var(--cabo-dark);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
    border: 4px solid #fff7ed;
    box-shadow: 0 0 0 3px var(--cabo-orange);
}

.contact-modal h3 {
    margin: 0;
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1.3rem;
}

.contact-role {
    color: var(--cabo-orange);
    font-weight: 800;
    margin: 4px 0 18px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.85rem;
}

.contact-rows {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-rows > div {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    color: var(--cabo-dark);
    font-weight: 600;
    font-size: 0.92rem;
}

.contact-rows i {
    color: var(--cabo-orange);
    width: 16px;
    text-align: center;
}

.contact-rows a {
    color: var(--cabo-dark);
    text-decoration: none;
    font-weight: 700;
}

.contact-rows a:hover {
    color: var(--cabo-orange);
    text-decoration: underline;
}

/* ========= Submenu lateral ========= */
.portal-nav-group {
    display: flex;
    flex-direction: column;
}

.portal-nav-parent {
    position: relative;
}

.portal-nav-caret {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    opacity: 0.7;
}

.portal-nav-group.open .portal-nav-caret {
    transform: rotate(180deg);
}

.portal-nav-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    padding-left: 12px;
    margin-top: 2px;
}

.portal-nav-submenu > * {
    overflow: hidden;
    min-height: 0;
}

.portal-nav-group.open .portal-nav-submenu {
    grid-template-rows: 1fr;
}

.portal-nav-submenu-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}

.portal-nav-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.55);
    padding: 11px 14px;
    border-left: 2px solid rgba(255,255,255,0.10);
    border-radius: 0 12px 12px 0;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: 0.25s ease;
    margin: 2px 0;
}

.portal-nav-subitem i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

.nav-brand-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    flex: 0 0 20px;
    border-radius: 5px;
    background: white;
}

.nav-brand-icon.cabo-icon {
    width: 24px;
    background: transparent;
    border-radius: 0;
}

.portal-nav-subitem:hover {
    color: white;
    background: rgba(255,255,255,0.06);
    border-left-color: var(--cabo-orange);
}

.portal-nav-subitem.active {
    color: white;
    background: rgba(245, 158, 11, 0.18);
    border-left-color: var(--cabo-orange);
}

.portal-nav-subitem.ti-link i {
    color: var(--cabo-orange);
}

/* ========= Status page ========= */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.status-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: 0.3s ease;
    cursor: pointer;
}

.status-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.07);
}

.status-card:focus-visible {
    outline: 3px solid rgba(245, 158, 11, 0.34);
    outline-offset: 3px;
}

.status-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-card-head h3 {
    margin: 0;
    color: var(--cabo-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

.status-card-head p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.status-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    color: var(--cabo-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.status-dot {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.25);
    animation: statusPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.status-dot.ok {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.status-dot.warn {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.status-dot.bad {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
}

.status-dot.unknown {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2);
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.status-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-label {
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1.02rem;
}

.status-meta {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-link {
    color: var(--cabo-orange);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.status-link:hover {
    text-decoration: underline;
}

.status-trend {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.status-trend-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
    gap: 16px;
    flex-wrap: wrap;
}

.status-trend-head h3 {
    margin: 4px 0 0;
    color: var(--cabo-dark);
    font-weight: 800;
    font-size: 1.2rem;
}

.status-updated {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
}

#status-trend-chart {
    width: 100%;
    height: 140px;
    display: block;
}

.status-legend {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.status-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.status-legend .dot.ok { background: #22c55e; }
.status-legend .dot.warn { background: #f59e0b; }
.status-legend .dot.bad { background: #ef4444; }

@media (max-width: 1759px) {
    .portal-sidebar {
        width: 250px;
    }

    .module-hero,
    .helpdesk-layout,
    .external-panel {
        grid-template-columns: 1fr;
    }

    .helpdesk-kpis {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    body.intranet-page {
        overflow: auto;
        height: auto;
    }

    .portal-shell {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: 14px;
    }

    .portal-sidebar {
        width: auto;
    }

    .portal-menu {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .portal-nav-item {
        min-width: max-content;
    }

    .portal-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-top-actions {
        flex-wrap: wrap;
    }

    .portal-session-chip {
        flex: 1 1 auto;
    }

    .portal-session-user,
    .portal-session-login {
        width: 100%;
        justify-content: center;
    }

    .portal-search {
        width: 100%;
        flex: 1 1 100%;
    }

    .portal-view {
        padding: 22px;
    }

    .helpdesk-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .hero-panel h2 {
        font-size: 1.9rem;
    }

    .module-grid,
    .panel-grid,
    .employee-grid,
    .document-grid,
    .course-grid,
    .helpdesk-kpis {
        grid-template-columns: 1fr;
    }

    .ticket-card {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   PORTAL QUICK RAIL - dock vertical de circulos a la izquierda
   Aparece SOLO cuando el body tiene .portal-in-module (no en home)
   ===================================================================== */
.portal-quick-rail {
    position: fixed;
    top: 50%;
    left: clamp(10px, 1.2vw, 22px);
    transform: translateY(-50%) translateX(-32px);
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Outfit', sans-serif;
}
.portal-in-module .portal-quick-rail {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.portal-rail-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 4px 8px;
    border-radius: 999px;
}

.portal-rail-btn {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    overflow: visible;
    isolation: isolate;
    flex-shrink: 0;
}
.portal-rail-btn .portal-rail-ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mc-icon-bg, #f1f5f9);
    color: var(--mc-icon-color, var(--cabo-dark));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.0rem;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.portal-rail-btn .portal-rail-label {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: #0f172a;
    color: white;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.25s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.portal-rail-btn .portal-rail-label::before {
    content: '';
    position: absolute;
    left: -6px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent #0f172a transparent transparent;
}
.portal-rail-btn:hover {
    transform: translateX(4px) scale(1.06);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}
.portal-rail-btn:hover .portal-rail-ico {
    background: var(--mc-icon-color, var(--cabo-orange));
    color: white;
    transform: scale(1.1);
}
.portal-rail-btn:hover .portal-rail-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.portal-rail-btn.is-active {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28), 0 14px 28px rgba(15, 23, 42, 0.18);
}
.portal-rail-btn.is-active .portal-rail-ico {
    background: var(--mc-icon-color, var(--cabo-orange));
    color: white;
}

/* Boton Inicio destacado (primer circulo del rail) */
.portal-rail-btn[data-rail-module="home"] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.32);
}
.portal-rail-btn[data-rail-module="home"] .portal-rail-ico {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}
.portal-rail-btn[data-rail-module="home"]:hover {
    transform: translateX(4px) scale(1.10) rotate(-4deg);
    box-shadow: 0 18px 32px rgba(249, 115, 22, 0.45);
}
.portal-rail-btn[data-rail-module="home"]:hover .portal-rail-ico {
    background: white;
    color: #c2410c;
    transform: scale(1.06);
}
.portal-rail-btn[data-rail-module="home"] .portal-rail-label::before { border-color: transparent #c2410c transparent transparent; }
.portal-rail-btn[data-rail-module="home"] .portal-rail-label { background: #c2410c; }

/* Colores por modulo del rail (mismos que el home) */
.portal-rail-btn[data-mc="announcements"] { --mc-icon-bg: #fff7ed; --mc-icon-color: #c2410c; }
.portal-rail-btn[data-mc="directory"]     { --mc-icon-bg: #eff6ff; --mc-icon-color: #1e40af; }
.portal-rail-btn[data-mc="culture"]       { --mc-icon-bg: #ecfdf5; --mc-icon-color: #047857; }
.portal-rail-btn[data-mc="documents"]     { --mc-icon-bg: #f5f3ff; --mc-icon-color: #6d28d9; }
.portal-rail-btn[data-mc="learning"]      { --mc-icon-bg: #fefce8; --mc-icon-color: #b45309; }
.portal-rail-btn[data-mc="self-service"]  { --mc-icon-bg: #ecfeff; --mc-icon-color: #0e7490; }
.portal-rail-btn[data-mc="helpdesk"]      { --mc-icon-bg: #fef2f2; --mc-icon-color: #b91c1c; }
.portal-rail-btn[data-mc="systems"]       { --mc-icon-bg: #f1f5f9; --mc-icon-color: #0f172a; }
.portal-rail-btn[data-mc="search"]        { --mc-icon-bg: #fff7ed; --mc-icon-color: #f97316; }

/* Popover de busqueda */
.rail-search-popover {
    position: fixed;
    left: calc(clamp(10px, 1.2vw, 22px) + 80px);
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
    z-index: 1499;
    background: white;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.20);
    width: clamp(280px, 30vw, 420px);
    padding: 14px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Outfit', sans-serif;
}
.rail-search-popover.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
.rail-search-popover .rsp-input-wrap {
    display: flex; align-items: center; gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 14px;
    transition: border-color 0.25s ease;
}
.rail-search-popover .rsp-input-wrap:focus-within {
    border-color: var(--cabo-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
.rail-search-popover .rsp-input-wrap i { color: #94a3b8; font-size: 0.9rem; }
.rail-search-popover input {
    flex: 1; border: none; background: transparent;
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 0.95rem; color: var(--cabo-dark); outline: none;
}
.rail-search-popover kbd {
    font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 800;
    background: white; color: #64748b;
    padding: 4px 8px; border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}
.rail-search-popover .rsp-results { margin-top: 8px; max-height: 460px; overflow-y: auto; scroll-behavior: smooth; }
.rail-search-popover .rsp-results::-webkit-scrollbar { width: 4px; }
.rail-search-popover .rsp-results::-webkit-scrollbar-track { background: transparent; }
.rail-search-popover .rsp-results::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
.rail-search-popover .rsp-results .rsp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    animation: rspFadeIn 0.2s ease forwards;
}
.rail-search-popover .rsp-results .rsp-row:hover { background: #f8fafc; transform: translateX(2px); }
.rail-search-popover .rsp-results .rsp-row i { width: 24px; text-align: center; font-size: 0.9rem; flex-shrink: 0; }
.rail-search-popover .rsp-results .rsp-row strong { color: var(--cabo-dark); font-size: 0.88rem; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-search-popover .rsp-results .rsp-row small { color: #94a3b8; font-size: 0.72rem; font-weight: 600; flex-shrink: 0; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-search-popover .rsp-results .rsp-empty { padding: 14px; color: #94a3b8; font-size: 0.85rem; text-align: center; }
.rail-search-popover .rsp-results .rsp-loading { padding: 18px 14px; color: #94a3b8; font-size: 0.85rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Cabeceras de secciones */
.rsp-section {
    padding: 10px 12px 4px;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.rsp-section:first-child { padding-top: 4px; }

/* Banner de login */
.rsp-login-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 4px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fed7aa;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #92400e;
    animation: rspFadeIn 0.25s ease forwards;
}
.rsp-login-banner i { color: #f97316; flex-shrink: 0; }
.rsp-login-banner a { color: var(--cabo-orange); font-weight: 800; text-decoration: none; }
.rsp-login-banner a:hover { text-decoration: underline; }

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

/* =====================================================================
   BUSCADOR INLINE DEL MODULO TI / SISTEMAS
   ===================================================================== */
.ti-search-container {
    position: relative;
    margin-bottom: 28px;
}
.ti-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 13px 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
.ti-search-wrap:focus-within {
    border-color: var(--cabo-orange);
    box-shadow: 0 0 0 4px rgba(249,115,22,0.10), 0 8px 24px rgba(15,23,42,0.06);
}
.ti-search-wrap .ti-search-icon { color: #94a3b8; font-size: 1rem; flex-shrink: 0; transition: color 0.25s ease; }
.ti-search-wrap:focus-within .ti-search-icon { color: var(--cabo-orange); }
.ti-search-wrap input {
    flex: 1; border: none; background: transparent;
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 0.98rem; color: var(--cabo-dark); outline: none;
}
.ti-search-wrap input::placeholder { color: #cbd5e1; font-weight: 500; }
.ti-search-wrap .ti-search-clear {
    background: transparent; border: none; cursor: pointer;
    color: #94a3b8; font-size: 0.9rem; padding: 2px 4px;
    border-radius: 6px; transition: all 0.2s ease;
    opacity: 0; pointer-events: none;
}
.ti-search-wrap.has-value .ti-search-clear { opacity: 1; pointer-events: auto; }
.ti-search-wrap .ti-search-clear:hover { color: var(--cabo-orange); background: #fff7ed; }
.ti-search-wrap .ti-search-kbd {
    font-family: 'Outfit', sans-serif; font-size: 0.7rem; font-weight: 800;
    background: #f8fafc; color: #64748b;
    padding: 4px 9px; border-radius: 8px;
    border: 1px solid #e2e8f0; box-shadow: 0 1px 0 rgba(15,23,42,0.08);
    flex-shrink: 0; transition: opacity 0.2s ease;
}
.ti-search-wrap.has-value .ti-search-kbd { opacity: 0; }

/* Panel de resultados del buscador TI */
.ti-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: white;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15,23,42,0.14);
    z-index: 400;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
    padding: 6px 6px;
}
.ti-search-results.is-open {
    max-height: 440px;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
}
.ti-search-results::-webkit-scrollbar { width: 4px; }
.ti-search-results::-webkit-scrollbar-track { background: transparent; }
.ti-search-results::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
.ti-search-results .rsp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    animation: rspFadeIn 0.2s ease forwards;
}
.ti-search-results .rsp-row:hover { background: #f8fafc; transform: translateX(2px); }
.ti-search-results .rsp-row i { width: 24px; text-align: center; font-size: 0.9rem; color: var(--cabo-orange); flex-shrink: 0; }
.ti-search-results .rsp-row strong { color: var(--cabo-dark); font-size: 0.88rem; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-search-results .rsp-row small { color: #94a3b8; font-size: 0.72rem; font-weight: 600; flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-search-results .rsp-empty { padding: 16px; color: #94a3b8; font-size: 0.85rem; text-align: center; }
.ti-search-results .rsp-section { padding: 8px 12px 3px; color: #94a3b8; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; }
.ti-search-results .rsp-login-banner { margin: 6px 4px 4px; padding: 10px 14px; background: linear-gradient(135deg,#fff7ed,#ffedd5); border: 1px solid #fed7aa; border-radius: 12px; font-size: 0.8rem; color: #92400e; display: flex; align-items: center; gap: 10px; }
.ti-search-results .rsp-login-banner i { color: #f97316; }
.ti-search-results .rsp-login-banner a { color: var(--cabo-orange); font-weight: 800; text-decoration: none; }

@media (max-width: 600px) {
    .ti-search-wrap { padding: 11px 14px; }
    .ti-search-wrap .ti-search-kbd { display: none; }
}

/* Cuando esta el rail visible, dejar margen al contenido */
.portal-in-module .portal-content-full { padding-left: clamp(96px, 9vw, 120px); }

/* Mobile: rail horizontal abajo */
@media (max-width: 720px) {
    .portal-quick-rail {
        top: auto;
        bottom: 14px;
        left: 50%;
        transform: translate(-50%, 32px);
        flex-direction: row;
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        border-radius: 28px;
        padding: 8px 10px;
    }
    .portal-in-module .portal-quick-rail {
        transform: translate(-50%, 0);
    }
    .portal-rail-btn { width: 48px; height: 48px; }
    .portal-rail-btn .portal-rail-ico { width: 32px; height: 32px; font-size: 0.92rem; }
    .portal-rail-btn .portal-rail-label { display: none; }
    .portal-rail-divider { width: 1px; height: 24px; margin: auto 4px; }
    .rail-search-popover {
        left: 50%;
        top: auto;
        bottom: 78px;
        transform: translate(-50%, 12px);
        width: calc(100vw - 24px);
    }
    .rail-search-popover.is-open { transform: translate(-50%, 0); }
    .portal-in-module .portal-content-full { padding-left: 14px; padding-bottom: 96px; }
}

/* =====================================================================
   MODO FULLSCREEN: sin sidebar, contenido ocupa todo el ancho
   ===================================================================== */
.intranet-fullscreen .portal-menu-hidden,
.portal-menu-hidden { display: none !important; }

.intranet-fullscreen .portal-content-full {
    width: 100%;
    max-width: 1600px;
    min-height: 100vh;
    height: auto;
    margin: 0 auto;
    padding: clamp(14px, 1.4vw, 24px) clamp(14px, 1.8vw, 28px) clamp(22px, 2vw, 32px);
    box-sizing: border-box;
    transition: padding-left 0.58s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.3s ease;
}
.intranet-fullscreen .portal-shell { display: block !important; }

body.intranet-page.intranet-fullscreen {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background:
        radial-gradient(circle at 22% 18%, rgba(249, 115, 22, 0.15), transparent 36%),
        radial-gradient(circle at 84% 6%, rgba(15, 23, 42, 0.08), transparent 42%),
        radial-gradient(circle at 54% 92%, rgba(59, 130, 246, 0.10), transparent 46%),
        #f1f3f6;
}

/* Boton Inicio en topbar (visible solo cuando NO estas en home) */
.portal-home-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cabo-dark); color: white;
    padding: 10px 16px; border-radius: 14px; border: none;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.86rem;
    cursor: pointer; box-shadow: 0 8px 18px rgba(15,23,42,0.18);
    transition: all 0.25s ease; flex-shrink: 0;
}
.portal-home-btn:hover {
    background: var(--cabo-orange);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(249,115,22,0.30);
}

/* Asegurar que la topbar tenga buen aspecto sin sidebar */
.intranet-fullscreen .portal-topbar {
    display: grid;
    grid-template-columns: 260px minmax(420px, 1fr) max-content;
    justify-content: stretch;
    align-items: center;
    gap: clamp(14px, 1.3vw, 22px);
    margin-bottom: clamp(28px, 3vw, 48px);
    max-width: 100%;
    box-sizing: border-box;
}

.intranet-fullscreen .portal-title {
    min-width: 0;
    max-width: 100%;
}

.intranet-fullscreen .portal-top-actions {
    width: auto;
    max-width: none;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-content: center;
    align-self: center;
}

.intranet-fullscreen .portal-top-actions > * {
    flex: 0 0 auto;
}

.intranet-fullscreen .portal-search {
    width: 100%;
    max-width: 760px;
    min-width: 0;
}

.intranet-page .cabo-user-chip-clock {
    display: none;
}

.intranet-page .cabo-user-chip-button {
    min-height: 52px;
    padding: 7px 10px 7px 18px;
    gap: 12px;
}

.intranet-page .cabo-user-chip-name {
    max-width: 150px;
}

.intranet-page .cabo-user-chip-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.intranet-page .global-announcer {
    order: 2;
}

.intranet-page .portal-home-btn {
    order: 1;
}

.intranet-page .portal-live-cluster {
    order: 3;
}

.intranet-page #portal-refresh {
    order: 4;
}

.intranet-page .portal-session-chip,
.intranet-page #cabo-user-chip-host {
    order: 5;
}

@media (min-width: 1760px) {
    .intranet-fullscreen .portal-topbar,
    .portal-topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 96px;
        gap: 18px;
    }

    .intranet-fullscreen .portal-title,
    .portal-title {
        flex: 0 0 260px;
        width: 260px;
        z-index: 2;
    }

    .intranet-fullscreen .portal-search,
    .portal-search.portal-search-center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 54px;
        max-width: 54px;
        min-width: 54px;
        transform: translate(-50%, -50%);
        z-index: 6;
    }

    .intranet-fullscreen .portal-search.is-open,
    .intranet-fullscreen .portal-search:focus-within,
    .portal-search.portal-search-center.is-open,
    .portal-search.portal-search-center:focus-within {
        width: min(640px, calc(100vw - 96px));
        max-width: min(640px, calc(100vw - 96px));
    }

    .intranet-fullscreen .portal-top-actions,
    .portal-top-actions {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        justify-self: auto;
        align-self: center;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 10px;
        z-index: 2;
    }

    .portal-clock-chip {
        min-width: 150px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .portal-weather-chip {
        width: 174px;
        max-width: 174px;
    }

    .portal-weather-text small {
        max-width: 86px;
    }

    .intranet-page .cabo-user-chip-button {
        padding-left: 16px;
        padding-right: 10px;
    }

    .intranet-page .cabo-user-chip-name {
        max-width: 112px;
    }
}

.intranet-fullscreen .portal-view {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    min-height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    box-sizing: border-box;
}

body.portal-rail-active .portal-content-full {
    --portal-rail-offset: clamp(104px, 7.5vw, 132px);
    max-width: 1720px;
    padding-left: var(--portal-rail-offset);
}

body.portal-rail-active .portal-topbar {
    position: relative;
    left: auto;
    width: 100%;
    margin-left: 0;
}

body.portal-rail-active .portal-view {
    animation: portalModuleSlideIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes portalModuleSlideIn {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Navegacion circular lateral de la intranet */
.portal-quick-rail {
    position: fixed;
    top: 50%;
    left: clamp(12px, 1.3vw, 24px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-115%, -50%) scale(0.92);
    transition: opacity 0.48s ease, transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

body.portal-rail-active .portal-quick-rail {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
}

body.portal-rail-active .portal-quick-rail .portal-rail-btn {
    animation: railBubbleIn 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.portal-quick-rail .portal-rail-btn:nth-child(1) { animation-delay: 0.03s; }
.portal-quick-rail .portal-rail-btn:nth-child(2) { animation-delay: 0.06s; }
.portal-quick-rail .portal-rail-btn:nth-child(3) { animation-delay: 0.09s; }
.portal-quick-rail .portal-rail-btn:nth-child(4) { animation-delay: 0.12s; }
.portal-quick-rail .portal-rail-btn:nth-child(5) { animation-delay: 0.15s; }
.portal-quick-rail .portal-rail-btn:nth-child(6) { animation-delay: 0.18s; }
.portal-quick-rail .portal-rail-btn:nth-child(7) { animation-delay: 0.21s; }
.portal-quick-rail .portal-rail-btn:nth-child(8) { animation-delay: 0.24s; }
.portal-quick-rail .portal-rail-btn:nth-child(9) { animation-delay: 0.27s; }

@keyframes railBubbleIn {
    from { opacity: 0; transform: translateX(-22px) scale(0.55); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.portal-rail-btn {
    --rail-color: var(--cabo-orange);
    --rail-bg: #fff7ed;
    position: relative;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: var(--rail-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
    transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    font-family: var(--font-main);
}

.portal-rail-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rail-bg);
    color: var(--rail-color);
    font-size: 1.1rem;
    transition: inherit;
}

.portal-rail-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--cabo-dark);
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-8px, -50%);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.portal-rail-btn:hover,
.portal-rail-btn:focus-visible {
    transform: translateX(6px) scale(1.08);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16);
    outline: none;
}

.portal-rail-btn:hover .portal-rail-ico,
.portal-rail-btn:focus-visible .portal-rail-ico,
.portal-rail-btn.active .portal-rail-ico {
    background: var(--rail-color);
    color: white;
}

.portal-rail-btn:hover .portal-rail-label,
.portal-rail-btn:focus-visible .portal-rail-label {
    opacity: 1;
    transform: translate(0, -50%);
}

.portal-rail-btn.is-blocked {
    opacity: 0.52;
    cursor: not-allowed;
    filter: saturate(0.35);
}

.portal-rail-btn.is-blocked:hover,
.portal-rail-btn.is-blocked:focus-visible {
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.portal-rail-btn.is-blocked:hover .portal-rail-ico,
.portal-rail-btn.is-blocked:focus-visible .portal-rail-ico {
    background: var(--rail-bg);
    color: var(--rail-color);
}

.portal-rail-btn.active {
    background: var(--rail-bg);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12), 0 16px 30px rgba(15, 23, 42, 0.14);
}

.portal-rail-btn[data-mc="home"] { --rail-color: #f59e0b; --rail-bg: #fff7ed; }
.portal-rail-btn[data-mc="announcements"] { --rail-color: #c2410c; --rail-bg: #fff7ed; }
.portal-rail-btn[data-mc="directory"] { --rail-color: #1e40af; --rail-bg: #eff6ff; }
.portal-rail-btn[data-mc="culture"] { --rail-color: #047857; --rail-bg: #ecfdf5; }
.portal-rail-btn[data-mc="documents"] { --rail-color: #6d28d9; --rail-bg: #f5f3ff; }
.portal-rail-btn[data-mc="learning"] { --rail-color: #b45309; --rail-bg: #fefce8; }
.portal-rail-btn[data-mc="self-service"] { --rail-color: #0e7490; --rail-bg: #ecfeff; }
.portal-rail-btn[data-mc="helpdesk"] { --rail-color: #b91c1c; --rail-bg: #fef2f2; }
.portal-rail-btn[data-mc="systems"] { --rail-color: #0f172a; --rail-bg: #f1f5f9; }

.brand-inkreq {
    color: #0f766e;
    background: transparent;
    border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   ALMACÉN DE TINTAS Y ROLLOS DE PLOTTER — REDISEÑO PREMIUM (namespace ink-*)
═══════════════════════════════════════════════════════════════════════ */
.ink {
    --ink-ink: #0f172a;
    --ink-muted: #64748b;
    --ink-soft: #94a3b8;
    --ink-line: #e8edf4;
    --ink-line-strong: #dbe3ee;
    --ink-bg: #ffffff;
    --ink-teal: #0891b2;
    --ink-teal-deep: #0e7490;
    --ink-card-shadow: 0 18px 40px -22px rgba(15,23,42,0.28);
    --ink-card-shadow-hover: 0 26px 54px -24px rgba(8,110,146,0.42);
    font-family: var(--font-main, 'Outfit', sans-serif);
    color: var(--ink-ink);
    display: block;
}
.ink * { box-sizing: border-box; }

/* ── Entrada escalonada ─────────────────────────────────────────────── */
@keyframes inkFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inkPop     { 0% { transform: scale(.82); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes inkPulse   { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); } 70% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }
@keyframes inkBar     { from { width: 0; } }
@keyframes inkGlow    { 0%,100% { opacity: .55; transform: translate(0,0) scale(1); } 50% { opacity: .9; transform: translate(-6%, 4%) scale(1.08); } }

.ink > * { animation: inkFadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.ink-hero        { animation-delay: .02s; }
.ink-scope       { animation-delay: .06s; }
.ink-kpis        { animation-delay: .10s; }
.ink-transfers   { animation-delay: .14s; }
.ink-grid        { animation-delay: .18s; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.ink-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 26px 28px;
    margin-bottom: 18px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 88% -10%, rgba(45,212,191,0.32), transparent 55%),
        linear-gradient(135deg, #0b2536 0%, #0e4a5f 46%, #0f766e 100%);
    box-shadow: 0 26px 60px -30px rgba(8,80,110,0.75);
}
.ink-hero-glow {
    position: absolute;
    width: 320px; height: 320px;
    right: -60px; top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,0.5), transparent 68%);
    filter: blur(6px);
    pointer-events: none;
    animation: inkGlow 7s ease-in-out infinite;
}
.ink-hero-main { position: relative; z-index: 1; min-width: 0; }
.ink-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    color: #7dd3fc;
    font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.ink-hero-main h3 {
    margin: 9px 0 0;
    font-size: 1.5rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.12;
}
.ink-hero-main p {
    margin: 8px 0 0;
    max-width: 620px;
    color: rgba(226,247,255,0.82);
    font-size: .9rem; font-weight: 600; line-height: 1.45;
}
.ink-hero-cta {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    padding: 14px 18px 14px 14px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: inherit; font-weight: 800; font-size: .82rem; line-height: 1.15;
    text-align: left; cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.ink-hero-cta:hover { transform: translateY(-2px); background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.ink-hero-cta:hover .fa-arrow-down { transform: translateY(3px); }
.ink-hero-cta .fa-arrow-down { transition: transform .2s ease; color: #7dd3fc; }
.ink-hero-cta-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff; font-size: 1.05rem; font-weight: 900;
    animation: inkPulse 2.4s ease-out infinite;
}
.ink-hero-ok {
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 18px; border-radius: 999px;
    background: rgba(16,185,129,0.16);
    border: 1px solid rgba(52,211,153,0.4);
    color: #6ee7b7; font-weight: 900; font-size: .85rem;
}

/* ── Switcher de almacenes (dropdown premium) ───────────────────────── */
/* z-index alto: la animación de entrada deja un transform en cada hijo de .ink
   (creando su propio stacking context), así que sin esto el menú desplegable
   quedaría por debajo de los KPIs / inventario que vienen después en el DOM. */
.ink-scope { position: relative; margin-bottom: 18px; max-width: 480px; z-index: 90; }

.ink-scope-trigger {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px 11px 11px;
    border-radius: 16px;
    border: 1.5px solid var(--ink-line);
    background: var(--ink-bg);
    box-shadow: var(--ink-card-shadow);
    cursor: pointer; text-align: left; font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ink-scope-trigger:hover { border-color: #b8e6f0; transform: translateY(-1px); box-shadow: var(--ink-card-shadow-hover); }
.ink-scope-trigger[aria-expanded="true"] { border-color: var(--ink-teal); box-shadow: 0 0 0 3px rgba(8,145,178,0.13); }
.ink-scope-trigger-txt { min-width: 0; flex: 1; }
.ink-scope-trigger-txt small { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.ink-scope-trigger-txt strong { display: block; font-size: .98rem; font-weight: 900; color: var(--ink-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ink-scope-trigger-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ink-scope-caret { flex-shrink: 0; color: var(--ink-soft); font-size: .8rem; transition: transform .22s ease; }
.ink-scope-trigger[aria-expanded="true"] .ink-scope-caret { transform: rotate(180deg); color: var(--ink-teal); }

.ink-scope-ico {
    flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: var(--ink-soft);
    font-size: 1rem;
}
.ink-scope-ico.is-all { background: #eef2ff; color: #4f46e5; }
.ink-scope-trigger .ink-scope-ico { background: var(--ink-teal); color: #fff; }
.ink-scope-trigger .ink-scope-ico.is-all { background: #4f46e5; }

.ink-scope-badge {
    flex-shrink: 0;
    padding: 4px 10px; border-radius: 9px;
    background: #ecfeff; color: var(--ink-teal-deep);
    font-size: .74rem; font-weight: 900; white-space: nowrap;
}
.ink-scope-flags { display: inline-flex; gap: 5px; flex-shrink: 0; }
.ink-scope-flags em {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 7px; border-radius: 8px;
    font-style: normal; font-size: .68rem; font-weight: 900;
}
.ink-scope-flags .is-transf { background: #eff6ff; color: #2563eb; }
.ink-scope-flags .is-low    { background: #fff7ed; color: #ea580c; }

/* Panel desplegable */
.ink-scope-menu {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    z-index: 60;
    padding: 8px;
    border-radius: 18px;
    border: 1.5px solid var(--ink-line);
    background: #fff;
    box-shadow: 0 30px 64px -26px rgba(15,23,42,0.45);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center;
    transition: opacity .18s ease, transform .2s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.ink-scope-menu.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ink-scope-search { position: relative; display: flex; align-items: center; margin: 2px 2px 7px; }
.ink-scope-search > i { position: absolute; left: 12px; color: var(--ink-soft); font-size: .8rem; pointer-events: none; }
.ink-scope-search input {
    width: 100%; padding: 9px 12px 9px 32px;
    border: 1.5px solid var(--ink-line-strong); border-radius: 11px;
    background: #f8fafc; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--ink-ink);
    outline: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ink-scope-search input::placeholder { color: var(--ink-soft); font-weight: 600; }
.ink-scope-search input:focus { border-color: var(--ink-teal); background: #fff; box-shadow: 0 0 0 3px rgba(8,145,178,0.1); }
.ink-scope-opts { display: flex; flex-direction: column; gap: 2px; max-height: 336px; overflow-y: auto; scrollbar-width: thin; }
.ink-scope-opts::-webkit-scrollbar { width: 5px; }
.ink-scope-opts::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 99px; }
.ink-scope-opt {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 10px;
    border: none; border-radius: 12px; background: transparent;
    cursor: pointer; text-align: left; font-family: inherit;
    transition: background .14s ease;
}
.ink-scope-opt:hover { background: #f5f9fc; }
.ink-scope-opt.is-active { background: #ecfeff; }
.ink-scope-opt .ink-scope-txt { min-width: 0; flex: 1; }
.ink-scope-txt strong { display: block; font-size: .88rem; font-weight: 900; color: var(--ink-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ink-scope-txt small { display: block; font-size: .7rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ink-scope-check { flex-shrink: 0; color: var(--ink-teal); font-size: .82rem; opacity: 0; transition: opacity .14s ease; }
.ink-scope-opt.is-active .ink-scope-check { opacity: 1; }
.ink-scope-none { padding: 18px 10px; text-align: center; color: var(--ink-soft); font-size: .82rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .ink-scope-menu { transition: opacity .12s ease !important; transform: none !important; }
    .ink-scope-caret { transition: none !important; }
}

/* ── KPIs ───────────────────────────────────────────────────────────── */
.ink-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.ink-kpi {
    position: relative; overflow: hidden;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    grid-template-areas: "ico val go" "ico label go";
    gap: 1px 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1.5px solid var(--ink-line);
    background: var(--ink-bg);
    box-shadow: var(--ink-card-shadow);
    cursor: pointer; text-align: left;
    font-family: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ink-kpi::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--kc, var(--ink-teal));
    opacity: 0; transition: opacity .2s ease;
}
.ink-kpi:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kc) 40%, var(--ink-line)); box-shadow: var(--ink-card-shadow-hover); }
.ink-kpi:hover::before { opacity: 1; }
.ink-kpi:hover .ink-kpi-go { transform: translateX(0); opacity: 1; }
.ink-kpi-ico {
    grid-area: ico;
    width: 48px; height: 48px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--kc, var(--ink-teal));
    background: color-mix(in srgb, var(--kc) 13%, white);
}
.ink-kpi-val { grid-area: val; font-size: 1.75rem; font-weight: 900; line-height: 1; color: var(--ink-ink); font-variant-numeric: tabular-nums; }
.ink-kpi-label { grid-area: label; font-size: .76rem; font-weight: 800; color: var(--ink-muted); margin-top: 3px; }
.ink-kpi-go { grid-area: go; color: var(--kc, var(--ink-teal)); opacity: 0; transform: translateX(-6px); transition: transform .2s ease, opacity .2s ease; }

/* ── Cards genéricas ────────────────────────────────────────────────── */
.ink-card {
    border-radius: 24px;
    border: 1.5px solid var(--ink-line);
    background: var(--ink-bg);
    box-shadow: var(--ink-card-shadow);
    padding: 20px;
    margin-bottom: 18px;
}
.ink-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.ink-card-eyebrow {
    display: block;
    color: var(--ink-teal-deep);
    font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.ink-card-eyebrow.is-blue  { color: #2563eb; }
.ink-card-eyebrow.is-slate { color: #64748b; }
.ink-card-title h3 { margin: 4px 0 0; font-size: 1.08rem; font-weight: 900; color: var(--ink-ink); }
.ink-count-badge {
    flex-shrink: 0;
    min-width: 38px; height: 34px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #ecfeff; color: var(--ink-teal-deep);
    font-size: .95rem; font-weight: 900;
}
.ink-count-badge.is-blue { background: #eff6ff; color: #2563eb; }

/* ── Transferencias ─────────────────────────────────────────────────── */
.ink-transfers { border-color: #dbeafe; }
.ink-transfer-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.ink-transfer {
    display: flex; flex-direction: column; gap: 11px;
    padding: 16px;
    border-radius: 18px;
    border: 1.5px solid #e6effe;
    background: linear-gradient(180deg, #fbfdff, #f6faff);
    animation: inkFadeUp .5s cubic-bezier(.22,1,.36,1) both;
}
.ink-transfer-track > .ink-transfer:nth-child(2) { animation-delay: .06s; }
.ink-transfer-track > .ink-transfer:nth-child(3) { animation-delay: .12s; }
.ink-transfer-track > .ink-transfer:nth-child(4) { animation-delay: .18s; }
.ink-transfer-track > .ink-transfer:nth-child(n+5) { animation-delay: .24s; }
.ink-transfer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ink-transfer-route { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ink-transfer-route .fa-arrow-right-long { color: #93c5fd; font-size: .8rem; flex-shrink: 0; }
.ink-node {
    max-width: 120px;
    padding: 4px 10px; border-radius: 8px;
    background: #eef2f7; color: #475569;
    font-size: .74rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ink-node.is-dest { background: #dbeafe; color: #1d4ed8; }
.ink-transfer-folio {
    flex-shrink: 0;
    font-size: .72rem; font-weight: 900; color: #2563eb;
    font-family: 'Outfit', monospace; letter-spacing: .02em;
}
.ink-transfer-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ink-transfer-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: .74rem; font-weight: 700; }
.ink-transfer-meta i { color: var(--ink-soft); }
.ink-transfer-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ink-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 9px;
    background: #fff; border: 1px solid var(--ink-line);
    color: #334155; font-size: .72rem; font-weight: 800;
}
.ink-chip b { color: #2563eb; }
.ink-chip.is-more { background: #eff6ff; border-color: #dbeafe; color: #2563eb; }
.ink-accept {
    margin-top: 3px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border: none; border-radius: 13px;
    background: linear-gradient(135deg, #0891b2, #059669);
    color: #fff; font-family: inherit; font-size: .84rem; font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(5,150,105,0.7);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ink-accept:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 34px -14px rgba(5,150,105,0.85); }
.ink-accept:active { transform: translateY(0); }
.ink-noperm {
    margin-top: 3px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-radius: 13px;
    background: #f8fafc; border: 1px dashed #cbd5e1;
    color: var(--ink-soft); font-size: .76rem; font-weight: 800;
}

/* ── Layout inventario + historial ──────────────────────────────────── */
.ink-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr);
    gap: 18px;
    align-items: start;
}
.ink-grid.is-single { grid-template-columns: 1fr; }
.ink-grid > .ink-card { margin-bottom: 0; }

/* ── Inventario ─────────────────────────────────────────────────────── */
.ink-inv-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ink-search {
    position: relative; flex: 1 1 240px; min-width: 190px;
    display: flex; align-items: center;
}
.ink-search > .fa-magnifying-glass { position: absolute; left: 14px; color: var(--ink-soft); font-size: .82rem; pointer-events: none; }
.ink-search input {
    width: 100%;
    padding: 11px 38px 11px 36px;
    border: 1.5px solid var(--ink-line-strong); border-radius: 13px;
    background: #f8fafc;
    font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-ink);
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ink-search input::placeholder { color: var(--ink-soft); font-weight: 600; }
.ink-search input:focus { border-color: var(--ink-teal); background: #fff; box-shadow: 0 0 0 4px rgba(8,145,178,0.12); }
.ink-search-clear {
    position: absolute; right: 8px;
    width: 24px; height: 24px; border: none; border-radius: 8px;
    background: #e2e8f0; color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.ink-search-clear:hover { background: #cbd5e1; }
.ink-fchips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ink-fchip {
    padding: 8px 13px; border-radius: 10px;
    border: 1.5px solid var(--ink-line); background: #fff;
    color: var(--ink-muted); font-family: inherit; font-size: .76rem; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    transition: all .16s ease;
}
.ink-fchip:hover { border-color: #cbd5e1; color: var(--ink-ink); }
.ink-fchip.is-active { background: var(--ink-ink); border-color: var(--ink-ink); color: #fff; }

.ink-stock-body { display: flex; flex-direction: column; gap: 12px; }
.ink-stock-list { display: flex; flex-direction: column; }

/* Grupos por almacén (colapsables) */
.ink-wh-group { border: 1.5px solid var(--ink-line); border-radius: 16px; overflow: hidden; }
.ink-wh-head {
    width: 100%;
    display: flex; align-items: center; gap: 11px;
    padding: 12px 14px;
    border: none; background: #f8fafc; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: background .15s ease;
}
.ink-wh-head:hover { background: #f1f5f9; }
.ink-wh-caret { color: var(--ink-soft); font-size: .72rem; transition: transform .22s ease; }
.ink-wh-group.is-collapsed .ink-wh-caret { transform: rotate(-90deg); }
.ink-wh-group.is-collapsed .ink-stock-list { display: none; }
.ink-wh-ico {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ecfeff; color: var(--ink-teal-deep); font-size: .85rem;
}
.ink-wh-name { flex: 1; min-width: 0; }
.ink-wh-name strong { display: block; font-size: .88rem; font-weight: 900; color: var(--ink-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ink-wh-name small { display: block; font-size: .7rem; font-weight: 700; color: var(--ink-soft); }
.ink-wh-low {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 8px;
    background: #fff7ed; color: #ea580c; font-size: .7rem; font-weight: 900;
}
.ink-wh-count {
    min-width: 28px; text-align: center;
    padding: 3px 8px; border-radius: 8px;
    background: #eef2f7; color: #475569; font-size: .72rem; font-weight: 900;
}

/* Filas de stock */
.ink-row {
    display: grid;
    grid-template-columns: 16px minmax(0,1fr) auto 36px;
    align-items: center; gap: 12px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--ink-line);
    transition: background .14s ease;
}
.ink-row:last-child { border-bottom: none; }
.ink-row:hover { background: #f8fafc; }
.ink-wh-group .ink-row { padding-left: 14px; padding-right: 14px; }
.ink-row-dot { display: inline-flex; }
.ink-row-info { min-width: 0; }
.ink-row-info > strong { display: block; font-size: .86rem; font-weight: 800; color: var(--ink-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ink-row-sub { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 6px; }
.ink-row-bar {
    position: relative;
    height: 6px; border-radius: 99px;
    background: #eef2f6; overflow: visible;
    max-width: 260px;
}
.ink-row-bar > i {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    animation: inkBar .7s cubic-bezier(.22,1,.36,1);
}
.ink-row-bar > b {
    position: absolute; top: -2px; width: 2px; height: 10px;
    background: #64748b; border-radius: 2px; transform: translateX(-1px);
}
.ink-row.is-warn .ink-row-bar > i { background: linear-gradient(90deg, #fbbf24, #d97706); }
.ink-row.is-low  .ink-row-bar > i { background: linear-gradient(90deg, #fb923c, #ea580c); }
.ink-row.is-out  .ink-row-bar > i { background: linear-gradient(90deg, #f87171, #dc2626); }
.ink-row-count { text-align: right; min-width: 56px; }
.ink-row-count b {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 30px; padding: 0 8px;
    border-radius: 10px;
    background: #f0fdf4; color: #15803d;
    font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.ink-row-count small { display: block; margin-top: 3px; font-size: .66rem; font-weight: 800; color: var(--ink-soft); }
.ink-row.is-warn .ink-row-count b { background: #fffbeb; color: #b45309; }
.ink-row.is-low  .ink-row-count b { background: #fff7ed; color: #c2410c; }
.ink-row.is-out  .ink-row-count b { background: #fef2f2; color: #dc2626; }
.ink-row-out {
    width: 36px; height: 36px; border-radius: 11px;
    border: 1.5px solid #cffafe; background: #ecfeff; color: var(--ink-teal-deep);
    cursor: pointer; font-size: .82rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.ink-row-out:hover { background: var(--ink-teal); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 18px -8px rgba(8,110,146,0.7); }
.ink-row-out.is-ghost { border-color: transparent; background: transparent; cursor: default; }

/* ── Estado vacío ───────────────────────────────────────────────────── */
.ink-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    padding: 34px 18px;
    border: 1.5px dashed #d5deea; border-radius: 18px;
    background: #fbfcfe;
}
.ink-empty-lg { padding: 54px 22px; }
.ink-empty-ico {
    width: 52px; height: 52px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #ecfeff; color: var(--ink-teal); font-size: 1.35rem;
}
.ink-empty strong { color: var(--ink-ink); font-size: .95rem; font-weight: 900; }
.ink-empty span { color: var(--ink-muted); font-size: .82rem; font-weight: 600; max-width: 420px; }

/* Historial embebido en la card premium */
.ink-hist .inkreq-historial-filter { margin-top: 0; }
.ink-hist #inkreq-historial-list { max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.ink-hist #inkreq-historial-list::-webkit-scrollbar { width: 5px; }
.ink-hist #inkreq-historial-list::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 99px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .ink-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ink-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
    .ink-hero-cta, .ink-hero-ok { align-self: stretch; justify-content: center; }
    .ink-scope { max-width: none; }
    .ink-kpis { grid-template-columns: 1fr 1fr; }
    .ink-inv-tools { flex-direction: column; align-items: stretch; }
    .ink-fchips { justify-content: flex-start; }
    .ink-row-bar { max-width: 180px; }
}
@media (max-width: 420px) {
    .ink-kpis { grid-template-columns: 1fr; }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .ink > *, .ink-transfer, .ink-row-bar > i, .ink-hero-glow, .ink-hero-cta-badge { animation: none !important; }
    .ink-kpi, .ink-scope-chip, .ink-accept, .ink-row-out { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODALES PREMIUM (SweetAlert · .ink-swal) — se montan en document.body,
   fuera de .ink, por eso usan colores literales (sin var(--ink-*)).
═══════════════════════════════════════════════════════════════════════ */
.ink-swal.swal2-popup {
    width: 40em; max-width: 95vw;
    padding: 0;
    border-radius: 26px;
    border: 1px solid #eef1f6;
    box-shadow: 0 44px 96px -34px rgba(15,23,42,0.55);
    font-family: 'Outfit', sans-serif;
}
.ink-swal .swal2-title {
    display: flex; align-items: center; gap: 12px;
    justify-content: flex-start; text-align: left;
    margin: 0; padding: 22px 26px 15px;
    font-size: 1.18rem; font-weight: 900; color: #0f172a;
}
.ink-swal-ico {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    color: var(--c, #0891b2);
    background: color-mix(in srgb, var(--c, #0891b2) 14%, white);
}
.ink-swal .swal2-html-container {
    margin: 0; padding: 6px 26px; text-align: left;
    font-size: .95rem; color: #334155;
    max-height: 68vh; overflow-y: auto;
    scrollbar-width: thin;
}
.ink-swal .swal2-html-container::-webkit-scrollbar { width: 6px; }
.ink-swal .swal2-html-container::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 99px; }
.ink-swal .swal2-actions {
    margin: 16px 0 0; padding: 15px 24px 19px;
    gap: 10px; justify-content: flex-end; flex-wrap: wrap;
    border-top: 1px solid #f1f5f9;
}
.ink-swal .swal2-styled {
    margin: 0 !important;
    border-radius: 12px !important;
    padding: 11px 18px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important; font-size: .88rem !important;
    box-shadow: none !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.ink-swal .swal2-styled:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 24px -12px rgba(15,23,42,0.45); }
.ink-swal .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(8,145,178,0.28) !important; }
.ink-swal .swal2-validation-message { border-radius: 12px; margin: 12px 26px 0; font-weight: 700; font-family: 'Outfit', sans-serif; }

/* Formularios (salida / editar) */
.ink-fm { text-align: left; }
.ink-fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
.ink-fm-col2 { grid-column: span 2; }
.ink-fm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.ink-fm-field > span { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 900; letter-spacing: .04em; color: #64748b; text-transform: uppercase; }
.ink-fm-field > span i { color: #94a3b8; font-size: .78rem; width: 14px; text-align: center; }
.ink-fm-field input, .ink-fm-field textarea, .ink-fm-select select {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #e6ebf2; border-radius: 12px;
    padding: 11px 13px; background: #f8fafc;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem; color: #0f172a;
    outline: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ink-fm-field input:focus, .ink-fm-field textarea:focus, .ink-fm-select select:focus {
    border-color: #0891b2; background: #fff; box-shadow: 0 0 0 4px rgba(8,145,178,0.1);
}
.ink-fm-field textarea { min-height: 70px; resize: vertical; line-height: 1.4; }
.ink-fm-select { position: relative; }
.ink-fm-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; cursor: pointer; }
.ink-fm-select > i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .72rem; pointer-events: none; }
.ink-fm-hint {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px; border-radius: 11px;
    background: #ecfeff; border: 1px solid #cffafe; color: #0e7490;
    font-size: .82rem; font-weight: 700;
}
.ink-fm-hint b { font-weight: 900; }
.ink-fm-hint.is-low { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.ink-fm-hint.is-empty { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }

/* Combobox con búsqueda (Recibe / solicita) */
.ink-combo { position: relative; }
.ink-combo-control { position: relative; display: flex; align-items: center; }
.ink-combo-control > .fa-magnifying-glass { position: absolute; left: 13px; color: #94a3b8; font-size: .8rem; pointer-events: none; }
.ink-combo-input {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #e6ebf2; border-radius: 12px;
    padding: 11px 36px 11px 34px; background: #f8fafc;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem; color: #0f172a;
    outline: none; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.ink-combo-input::placeholder { color: #94a3b8; font-weight: 600; }
.ink-combo-input:focus { border-color: #0891b2; background: #fff; box-shadow: 0 0 0 4px rgba(8,145,178,0.1); cursor: text; }
.ink-combo-caret { position: absolute; right: 14px; color: #94a3b8; font-size: .72rem; pointer-events: none; transition: transform .2s ease; }
.ink-combo.is-open .ink-combo-caret { transform: rotate(180deg); color: #0891b2; }
.ink-combo-menu {
    position: fixed; z-index: 100000;
    padding: 6px; border-radius: 14px;
    background: #fff; border: 1.5px solid #e6ebf2;
    box-shadow: 0 30px 64px -26px rgba(15,23,42,0.5);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.ink-combo-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ink-combo-opts { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.ink-combo-opts::-webkit-scrollbar { width: 6px; }
.ink-combo-opts::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 99px; }
.ink-combo-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 10px; background: transparent;
    cursor: pointer; text-align: left; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .86rem; color: #0f172a;
    transition: background .12s ease;
}
.ink-combo-opt:hover, .ink-combo-opt.is-active { background: #ecfeff; }
.ink-combo-av {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef2f7; color: #64748b; font-size: .72rem; font-weight: 900;
}
.ink-combo-opt.is-selected .ink-combo-av { background: #0891b2; color: #fff; }
.ink-combo-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ink-combo-check { flex-shrink: 0; color: #0891b2; opacity: 0; font-size: .8rem; }
.ink-combo-opt.is-selected .ink-combo-check { opacity: 1; }
.ink-combo-none { padding: 16px; text-align: center; color: #94a3b8; font-size: .82rem; font-weight: 700; }

/* Detalle del movimiento */
.ink-dt { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.ink-dt-revert { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; background: #fef2f2; border: 1px solid #fecaca; }
.ink-dt-revert > i { color: #dc2626; font-size: 1.1rem; }
.ink-dt-revert strong { display: block; color: #b91c1c; font-weight: 900; font-size: .9rem; }
.ink-dt-revert span { display: block; color: #64748b; font-size: .76rem; font-weight: 600; margin-top: 1px; }
.ink-dt-head { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 16px; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px solid #eef2f7; }
.ink-dt-head.is-muted { opacity: .68; }
.ink-dt-ico {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--c, #0891b2);
    background: color-mix(in srgb, var(--c, #0891b2) 15%, white);
}
.ink-dt-head-txt { flex: 1; min-width: 0; }
.ink-dt-head-txt strong { display: block; font-size: 1.02rem; font-weight: 900; color: #0f172a; }
.ink-dt-head-txt span { display: block; font-size: .76rem; font-weight: 700; color: #64748b; margin-top: 1px; }
.ink-dt-qty { flex-shrink: 0; padding: 8px 14px; border-radius: 12px; font-size: 1.12rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ink-dt-qty.is-in { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.ink-dt-qty.is-out { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.ink-dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ink-dt-tile { padding: 11px 13px; border-radius: 13px; background: #f8fafc; border: 1px solid #eef2f7; }
.ink-dt-tile > span { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; margin-bottom: 3px; }
.ink-dt-tile > div { font-size: .88rem; font-weight: 800; color: #0f172a; }
.ink-dt-ti { font-size: .8rem; color: #94a3b8; }
.ink-dt-ti.is-amber { color: #d97706; }
.ink-dt-ti.is-teal { color: #0891b2; }
.ink-dt-folio { color: #2563eb; font-weight: 900; }
.ink-dt-items { border: 1px solid #e6effe; border-radius: 14px; overflow: hidden; }
.ink-dt-items-head { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: #eff6ff; color: #1d4ed8; font-size: .72rem; font-weight: 900; }
.ink-dt-table { display: flex; flex-direction: column; }
.ink-dt-trow { display: grid; grid-template-columns: 1fr auto 58px; align-items: center; gap: 10px; padding: 9px 13px; border-top: 1px solid #f1f5f9; }
.ink-dt-trow:first-child { border-top: none; }
.ink-dt-tprod { font-weight: 800; color: #0f172a; font-size: .84rem; display: inline-flex; align-items: center; gap: 7px; }
.ink-dt-tsku { color: #94a3b8; font-size: .74rem; font-weight: 700; }
.ink-dt-tqty { text-align: right; font-weight: 900; color: #1d4ed8; font-size: .86rem; }
.ink-dt-trow.is-total { background: #f8fbff; border-top: 1.5px solid #dbeafe; }
.ink-dt-trow.is-total .ink-dt-tprod { color: #64748b; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.ink-dt-note { padding: 12px 14px; border-radius: 13px; background: #fff7ed; border: 1px solid #fed7aa; }
.ink-dt-note > span { display: inline-flex; align-items: center; gap: 6px; font-size: .64rem; font-weight: 900; text-transform: uppercase; color: #b45309; }
.ink-dt-note p { margin: 5px 0 0; font-size: .86rem; color: #334155; font-weight: 600; line-height: 1.45; }

/* Detalle de KPI (listas) */
.ink-kd { text-align: left; }
.ink-kd-count { font-size: .74rem; font-weight: 800; color: #94a3b8; margin-bottom: 10px; }
.ink-kd-list { display: flex; flex-direction: column; gap: 8px; }
.ink-kd-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .14s ease, border-color .14s ease; }
.ink-kd-row:hover { transform: translateX(2px); border-color: #dbe3ee; }
.ink-kd-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #eef2ff; color: #6366f1; font-size: .9rem; }
.ink-kd-ico.is-teal { background: #ecfeff; color: #0891b2; }
.ink-kd-ico.is-blue { background: #eff6ff; color: #2563eb; }
.ink-kd-ico.is-amber { background: #fff7ed; color: #d97706; }
.ink-kd-ico.is-red { background: #fef2f2; color: #dc2626; }
.ink-kd-txt { flex: 1; min-width: 0; }
.ink-kd-txt strong { display: block; font-size: .88rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ink-kd-txt span { display: block; font-size: .74rem; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ink-kd-val { flex-shrink: 0; padding: 5px 11px; border-radius: 10px; font-size: .82rem; font-weight: 900; background: #f1f5f9; color: #334155; white-space: nowrap; }
.ink-kd-val.is-teal { background: #ecfeff; color: #0e7490; }
.ink-kd-val.is-blue { background: #eff6ff; color: #2563eb; }
.ink-kd-val.is-amber { background: #fff7ed; color: #c2410c; }
.ink-kd-val.is-red { background: #fef2f2; color: #dc2626; }
.ink-kd-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; text-align: center; color: #64748b; border: 1.5px dashed #d5deea; border-radius: 16px; background: #fbfcfe; }
.ink-kd-empty i { font-size: 1.5rem; color: #cbd5e1; }
.ink-kd-empty span { font-size: .86rem; font-weight: 700; }

/* Confirmaciones (aceptar / revertir) */
.ink-warn { text-align: left; }
.ink-warn-lead { margin: 0; font-size: .92rem; color: #334155; font-weight: 600; line-height: 1.5; }
.ink-warn-box { padding: 13px 15px; border-radius: 14px; background: #fef2f2; border: 1px solid #fecaca; }
.ink-warn-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 900; color: #b91c1c; margin-bottom: 5px; }
.ink-warn-box > div:last-child { color: #334155; font-size: .9rem; font-weight: 600; line-height: 1.45; }
.ink-warn-note { margin: 10px 0 0; color: #64748b; font-size: .82rem; font-weight: 600; }

@media (max-width: 560px) {
    .ink-fm-grid, .ink-dt-grid { grid-template-columns: 1fr; }
    .ink-fm-col2 { grid-column: span 1; }
    .ink-swal .swal2-actions { justify-content: stretch; }
    .ink-swal .swal2-actions .swal2-styled { flex: 1; }
}

/* ========= Almacen de tintas y rollos de plotter (legacy inkreq-*) ========= */
.inkreq-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inkreq-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,247,237,0.96), rgba(236,253,245,0.92));
    border: 1px solid rgba(245,158,11,0.18);
    box-shadow: 0 16px 34px rgba(15,23,42,0.05);
}

.inkreq-hero span {
    display: block;
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.inkreq-hero h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 900;
}

.inkreq-hero p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 700;
}

.inkreq-hero button {
    border: none;
    border-radius: 14px;
    padding: 11px 16px;
    background: #0f172a;
    color: white;
    font-family: Outfit, sans-serif;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.inkreq-hero button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.inkreq-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.inkreq-kpi,
.inkreq-panel,
.inkreq-transfer-card,
.inkreq-warehouse {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(148,163,184,0.22);
    box-shadow: 0 16px 34px rgba(15,23,42,0.06);
}

.inkreq-kpi {
    border-radius: 18px;
    padding: 16px;
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    grid-template-areas: "ico value arrow" "ico label arrow";
    gap: 2px 12px;
    align-items: center;
    cursor: pointer;
    text-align: left;
    border: 1px solid rgba(148,163,184,0.22);
    font-family: Outfit, sans-serif;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.inkreq-kpi:hover {
    transform: translateY(-2px);
    border-color: rgba(245,158,11,0.28);
    box-shadow: 0 20px 40px rgba(15,23,42,0.09);
}

.inkreq-kpi-ico {
    grid-area: ico;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-color);
    background: color-mix(in srgb, var(--ink-color) 12%, white);
}

.inkreq-kpi strong {
    grid-area: value;
    font-size: 1.35rem;
    color: #0f172a;
    font-weight: 900;
    line-height: 1;
}

.inkreq-kpi small {
    grid-area: label;
    color: #64748b;
    font-weight: 800;
    font-size: 0.74rem;
}

.inkreq-kpi em {
    grid-area: arrow;
    color: #94a3b8;
    font-style: normal;
    justify-self: end;
}

.inkreq-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.35fr);
    gap: 18px;
    align-items: start;
}

.inkreq-panel {
    border-radius: 22px;
    padding: 18px;
}

.inkreq-panel + .inkreq-panel,
.inkreq-activity {
    margin-top: 18px;
}

.inkreq-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.inkreq-panel-head span {
    display: block;
    color: #f59e0b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.inkreq-panel-head h3 {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.inkreq-panel-head > strong {
    min-width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-weight: 900;
}

.inkreq-transfer-list,
.inkreq-stock-table,
.inkreq-activity-list {
    display: grid;
    gap: 10px;
}

.inkreq-transfer-card {
    border-radius: 18px;
    padding: 14px;
}

.inkreq-transfer-top,
.inkreq-transfer-foot,
.inkreq-warehouse-head,
.inkreq-stock-row,
.inkreq-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inkreq-transfer-top strong,
.inkreq-stock-name strong,
.inkreq-activity-row strong {
    display: block;
    color: #0f172a;
    font-weight: 900;
}

.inkreq-transfer-top span,
.inkreq-transfer-top em,
.inkreq-transfer-foot span,
.inkreq-warehouse-head span,
.inkreq-stock-name span,
.inkreq-stock-count small,
.inkreq-activity-row span,
.inkreq-activity-row time {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.inkreq-transfer-top em {
    font-style: normal;
    white-space: nowrap;
}

.inkreq-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.inkreq-items span {
    padding: 6px 9px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 800;
}

.inkreq-items b {
    color: #15803d;
}

.inkreq-transfer-foot button,
.inkreq-stock-row button {
    border: none;
    border-radius: 12px;
    background: #0f172a;
    color: white;
    font-family: Outfit, sans-serif;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.inkreq-transfer-foot button {
    padding: 9px 12px;
}

.inkreq-stock-row button {
    width: 38px;
    height: 38px;
}

.inkreq-transfer-foot button:hover,
.inkreq-stock-row button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15,23,42,0.18);
}

.inkreq-warehouse {
    border-radius: 18px;
    padding: 14px;
}

.inkreq-warehouse + .inkreq-warehouse {
    margin-top: 12px;
}

.inkreq-warehouse h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.inkreq-stock-row {
    padding: 10px 0;
    border-top: 1px solid #e2e8f0;
}

.inkreq-stock-row.is-low .inkreq-stock-count b {
    color: #b45309;
    background: #fff7ed;
}

.inkreq-stock-name {
    min-width: 0;
    flex: 1;
}

.inkreq-stock-count {
    text-align: center;
    min-width: 64px;
}

.inkreq-stock-count b {
    display: inline-flex;
    min-width: 40px;
    height: 30px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: #15803d;
    background: #f0fdf4;
    font-weight: 900;
}

.inkreq-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.14);
    vertical-align: -1px;
}

.inkreq-empty-mini {
    padding: 22px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    color: #64748b;
    text-align: center;
    display: grid;
    gap: 5px;
}

.inkreq-empty-mini i {
    color: #94a3b8;
    font-size: 1.35rem;
}

.inkreq-empty-mini strong {
    color: #0f172a;
    font-weight: 900;
}

.inkreq-empty-mini span {
    font-size: 0.82rem;
    font-weight: 700;
}

.inkreq-activity-row {
    padding: 10px 0;
    border-top: 1px solid #e2e8f0;
}

.inkreq-activity-row i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #fff7ed;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inkreq-activity-row div {
    flex: 1;
    min-width: 0;
}

.inkreq-activity-row span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inkreq-swal-form {
    display: grid;
    gap: 8px;
    text-align: left;
    font-family: Outfit, sans-serif;
}

.inkreq-swal-form label {
    font-size: 0.72rem;
    font-weight: 900;
    color: #94a3b8;
    text-transform: uppercase;
}

.inkreq-swal-form select,
.inkreq-swal-form input,
.inkreq-swal-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 13px;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    outline: none;
}

.inkreq-swal-form textarea {
    min-height: 72px;
    resize: vertical;
}

.inkreq-kpi-detail {
    display: grid;
    gap: 10px;
    max-height: 440px;
    overflow: auto;
    text-align: left;
    font-family: Outfit, sans-serif;
}

.inkreq-detail-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.inkreq-detail-row > i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff7ed;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inkreq-detail-row strong {
    display: block;
    color: #0f172a;
    font-weight: 900;
}

.inkreq-detail-row span,
.inkreq-detail-empty span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
}

.inkreq-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

/* ── Historial filtrable ─────────────────────────────── */
.inkreq-hist-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1;
    font-size: 0.7rem; font-weight: 900; border-radius: 999px;
    padding: 3px 11px; white-space: nowrap; flex-shrink: 0;
}

.inkreq-historial-filter {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin: 8px 0 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px;
    flex-wrap: wrap;
}

.inkreq-month-nav {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.inkreq-month-arrow {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: white; color: #334155;
    font-size: 0.72rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    transition: background 0.14s, border-color 0.14s;
}
.inkreq-month-arrow:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.inkreq-month-arrow:disabled { opacity: 0.3; cursor: default; }

.inkreq-month-center {
    display: flex; flex-direction: column; align-items: center;
    gap: 1px; min-width: 92px; text-align: center;
}

.inkreq-month-label {
    font-size: 0.88rem; font-weight: 900; color: #0f172a;
    white-space: nowrap;
}

.inkreq-year-sel {
    font-size: 0.68rem; font-weight: 800; color: #64748b;
    background: transparent; border: none; cursor: pointer;
    font-family: var(--font-main); text-align: center;
    outline: none; padding: 0;
}
.inkreq-year-sel:hover { color: #0f172a; }

.inkreq-sep {
    width: 1px; height: 28px; background: #e2e8f0; flex-shrink: 0;
}

.inkreq-type-pills {
    display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
}

.inkreq-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 900;
    border: 1px solid #e2e8f0; background: white; color: #64748b;
    cursor: pointer; transition: all 0.14s; font-family: var(--font-main);
    white-space: nowrap;
}
.inkreq-pill:hover { border-color: #cbd5e1; color: #0f172a; }
.inkreq-pill.is-active                          { background: #0f172a; color: white; border-color: #0f172a; }
.inkreq-pill[data-tipo="Entrada"].is-active     { background: #16a34a; border-color: #16a34a; }
.inkreq-pill[data-tipo="Salida"].is-active      { background: #dc2626; border-color: #dc2626; }
.inkreq-pill[data-tipo="Transferencia"].is-active { background: #1d4ed8; border-color: #1d4ed8; }
.inkreq-pill[data-tipo="Ajuste"].is-active      { background: #b45309; border-color: #b45309; }

.inkreq-alm-wrap {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.inkreq-alm-sel {
    font-size: 0.75rem; font-weight: 800; color: #334155;
    background: white; border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 4px 8px; cursor: pointer; font-family: var(--font-main);
    outline: none; transition: border-color 0.14s;
    max-width: 180px;
}
.inkreq-alm-sel:hover, .inkreq-alm-sel:focus { border-color: #94a3b8; }

.inkreq-hist-loading {
    display: flex; justify-content: center; align-items: center;
    padding: 30px; color: #94a3b8; font-size: 1.15rem;
}

.inkreq-analytics-btn {
    background: linear-gradient(135deg, #0f172a, #155e75) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(15,23,42,0.22);
}

.inkreq-analytics-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15,23,42,0.30);
}

.inkreq-analytics-container {
    z-index: 2000000 !important;
}

.inkreq-analytics-popup {
    box-shadow: none !important;
    overflow: visible !important;
}

.inkreq-analytics-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.inkreq-analytics-close {
    color: #ffffff !important;
    top: 10px !important;
    right: 12px !important;
    transition: transform .18s ease, opacity .18s ease !important;
}

.inkreq-analytics-close:hover {
    transform: rotate(90deg) scale(1.05);
}

.inkreq-analytics {
    --inka-dark: #0f172a;
    --inka-muted: #64748b;
    width: min(1080px, 96vw);
    max-height: min(88vh, 880px);
    overflow: auto;
    padding: 16px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 10%,  rgba(59,130,246,0.16),  transparent 36%),
        radial-gradient(circle at 92% 18%, rgba(16,185,129,0.13),  transparent 34%),
        radial-gradient(circle at 50% 85%, rgba(245,158,11,0.10),  transparent 38%),
        linear-gradient(160deg, #0c1526 0%, #0f2744 50%, #0b1e1a 100%);
    font-family: Outfit, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.25) transparent;
}
.inkreq-analytics::-webkit-scrollbar { width: 5px; }
.inkreq-analytics::-webkit-scrollbar-track { background: transparent; }
.inkreq-analytics::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 99px; }

.inka-loading {
    min-height: 430px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: #ffffff;
    text-align: center;
}

.inka-loading i {
    font-size: 2.35rem;
    color: #fbbf24;
}

.inka-loading strong {
    font-size: 1.15rem;
    font-weight: 900;
}

.inka-loading span {
    color: rgba(255,255,255,0.72);
    font-weight: 700;
}

.inka-hero,
.inka-panel,
.inka-kpi,
.inka-static-scope {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.62);
    box-shadow: 0 22px 48px rgba(15,23,42,0.16);
}

.inka-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-radius: 24px;
    padding: 22px;
    margin-bottom: 14px;
}

.inka-hero span,
.inka-panel-title span,
.inka-controls label span,
.inka-static-scope span {
    display: block;
    color: #b45309;
    font-size: .7rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.inka-hero h2 {
    margin: 6px 0 4px;
    color: var(--inka-dark);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 900;
}

.inka-hero p {
    margin: 0;
    color: var(--inka-muted);
    font-size: .9rem;
    font-weight: 700;
}

.inka-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.inka-controls label {
    display: grid;
    gap: 6px;
    text-align: left;
}

.inka-controls select,
.inka-static-scope {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    padding: 9px 12px;
    font-family: Outfit, sans-serif;
    font-weight: 900;
    outline: none;
}

.inka-static-scope {
    display: grid;
    gap: 4px;
    min-width: 190px;
}

.inka-static-scope strong {
    color: #0f172a;
    font-size: .86rem;
}

.inka-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.inka-kpi {
    display: grid;
    gap: 12px;
    border-radius: 20px;
    padding: 15px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.inka-kpi-main {
    display: flex;
    gap: 12px;
    align-items: center;
}

.inka-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 54px rgba(15,23,42,0.20);
}

.inka-kpi-main > i {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tone) 12%, white);
    color: var(--tone);
    flex-shrink: 0;
}

.inka-kpi strong {
    display: block;
    color: #0f172a;
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1.05;
}

.inka-kpi span,
.inka-kpi small {
    display: block;
    color: #64748b;
    font-weight: 800;
}

.inka-kpi span {
    font-size: .72rem;
}

.inka-kpi small {
    margin-top: 3px;
    font-size: .68rem;
}

.inka-kpi-chart {
    height: 34px;
    display: flex;
    align-items: end;
    gap: 4px;
    padding: 8px 8px 6px;
    border-radius: 14px;
    background: rgba(248,250,252,0.92);
    border: 1px solid rgba(226,232,240,0.86);
}

.inka-kpi-chart i {
    flex: 1;
    min-width: 3px;
    border-radius: 999px 999px 3px 3px;
    opacity: .86;
    box-shadow: 0 4px 10px rgba(15,23,42,0.10);
}

.inka-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 14px;
    margin-bottom: 14px;
}

.inka-panel {
    border-radius: 22px;
    padding: 18px;
    overflow: hidden;
}

.inka-panel-wide {
    min-width: 0;
}

.inka-panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.inka-panel-title h3 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 900;
}

.inka-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.inka-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: .7rem;
    font-weight: 900;
}

.inka-legend span::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.inka-legend .is-in::before,
.inka-month-meter .is-in { background: #16a34a; }
.inka-legend .is-out::before,
.inka-month-meter .is-out { background: #dc2626; }
.inka-legend .is-transfer::before,
.inka-month-meter .is-transfer { background: #2563eb; }
.inka-legend .is-adjust::before,
.inka-month-meter .is-adjust { background: #b45309; }

.inka-months,
.inka-annual-list,
.inka-rank-list,
.inka-risk-list,
.inka-type-list,
.inka-warehouse-list,
.inka-insights {
    display: grid;
    gap: 9px;
}

.inka-month-row {
    display: grid;
    grid-template-columns: 42px minmax(120px, 1fr) 54px 86px;
    align-items: center;
    gap: 10px;
}

.inka-month-row > span {
    color: #334155;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.inka-month-row > strong,
.inka-annual-row em,
.inka-rank-row em {
    color: #0f172a;
    font-size: .8rem;
    font-style: normal;
    font-weight: 900;
    text-align: right;
}

.inka-month-row > small,
.inka-annual-row small,
.inka-rank-row small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
}

.inka-month-meter {
    position: relative;
    display: flex;
    width: 100%;
    max-width: var(--fill);
    min-width: 4px;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(15,23,42,.12);
    transition: max-width .45s ease;
}

.inka-month-meter b {
    display: block;
    min-width: 0;
    height: 100%;
}

.inka-gauge {
    width: min(100%, 310px);
    margin: 4px auto 16px;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    box-shadow: 0 18px 34px rgba(15,23,42,0.10);
}

.inka-gauge-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.inka-gauge-top strong {
    color: #0f172a;
    font-size: 2.15rem;
    font-weight: 900;
    line-height: 1;
}

.inka-gauge-top span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

.inka-gauge-bar {
    position: relative;
    height: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(15,23,42,0.12);
}

.inka-gauge-bar i {
    display: block;
    width: var(--score);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b 0%, #22c55e 62%, #16a34a 100%);
    box-shadow: 0 0 18px rgba(34,197,94,0.30);
    transition: width .5s ease;
}

.inka-gauge small {
    display: block;
    margin-top: 9px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.inka-insight,
.inka-risk-row,
.inka-rank-row,
.inka-annual-row,
.inka-type-row,
.inka-warehouse-row,
.inka-empty {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.inka-insight {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px;
}

.inka-insight i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0369a1;
    background: #e0f2fe;
    flex-shrink: 0;
}

.inka-insight.is-warning i { color: #b45309; background: #fff7ed; }
.inka-insight.is-ok i { color: #15803d; background: #f0fdf4; }
.inka-insight.is-focus i { color: #7c3aed; background: #f5f3ff; }

.inka-insight strong,
.inka-risk-row strong,
.inka-rank-row strong,
.inka-warehouse-row strong {
    display: block;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
}

.inka-insight span,
.inka-risk-row span,
.inka-rank-row span,
.inka-warehouse-row span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}

.inka-rank-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 48px 70px;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.inka-rank-row > b {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #0f172a;
    font-size: .72rem;
}

.inka-progress,
.inka-mini-meter,
.inka-type-row div,
.inka-annual-bar {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.inka-progress {
    height: 6px;
    margin-top: 7px;
}

.inka-consumption-bars {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.inka-consumption-bars span {
    position: relative;
    display: block;
    height: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

.inka-consumption-bars em {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.inka-consumption-bars span:nth-child(2) em {
    background: linear-gradient(90deg, #f59e0b, #16a34a);
}

.inka-consumption-bars b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 9px;
    color: #0f172a;
    font-size: .66rem;
    font-weight: 900;
}

.inka-progress i,
.inka-mini-meter span,
.inka-type-row i,
.inka-annual-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #16a34a);
    transition: width .45s ease;
}

.inka-risk-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.inka-risk-row > i {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    background: #fff7ed;
}

.inka-risk-row.is-critico > i { color: #dc2626; background: #fef2f2; }
.inka-risk-row.is-alto > i { color: #b45309; background: #fff7ed; }
.inka-risk-row.is-medio > i { color: #2563eb; background: #eff6ff; }

.inka-risk-row em {
    color: #475569;
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.inka-annual-row {
    display: grid;
    grid-template-columns: 58px minmax(100px, 1fr) 76px 150px;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.inka-annual-row > strong {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 900;
}

.inka-annual-bar {
    height: 10px;
}

.inka-annual-bar span {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.inka-type-row {
    display: grid;
    grid-template-columns: 112px minmax(90px, 1fr) 52px;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.inka-type-row > span,
.inka-type-row > strong {
    color: #334155;
    font-size: .74rem;
    font-weight: 900;
}

.inka-type-row div {
    height: 10px;
}

.inka-warehouse-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 90px;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.inka-mini-meter {
    height: 10px;
}

.inka-empty {
    min-height: 118px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 18px;
    text-align: center;
}

.inka-empty i {
    color: #94a3b8;
    font-size: 1.35rem;
}

.inka-empty strong {
    color: #0f172a;
    font-weight: 900;
}

.inka-empty span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .inka-kpi-grid,
    .inka-grid {
        grid-template-columns: 1fr;
    }
    .inka-hero {
        align-items: stretch;
        flex-direction: column;
    }
    .inka-controls {
        justify-content: stretch;
    }
    .inka-controls label,
    .inka-controls select,
    .inka-static-scope {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .inkreq-analytics {
        width: 96vw;
        padding: 12px;
        border-radius: 22px;
    }
    .inka-month-row,
    .inka-rank-row,
    .inka-risk-row,
    .inka-annual-row,
    .inka-type-row,
    .inka-warehouse-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .inka-month-row > strong,
    .inka-rank-row em,
    .inka-annual-row em {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALÍTICAS PREMIUM V2 — clases inka2-*
═══════════════════════════════════════════════════════════════════════ */

/* ── Header del modal ──────────────────────────────────────────────── */
.inka2-header {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 22px;
    padding: 20px 22px 16px;
    margin-bottom: 14px;
    backdrop-filter: blur(10px);
}
.inka2-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
.inka2-eyebrow {
    display: block;
    color: rgba(255,255,255,0.42);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.inka2-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    font-weight: 900;
    line-height: 1.1;
}
.inka2-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 7px 14px 7px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
.inka2-health-pill span  { color: rgba(255,255,255,0.68); font-size: .7rem;  font-weight: 800; }
.inka2-health-pill strong{ color: #ffffff;                font-size: .78rem; font-weight: 900; }

/* ── Navegación de mes ─────────────────────────────────────────────── */
.inka2-nav-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.inka2-month-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.09);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.inka2-month-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.18);
    transform: scale(1.06);
}
.inka2-month-btn:disabled { opacity: .3; cursor: default; }
.inka2-month-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .01em;
    min-width: 130px;
    text-align: center;
}
.inka2-wh-filter select {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.09);
    color: #fff;
    padding: 0 12px;
    height: 34px;
    font-family: Outfit, sans-serif;
    font-size: .8rem;
    font-weight: 800;
    outline: none;
    cursor: pointer;
}
.inka2-wh-filter select option { color: #0f172a; background: #fff; }

/* ── KPIs ──────────────────────────────────────────────────────────── */
.inka2-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.inka2-kpi {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 20px;
    padding: 16px 16px 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.15);
    transition: transform .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}
.inka2-kpi::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--kc, #2563eb);
    border-radius: 20px 0 0 20px;
}
.inka2-kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.20);
}
.inka2-kpi:hover .inka2-kpi-icon {
    background: color-mix(in srgb, var(--kc, #2563eb) 20%, white);
    transform: scale(1.08);
}
.inka2-kpi-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--kc, #2563eb) 11%, white);
    color: var(--kc, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background .2s ease, transform .2s ease;
}
.inka2-kpi-body strong {
    display: block;
    color: #0f172a;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 3px;
}
.inka2-kpi-body > span {
    display: block;
    color: #334155;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.inka2-kpi-body small {
    display: block;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 700;
    margin-top: 3px;
}

/* ── Animaciones de entrada ────────────────────────────────────────── */
@keyframes inka2FadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes inka2BarGrow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@keyframes inka2NumIn {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── KPI animaciones ───────────────────────────────────────────────── */
.inka2-kpi { animation: inka2FadeUp .4s ease both; }
.inka2-kpi:nth-child(1) { animation-delay: .05s; }
.inka2-kpi:nth-child(2) { animation-delay: .11s; }
.inka2-kpi:nth-child(3) { animation-delay: .17s; }
.inka2-kpi-body strong  { animation: inka2NumIn .45s cubic-bezier(.34,1.56,.64,1) .15s both; }

/* ── Grid de cards ─────────────────────────────────────────────────── */
.inka2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.inka2-card {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
    min-height: 260px;
    animation: inka2FadeUp .45s ease both;
    transition: box-shadow .25s ease, transform .25s ease;
    position: relative;
}
.inka2-grid:nth-child(3) .inka2-card:nth-child(1) { animation-delay: .22s; }
.inka2-grid:nth-child(3) .inka2-card:nth-child(2) { animation-delay: .28s; }
.inka2-grid:nth-child(4) .inka2-card:nth-child(1) { animation-delay: .34s; }
.inka2-grid:nth-child(4) .inka2-card:nth-child(2) { animation-delay: .40s; }
.inka2-card:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}
.inka2-card-head {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    flex-shrink: 0;
}
.inka2-card-head > i {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .86rem;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.inka2-card:hover .inka2-card-head > i {
    background: #e0f2fe;
    color: #0369a1;
}
.inka2-card-head strong { display: block; color: #0f172a; font-size: .92rem; font-weight: 900; }
.inka2-card-head > div > span { display: block; color: #94a3b8; font-size: .7rem; font-weight: 700; margin-top: 2px; }

/* ── Gráfica de barras mensual ─────────────────────────────────────── */
.inka2-month-bars {
    flex: 1;
    min-height: 140px;
    display: flex;
    gap: 4px;
    padding: 8px 0 22px;
    align-items: stretch;
    position: relative;
}
/* baseline rule */
.inka2-month-bars::after {
    content: '';
    position: absolute;
    bottom: 22px;
    left: 0; right: 0;
    height: 1px;
    background: rgba(226,232,240,0.8);
}
.inka2-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: default;
}
.inka2-bar-col:hover .inka2-bar-area { opacity: 1; }
.inka2-bar-area {
    flex: 1;
    width: 100%;
    position: relative;
    min-height: 40px;
}
/* current month full-column highlight */
.inka2-bar-col.is-current::before {
    content: '';
    position: absolute;
    inset: 0 -1px 20px;
    background: linear-gradient(to bottom, rgba(59,130,246,0.07), rgba(59,130,246,0.03));
    border: 1px solid rgba(59,130,246,0.18);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    z-index: 0;
}
/* bars: absolutely positioned from bottom, width fills column */
.inka2-bar {
    position: absolute;
    bottom: 0;
    width: calc(50% - 1.5px);
    height: var(--bh, 0%);
    min-height: 3px;
    border-radius: 5px 5px 2px 2px;
    transform-origin: bottom center;
    animation: inka2BarGrow .65s cubic-bezier(.34,1.56,.64,1) both;
    z-index: 1;
}
.inka2-bar.is-in {
    left: 0;
    background: linear-gradient(to bottom, #4ade80, #16a34a);
    box-shadow: 0 -2px 10px rgba(74,222,128,0.4);
}
.inka2-bar.is-out {
    right: 0;
    background: linear-gradient(to bottom, #f87171, #dc2626);
    box-shadow: 0 -2px 10px rgba(248,113,113,0.4);
}
.inka2-bar-col > span {
    position: absolute;
    bottom: 0;
    height: 20px;
    display: flex;
    align-items: flex-end;
    color: #94a3b8;
    font-size: .58rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
}
.inka2-bar-col.is-current > span {
    color: #3b82f6;
    font-weight: 900;
}

/* ── Tooltip de barras ─────────────────────────────────────────────── */
.inka2-bar-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 9px 11px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    min-width: 110px;
}
.inka2-bar-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}
.inka2-bar-col:hover .inka2-bar-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.inka2-bar-tip strong {
    display: block;
    color: #ffffff;
    font-size: .74rem;
    font-weight: 900;
    margin-bottom: 7px;
    text-align: center;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.inka2-bar-tip span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.8);
    font-size: .71rem;
    font-weight: 700;
}
.inka2-bar-tip span + span { margin-top: 4px; }
.inka2-bar-tip em {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    flex-shrink: 0;
}
.inka2-bar-tip .c-in  { background: #4ade80; }
.inka2-bar-tip .c-out { background: #f87171; }

/* ── Leyenda del gráfico ───────────────────────────────────────────── */
.inka2-chart-legend {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}
.inka2-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
}
.inka2-chart-legend span::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.inka2-chart-legend .is-in::before  { background: linear-gradient(135deg, #4ade80, #16a34a); }
.inka2-chart-legend .is-out::before { background: linear-gradient(135deg, #f87171, #dc2626); }

/* ── Lista de observaciones ────────────────────────────────────────── */
.inka2-insights-list { display: grid; gap: 8px; }

/* ── Ranking de consumo ────────────────────────────────────────────── */
.inka2-rank-list { display: grid; gap: 8px; }
.inka2-rank-item {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
    animation: inka2FadeUp .4s ease both;
}
.inka2-rank-item:nth-child(1) { animation-delay: .30s; }
.inka2-rank-item:nth-child(2) { animation-delay: .36s; }
.inka2-rank-item:nth-child(3) { animation-delay: .42s; }
.inka2-rank-item:nth-child(4) { animation-delay: .48s; }
.inka2-rank-item:nth-child(5) { animation-delay: .54s; }
.inka2-rank-item:hover {
    border-color: #bfdbfe;
    background: #f0f9ff;
    transform: translateX(3px);
    box-shadow: 0 4px 14px rgba(59,130,246,0.10);
}
.inka2-rank-num {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inka2-rank-info strong { display: block; color: #0f172a; font-size: .82rem; font-weight: 900; }
.inka2-rank-info > span { display: block; color: #94a3b8; font-size: .7rem; font-weight: 700; margin-top: 1px; }
.inka2-rank-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 99px;
    margin-top: 7px;
    overflow: hidden;
}
.inka2-rank-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    border-radius: inherit;
    transform-origin: left center;
    animation: inka2BarWidthIn .7s cubic-bezier(.34,1.2,.64,1) .45s both;
}
@keyframes inka2BarWidthIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.inka2-rank-val {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

/* ── Reposición / alertas ──────────────────────────────────────────── */
.inka2-risk-list { display: grid; gap: 8px; }
.inka2-risk-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
    animation: inka2FadeUp .4s ease both;
}
.inka2-risk-item:nth-child(1) { animation-delay: .30s; }
.inka2-risk-item:nth-child(2) { animation-delay: .36s; }
.inka2-risk-item:nth-child(3) { animation-delay: .42s; }
.inka2-risk-item:nth-child(4) { animation-delay: .48s; }
.inka2-risk-item:nth-child(5) { animation-delay: .54s; }
.inka2-risk-item:nth-child(6) { animation-delay: .60s; }
.inka2-risk-item.is-critico:hover { border-color: #fecaca; background: #fff5f5; transform: translateX(3px); }
.inka2-risk-item.is-alto:hover    { border-color: #fed7aa; background: #fffbf5; transform: translateX(3px); }
.inka2-risk-item.is-medio:hover   { border-color: #ddd6fe; background: #fdf8ff; transform: translateX(3px); }
.inka2-risk-item > i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    color: #b45309;
    background: #fff7ed;
}
.inka2-risk-item.is-critico > i { color: #dc2626; background: #fef2f2; }
.inka2-risk-item.is-alto    > i { color: #b45309; background: #fff7ed; }
.inka2-risk-item.is-medio   > i { color: #7c3aed; background: #f5f3ff; }
.inka2-risk-info strong { display: block; color: #0f172a; font-size: .82rem; font-weight: 900; }
.inka2-risk-info > span { display: block; color: #94a3b8; font-size: .7rem; font-weight: 700; margin-top: 1px; }
.inka2-sev-badge {
    padding: 3px 9px;
    border-radius: 99px;
    font-size: .65rem;
    font-weight: 900;
    white-space: nowrap;
    background: #fff7ed;
    color: #b45309;
}
.inka2-sev-badge.is-critico    { background: #fef2f2; color: #dc2626; }
.inka2-sev-badge.is-alto       { background: #fff7ed; color: #b45309; }
.inka2-sev-badge.is-medio      { background: #f5f3ff; color: #7c3aed; }
.inka2-sev-badge.is-observacion{ background: #f0fdf4; color: #15803d; }

/* ── Estado vacío v2 ───────────────────────────────────────────────── */
.inka2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}
.inka2-empty i    { font-size: 1.4rem; color: #cbd5e1; }
.inka2-empty span { font-size: .8rem; font-weight: 700; color: #94a3b8; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .inka2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .inka2-kpis { grid-template-columns: 1fr 1fr; }
    .inka2-kpi:last-child { grid-column: span 2; }
    .inka2-header { padding: 14px; }
    .inka2-header-top { flex-wrap: wrap; }
    .inka2-month-label { min-width: 110px; font-size: .9rem; }
}

@media (max-width: 980px) {
    .inkreq-layout {
        grid-template-columns: 1fr;
    }
    .inkreq-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .intranet-fullscreen .portal-content-full { padding: 14px 12px 22px; }
    .portal-home-btn span { display: none; }
}

@media (max-width: 1280px) {
    .intranet-fullscreen .portal-topbar,
    .portal-topbar {
        grid-template-columns: minmax(220px, 300px) minmax(360px, 1fr);
    }

    .intranet-fullscreen .portal-top-actions,
    .portal-top-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .intranet-fullscreen .portal-content-full {
        height: auto;
        min-height: 100vh;
        max-width: none;
    }

    .intranet-fullscreen .portal-topbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        align-content: start;
        gap: 12px;
    }

    .intranet-fullscreen .portal-top-actions {
        display: flex;
        min-width: 100%;
        max-width: 100%;
        flex: none;
        align-items: center;
        align-content: flex-start;
        justify-content: flex-start;
        gap: 12px;
    }

    .intranet-fullscreen .portal-search {
        flex: none;
        width: 54px;
        max-width: none;
        min-width: 54px;
        order: 2;
    }

    .intranet-fullscreen .portal-search.is-open,
    .intranet-fullscreen .portal-search:focus-within {
        width: min(100%, 620px);
        max-width: min(100%, 620px);
    }

    .portal-live-cluster {
        flex: 1 1 100%;
        order: 0;
        align-items: stretch;
    }

    .portal-clock-chip,
    .portal-weather-chip {
        flex: 1 1 0;
    }

    .portal-weather-chip {
        max-width: none;
    }

    .portal-session-user,
    .portal-session-login {
        width: auto;
        max-width: 230px;
        justify-content: center;
    }
}

@media (max-width: 520px) {
    .portal-title {
        width: 100%;
        box-sizing: border-box;
    }

    .portal-session-login,
    #cabo-user-chip-host,
    .portal-session-chip {
        flex: 1 1 100%;
    }

    .intranet-fullscreen .portal-search {
        min-width: 54px;
    }

    .portal-session-user,
    .portal-session-login {
        width: 100%;
        max-width: none;
    }

    .portal-live-cluster {
        flex-direction: column;
    }

    .portal-weather-text small {
        max-width: calc(100vw - 120px);
    }

    body.portal-rail-active .portal-content-full {
        padding-left: 12px;
        padding-bottom: 92px;
    }

    body.portal-rail-active .portal-topbar {
        width: 100%;
        margin-left: 0;
    }

    .portal-quick-rail {
        top: auto;
        left: 50%;
        bottom: 14px;
        max-width: calc(100vw - 24px);
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-radius: 24px;
        transform: translate(-50%, 120%) scale(0.96);
    }

    body.portal-rail-active .portal-quick-rail {
        transform: translate(-50%, 0) scale(1);
    }

    .portal-rail-btn {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .portal-rail-ico {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .portal-rail-label {
        display: none;
    }

    .portal-rail-btn:hover,
    .portal-rail-btn:focus-visible {
        transform: translateY(-4px) scale(1.05);
    }
}

/* =====================================================================
   WIDGETS FLOTANTES LATERALES — aparecen al hacer scroll
   ===================================================================== */

/* Widgets flotantes laterales — aparecen al hacer scroll */
.scroll-widget-left,
.scroll-widget-right {
    position: fixed;
    top: clamp(14px, 1.4vw, 24px); /* misma alineación que el topbar */
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    /* Panel de cristal esmerilado premium: separa los widgets del fondo
       al hacer scroll para que nunca se pierdan con el contenido detras. */
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(22px) saturate(185%);
    -webkit-backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 22px;
    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition:
        opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Izquierdo: logo + clima, justo a la derecha del rail */
.scroll-widget-left {
    left: clamp(82px, 8vw, 110px); /* después del rail */
    transform: translate3d(-42px, -8px, 0) scale(0.86);
    transform-origin: left top;
}

/* Derecho: hora + usuario + refresh, pegado al borde derecho */
.scroll-widget-right {
    right: clamp(14px, 1.8vw, 28px);
    align-items: flex-end;
    transform: translate3d(42px, -8px, 0) scale(0.86);
    transform-origin: right top;
}

/* Activados cuando hay scroll */
body.portal-scrolled .scroll-widget-left,
body.portal-scrolled .scroll-widget-right {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Preferencia premium: encabezado flotante desactivado -> ocultar los widgets
   aunque haya scroll. La campana/usuario permanecen en la barra superior
   (intranet.js no los reubica cuando el body tiene esta clase). */
body.float-widgets-off .scroll-widget-left,
body.float-widgets-off .scroll-widget-right {
    opacity: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Solo aparecen dentro de módulos */
body:not(.portal-in-module) .scroll-widget-left,
body:not(.portal-in-module) .scroll-widget-right {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Widgets flotantes limpios al hacer scroll */
.sw-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    transition: transform 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    text-shadow: none;
}
.sw-card:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

.sw-logo {
    cursor: pointer;
    padding: 0 !important;
    min-width: 0;
    justify-content: center;
}

.sw-weather-card {
    cursor: pointer;
    padding: 0 !important;
    min-width: 0;
}

.sw-clock-card {
    min-width: 0;
    padding: 0 !important;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
}

.sw-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sw-card:empty {
    display: none;
}

.sw-notifications,
.sw-user {
    min-height: 0;
    padding: 0 !important;
}

.scroll-widget-right .global-announcer,
.scroll-widget-right #cabo-user-chip-host,
.scroll-widget-right .portal-session-chip {
    grid-area: auto;
    justify-self: auto;
    align-self: center;
}

.scroll-widget-right .global-announcer-bell,
.scroll-widget-right .portal-icon-btn,
.scroll-widget-right .portal-session-login,
.scroll-widget-right .portal-session-loading,
.scroll-widget-right .cabo-user-chip-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.scroll-widget-right .global-announcer-bell:hover,
.scroll-widget-right .portal-icon-btn:hover,
.scroll-widget-right .portal-session-login:hover,
.scroll-widget-right .cabo-user-chip-button:hover {
    background: rgba(15, 23, 42, 0.06) !important;
    box-shadow: none !important;
}

.scroll-widget-right .global-announcer-panel {
    top: 54px;
    right: 0;
}

.scroll-widget-right .cabo-user-chip-menu {
    right: 0;
    left: auto;
}

@media (max-width: 900px) {
    .scroll-widget-left,
    .scroll-widget-right {
        padding: 9px 12px;
        border-radius: 18px;
        gap: 8px;
    }

    .scroll-widget-left {
        left: 12px;
        top: 10px;
    }

    .scroll-widget-right {
        right: 10px;
        top: 64px;
        max-width: calc(100vw - 20px);
        align-items: flex-end;
    }

    .sw-logo,
    .sw-weather-card {
        min-width: 0;
    }

    .sw-logo img {
        height: 44px;
    }

    .sw-weather-meta {
        max-width: 78px;
    }

    .scroll-widget-right .global-announcer-panel {
        right: 0;
        width: min(420px, calc(100vw - 24px));
    }
}

/* Logo mini */
.sw-logo img {
    height: 58px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(15,23,42,0.14));
    cursor: pointer;
}

/* Clima mini */
.sw-weather-ico {
    width: 30px; height: 30px;
    border-radius: 0;
    background: transparent;
    color: var(--cabo-orange);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.sw-weather-ico.is-cold   { background: transparent; color: #1e40af; }
.sw-weather-ico.is-rainy  { background: transparent; color: #1e293b; }
.sw-weather-ico.is-night  { background: transparent; color: #f59e0b; }
.sw-weather-ico.is-storm  { background: transparent; color: #c2410c; }

.sw-weather-temp {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--cabo-dark);
    line-height: 1;
}
.sw-weather-meta {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
    max-width: 136px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fecha/hora mini */
.sw-clock-date {
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
.sw-clock-time {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cabo-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Botón refresh mini */
.sw-btn {
    width: 34px; height: 34px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: #64748b;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.25s ease;
    flex-shrink: 0;
}
.sw-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--cabo-orange);
    transform: rotate(90deg);
}

/* =====================================================================
   AVATARES CON FOTO (org / oficina / contacto / directorio)
   Cuando el avatar trae .has-photo, la imagen llena el contenedor
   manteniendo la forma redonda del estilo original.
   ===================================================================== */
.org-avatar.has-photo,
.office-avatar.has-photo,
.contact-avatar.has-photo,
.employee-avatar.has-photo {
    padding: 0;
    overflow: hidden;
    background: #fff7ed;
}
.org-avatar.has-photo img,
.office-avatar.has-photo img,
.contact-avatar.has-photo img,
.employee-avatar.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================================================
   TOPBAR INTRANET - widget ordenado y configurable
   ===================================================================== */
body.intranet-page .portal-topbar,
body.intranet-page.intranet-fullscreen .portal-topbar {
    display: grid;
    grid-template-columns: minmax(190px, 280px) minmax(0, 1fr);
    align-items: center;
    max-width: none;
    min-height: 74px;
    padding: 10px clamp(24px, 2vw, 36px) 14px;
    margin-bottom: clamp(22px, 2.4vw, 34px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    gap: clamp(18px, 3vw, 54px);
}

body.intranet-page .portal-title,
body.intranet-page.intranet-fullscreen .portal-title {
    display: none !important;
}

body.intranet-page .topbar-logo-center,
body.intranet-page.intranet-fullscreen .topbar-logo-center {
    position: static !important;
    inset: auto !important;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    filter: none;
    transform: none;
    pointer-events: none;
    z-index: auto;
}

body.intranet-page:not(.portal-in-module) .topbar-logo-center {
    display: none !important;
}

body.intranet-page:not(.portal-in-module) .portal-topbar,
body.intranet-page.intranet-fullscreen:not(.portal-in-module) .portal-topbar {
    grid-template-columns: minmax(0, 1fr);
}

body.intranet-page .topbar-logo-center img {
    width: clamp(178px, 15vw, 238px);
    height: auto;
    max-height: 48px;
    object-fit: contain;
    cursor: pointer;
    filter: drop-shadow(0 8px 18px rgba(15,23,42,0.10));
    pointer-events: auto;
}

body.intranet-page .portal-top-actions,
body.intranet-page.intranet-fullscreen .portal-top-actions {
    width: 100%;
    max-width: none;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(13px, 1.6vw, 26px);
    min-width: 0;
}

body.intranet-page .global-announcer,
body.intranet-page #portal-refresh,
body.intranet-page .portal-session-chip,
body.intranet-page #cabo-user-chip-host {
    min-width: 0;
}

body.intranet-page .portal-live-cluster {
    order: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

body.intranet-page .portal-weather-chip {
    width: auto;
    max-width: 292px;
    min-height: 46px;
    padding: 2px 8px 2px 0;
    gap: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 20px;
    cursor: pointer;
    outline: none;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

body.intranet-page .portal-weather-chip:hover,
body.intranet-page .portal-weather-chip:focus-visible {
    background: rgba(255,255,255,0.56);
    transform: translateY(-1px);
}

body.intranet-page .portal-weather-ico {
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: transparent !important;
    color: var(--cabo-orange);
    font-size: 1.35rem;
    flex: 0 0 32px;
}

body.intranet-page .portal-weather-text {
    min-width: 0;
    gap: 1px;
}

body.intranet-page .portal-weather-text strong {
    color: #0f172a;
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

body.intranet-page .portal-weather-text strong span {
    font-size: 0.42em !important;
    color: #64748b !important;
    font-weight: 800 !important;
}

body.intranet-page .portal-weather-text small {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.intranet-page .portal-clock-chip {
    order: 2;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 0 0 0 clamp(16px, 1.5vw, 24px);
    border: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.14);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

body.intranet-page .portal-clock-chip strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    text-align: left;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.intranet-page .portal-clock-chip span {
    color: #64748b;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

body.intranet-page .global-announcer {
    order: 4;
    justify-self: end;
    align-self: center;
    padding-left: clamp(16px, 1.5vw, 24px);
    border-left: 1px solid rgba(15, 23, 42, 0.14);
}

body.intranet-page #portal-refresh {
    order: 3;
    justify-self: end;
    align-self: center;
}

body.intranet-page .portal-session-chip,
body.intranet-page #cabo-user-chip-host {
    order: 5;
    justify-self: end;
    align-self: center;
}

body.intranet-page .global-announcer-bell,
body.intranet-page .portal-icon-btn,
body.intranet-page .portal-session-login,
body.intranet-page .portal-session-loading {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 50%;
    color: #64748b;
}

body.intranet-page .global-announcer-bell:hover,
body.intranet-page .portal-icon-btn:hover,
body.intranet-page .portal-session-login:hover,
body.intranet-page .portal-session-loading:hover {
    color: var(--cabo-orange);
    background: rgba(255,255,255,0.5);
    transform: translateY(-1px);
}

body.intranet-page .global-announcer-badge {
    top: 0;
    right: 0;
}

body.intranet-page .portal-session-login {
    width: auto;
    padding: 0 12px;
    gap: 8px;
    border-radius: 24px;
    font-size: 0.86rem;
    font-weight: 900;
}

body.intranet-page .portal-session-login span {
    display: inline;
}

body.intranet-page .cabo-user-chip-button {
    min-height: 42px;
    height: 42px;
    padding: 0;
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 26px;
}

body.intranet-page .cabo-user-chip-button:hover {
    background: rgba(255,255,255,0.38);
    box-shadow: none;
    transform: translateY(-1px);
}

body.intranet-page .cabo-user-chip-clock {
    display: none !important;
}

body.intranet-page .cabo-user-chip-name {
    max-width: 164px;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.intranet-page .cabo-user-chip-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 1.5px solid rgba(181, 132, 66, 0.75);
    box-shadow: 0 12px 28px rgba(15,23,42,0.16);
}

body.intranet-page .cabo-user-chip-menu {
    top: 58px;
    right: 0;
}

.weather-config-modal {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.weather-config-option {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.weather-config-option > span {
    min-width: 0;
}

.weather-config-option:hover,
.weather-config-option:has(input:checked) {
    border-color: rgba(249,115,22,0.45);
    background: #fff7ed;
    transform: translateY(-1px);
}

.weather-config-option input {
    margin-top: 4px;
    accent-color: var(--cabo-orange);
}

.weather-config-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 900;
}

.weather-config-title i {
    color: var(--cabo-orange);
}

.weather-config-option small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

.weather-config-place {
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    outline: none;
}

.weather-place-suggestions {
    display: none;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: white;
    box-shadow: 0 14px 28px rgba(15,23,42,0.08);
}

.weather-place-suggestions.is-open {
    display: grid;
    gap: 4px;
}

.weather-place-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.weather-place-suggestion:hover {
    background: #fff7ed;
    color: #c2410c;
}

.weather-place-suggestion i {
    color: var(--cabo-orange);
}

.weather-config-place:focus {
    border-color: var(--cabo-orange);
    box-shadow: 0 0 0 4px rgba(249,115,22,0.12);
}

/* =====================================================================
   CLIMA - tarjeta de anuncios y detalle semanal
   ===================================================================== */
.announcement-weather-card {
    min-height: 218px;
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.announcement-weather-card::after {
    content: "Ver detalle";
    position: absolute;
    right: 14px;
    bottom: 12px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 900;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.announcement-weather-card:hover,
.announcement-weather-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(59,130,246,0.35) !important;
    box-shadow: 0 18px 38px rgba(59,130,246,0.14) !important;
    outline: none;
}

.announcement-weather-card:hover::after,
.announcement-weather-card:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.announcement-weather-card > div:last-child {
    flex: 1;
    justify-content: center;
    gap: 6px !important;
}

.announcement-weather-card #anu-weather-icon {
    font-size: 2.55rem !important;
    color: #f59e0b;
}

.announcement-weather-card #anu-weather-temp {
    font-size: 2.45rem !important;
}

.announcement-weather-card #anu-weather-desc {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════
   CLIMA — Animaciones premium por condición meteorológica
   ══════════════════════════════════════════════════════════════════ */

/* Base: clipping + posicionamiento para pseudo-elementos */
.announcement-weather-card {
    overflow: hidden;
    position: relative;
}
.announcement-weather-card::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    transition: background 0.8s ease, opacity 0.8s ease;
}
.announcement-weather-card > * { position: relative; z-index: 1; }

/* Partículas DOM inyectadas por JS */
._wx_particle { position: absolute; pointer-events: none; z-index: 0; }

/* ── Keyframes ───────────────────────────────────────────────────── */
@keyframes _wxSunPulse {
    0%,100% { transform: translateX(-50%) scale(1);     opacity: 0.65; }
    50%      { transform: translateX(-50%) scale(1.22);  opacity: 1; }
}
@keyframes _wxMoonGlow {
    0%,100% { transform: translateX(-50%) scale(1);    opacity: 0.38; }
    50%      { transform: translateX(-50%) scale(1.12); opacity: 0.62; }
}
@keyframes _wxCloudDrift {
    0%,100% { transform: translateX(0)    scale(1);     opacity: 0.45; }
    50%      { transform: translateX(14px) scale(1.04);  opacity: 0.62; }
}
@keyframes _wxRainDrop {
    0%   { transform: translateY(-10px); opacity: 0.75; }
    100% { transform: translateY(280px); opacity: 0; }
}
@keyframes _wxSnowFall {
    0%   { transform: translateY(-10px) rotate(0deg);    opacity: 0.9; }
    100% { transform: translateY(280px) rotate(360deg);  opacity: 0; }
}
@keyframes _wxTwinkle {
    0%,100% { opacity: 0.1;  transform: scale(0.55); }
    50%      { opacity: 1;    transform: scale(1.45); }
}
@keyframes _wxLightning {
    0%,84%,100%  { background: transparent; }
    86%,91%      { background: rgba(196,181,253,0.14); }
    87%,92%      { background: transparent; }
    94%           { background: rgba(196,181,253,0.09); }
}

/* ── Clases de partículas ───────────────────────────────────────── */
._wx_rain {
    width: 1.5px; height: 15px; top: 0;
    background: linear-gradient(transparent, rgba(147,197,253,0.65));
    border-radius: 1px;
    animation: _wxRainDrop linear infinite;
}
._wx_rain_heavy {
    width: 1px; height: 20px; top: 0;
    background: linear-gradient(transparent, rgba(186,230,253,0.5));
    border-radius: 1px;
    transform-origin: top;
    transform: rotate(12deg);
    animation: _wxRainDrop linear infinite;
}
._wx_star {
    border-radius: 50%;
    background: #ffffff;
    animation: _wxTwinkle ease-in-out infinite alternate;
}
._wx_snow {
    animation: _wxSnowFall linear infinite;
    color: rgba(186,230,253,0.95);
    font-style: normal;
    line-height: 1;
}
._wx_cloud {
    border-radius: 50px;
    background: rgba(226,232,240,0.55);
    filter: blur(14px);
    animation: _wxCloudDrift ease-in-out infinite;
    z-index: 0;
}
._wx_lightning {
    position: absolute; inset: 0;
    animation: _wxLightning 3.5s ease-in-out infinite;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
}

/* ── SUNNY ─────────────────────────────────────────────────────── */
.announcement-weather-card.weather-sunny {
    background: linear-gradient(155deg, #fefce8 0%, #fef9c3 25%, #fde68a 55%, #fed7aa 85%, #fff7ed 100%) !important;
    border-color: rgba(251,191,36,0.5) !important;
}
.announcement-weather-card.weather-sunny::before {
    width: 160px; height: 160px;
    top: -55px; left: 50%;
    background: radial-gradient(circle, rgba(253,224,71,0.85) 0%, rgba(251,191,36,0.38) 45%, transparent 70%);
    animation: _wxSunPulse 3.5s ease-in-out infinite;
}
.announcement-weather-card.weather-sunny #anu-weather-icon { color: #d97706 !important; }
.announcement-weather-card.weather-sunny #anu-weather-temp { color: #78350f !important; font-weight: 900; }
.announcement-weather-card.weather-sunny #anu-weather-desc { color: #92400e !important; }
.announcement-weather-card.weather-sunny #anu-weather-loc  { color: #b45309 !important; }
.announcement-weather-card.weather-sunny > div:first-child > span { color: #92400e !important; }
.announcement-weather-card.weather-sunny > div:first-child > div  { background: rgba(251,191,36,0.18) !important; }
.announcement-weather-card.weather-sunny > div:first-child > div i { color: #d97706 !important; }

/* ── CLOUDY ─────────────────────────────────────────────────────── */
.announcement-weather-card.weather-cloudy {
    background: linear-gradient(155deg, #f8fafc 0%, #f1f5f9 40%, #e8edf4 100%) !important;
    border-color: rgba(148,163,184,0.45) !important;
}
.announcement-weather-card.weather-cloudy::before {
    width: 210px; height: 90px;
    top: -18px; left: 50%;
    background: radial-gradient(ellipse, rgba(203,213,225,0.65) 0%, transparent 70%);
    filter: blur(18px);
    border-radius: 50px;
    animation: _wxCloudDrift 6s ease-in-out infinite;
}
.announcement-weather-card.weather-cloudy #anu-weather-icon { color: #64748b !important; }
.announcement-weather-card.weather-cloudy #anu-weather-temp { color: #0f172a !important; }

/* ── RAINY ──────────────────────────────────────────────────────── */
.announcement-weather-card.weather-rainy {
    background: linear-gradient(155deg, #0d1f3c 0%, #1a3360 40%, #1d4585 70%, #1e3a8a 100%) !important;
    border-color: rgba(59,130,246,0.5) !important;
}
.announcement-weather-card.weather-rainy::before {
    width: 180px; height: 180px;
    top: -60px; left: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.28) 0%, transparent 65%);
    animation: _wxMoonGlow 5s ease-in-out infinite;
}
.announcement-weather-card.weather-rainy #anu-weather-icon { color: #93c5fd !important; }
.announcement-weather-card.weather-rainy #anu-weather-temp { color: #ffffff !important; font-weight: 900; }
.announcement-weather-card.weather-rainy #anu-weather-desc { color: rgba(255,255,255,0.75) !important; }
.announcement-weather-card.weather-rainy #anu-weather-loc  { color: rgba(255,255,255,0.5) !important; }
.announcement-weather-card.weather-rainy > div:first-child > span { color: rgba(255,255,255,0.55) !important; }
.announcement-weather-card.weather-rainy > div:first-child > div  { background: rgba(255,255,255,0.08) !important; }
.announcement-weather-card.weather-rainy > div:first-child > div i { color: #93c5fd !important; }

/* ── STORM ──────────────────────────────────────────────────────── */
.announcement-weather-card.weather-storm {
    background: linear-gradient(155deg, #09090f 0%, #150d28 35%, #0c1629 60%, #0f172a 100%) !important;
    border-color: rgba(139,92,246,0.55) !important;
}
.announcement-weather-card.weather-storm::before {
    width: 220px; height: 220px;
    top: -80px; left: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.22) 0%, rgba(79,70,229,0.1) 50%, transparent 70%);
    animation: _wxSunPulse 2.2s ease-in-out infinite;
}
.announcement-weather-card.weather-storm #anu-weather-icon { color: #a78bfa !important; }
.announcement-weather-card.weather-storm #anu-weather-temp { color: #ffffff !important; font-weight: 900; }
.announcement-weather-card.weather-storm #anu-weather-desc { color: rgba(255,255,255,0.75) !important; }
.announcement-weather-card.weather-storm #anu-weather-loc  { color: rgba(255,255,255,0.5) !important; }
.announcement-weather-card.weather-storm > div:first-child > span { color: rgba(255,255,255,0.55) !important; }
.announcement-weather-card.weather-storm > div:first-child > div  { background: rgba(255,255,255,0.06) !important; }
.announcement-weather-card.weather-storm > div:first-child > div i { color: #a78bfa !important; }

/* ── NIGHT ──────────────────────────────────────────────────────── */
.announcement-weather-card.weather-night {
    background: linear-gradient(155deg, #07080f 0%, #0f0f23 30%, #130d28 60%, #0a0f1e 100%) !important;
    border-color: rgba(99,102,241,0.45) !important;
}
.announcement-weather-card.weather-night::before {
    width: 130px; height: 130px;
    top: -35px; left: 50%;
    background: radial-gradient(circle, rgba(165,180,252,0.3) 0%, rgba(99,102,241,0.14) 55%, transparent 75%);
    animation: _wxMoonGlow 4s ease-in-out infinite;
}
.announcement-weather-card.weather-night #anu-weather-icon { color: #c7d2fe !important; }
.announcement-weather-card.weather-night #anu-weather-temp { color: #ffffff !important; font-weight: 900; }
.announcement-weather-card.weather-night #anu-weather-desc { color: rgba(255,255,255,0.75) !important; }
.announcement-weather-card.weather-night #anu-weather-loc  { color: rgba(255,255,255,0.5) !important; }
.announcement-weather-card.weather-night > div:first-child > span { color: rgba(255,255,255,0.55) !important; }
.announcement-weather-card.weather-night > div:first-child > div  { background: rgba(255,255,255,0.06) !important; }
.announcement-weather-card.weather-night > div:first-child > div i { color: #c7d2fe !important; }

/* ── COLD / SNOW ────────────────────────────────────────────────── */
.announcement-weather-card.weather-cold {
    background: linear-gradient(155deg, #e0f7ff 0%, #bae6fd 30%, #dbeafe 65%, #eff6ff 100%) !important;
    border-color: rgba(14,165,233,0.45) !important;
}
.announcement-weather-card.weather-cold::before {
    width: 180px; height: 180px;
    top: -60px; left: 50%;
    background: radial-gradient(circle, rgba(186,230,253,0.75) 0%, transparent 65%);
    animation: _wxMoonGlow 5s ease-in-out infinite;
}
.announcement-weather-card.weather-cold #anu-weather-icon { color: #0284c7 !important; }
.announcement-weather-card.weather-cold #anu-weather-temp { color: #0c4a6e !important; font-weight: 900; }
.announcement-weather-card.weather-cold #anu-weather-desc { color: #0369a1 !important; }
.announcement-weather-card.weather-cold #anu-weather-loc  { color: #0284c7 !important; }
.announcement-weather-card.weather-cold > div:first-child > span { color: #0369a1 !important; }
.announcement-weather-card.weather-cold > div:first-child > div  { background: rgba(14,165,233,0.12) !important; }
.announcement-weather-card.weather-cold > div:first-child > div i { color: #0284c7 !important; }

/* ── Hover oscuro ───────────────────────────────────────────────── */
.announcement-weather-card.weather-rainy:hover,
.announcement-weather-card.weather-storm:hover,
.announcement-weather-card.weather-night:hover {
    border-color: rgba(99,102,241,0.65) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,0.38) !important;
}

.weather-detail-popup {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 30px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.weather-detail-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.weather-detail-popup .swal2-close {
    z-index: 5;
    color: rgba(255,255,255,0.45) !important;
    transition: transform 180ms ease, color 180ms ease;
}

.weather-detail-popup .swal2-close:hover {
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.04);
}

.weather-detail-popup .swal2-close:focus,
.weather-detail-popup .swal2-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.weather-detail {
    position: relative;
    overflow: hidden;
    padding: 30px;
    min-height: 620px;
    font-family: var(--font-main);
    color: #ffffff;
    background: linear-gradient(135deg, #1c1100 0%, #2d1e00 35%, #6b3600 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 30px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.48);
}

.weather-detail-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.weather-detail-sky::before,
.weather-detail-sky::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(55px);
    opacity: 0.55;
}

.weather-detail-sky::before {
    width: 280px;
    height: 280px;
    left: -80px;
    top: -80px;
    background: rgba(251,146,60,0.38);
}

.weather-detail-sky::after {
    width: 320px;
    height: 320px;
    right: -100px;
    bottom: -100px;
    background: rgba(59,130,246,0.28);
}

.weather-orb {
    position: absolute;
    width: 118px;
    height: 118px;
    right: 68px;
    top: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fff9c0 0%, #fcd34d 42%, #f97316 100%);
    box-shadow:
        0 0 50px rgba(252,211,77,0.80),
        0 0 100px rgba(252,211,77,0.42),
        0 0 180px rgba(249,115,22,0.20);
    animation: weatherPulse 4.5s ease-in-out infinite;
}

.weather-orb::before {
    content: '';
    position: absolute;
    inset: -32px;
    border-radius: 50%;
    background: conic-gradient(
        rgba(252,211,77,0) 0deg, rgba(252,211,77,0.52) 8deg, rgba(252,211,77,0) 17deg,
        rgba(252,211,77,0) 43deg, rgba(252,211,77,0.52) 52deg, rgba(252,211,77,0) 61deg,
        rgba(252,211,77,0) 87deg, rgba(252,211,77,0.52) 96deg, rgba(252,211,77,0) 105deg,
        rgba(252,211,77,0) 131deg, rgba(252,211,77,0.52) 140deg, rgba(252,211,77,0) 149deg,
        rgba(252,211,77,0) 175deg, rgba(252,211,77,0.52) 184deg, rgba(252,211,77,0) 193deg,
        rgba(252,211,77,0) 219deg, rgba(252,211,77,0.52) 228deg, rgba(252,211,77,0) 237deg,
        rgba(252,211,77,0) 263deg, rgba(252,211,77,0.52) 272deg, rgba(252,211,77,0) 281deg,
        rgba(252,211,77,0) 307deg, rgba(252,211,77,0.52) 316deg, rgba(252,211,77,0) 325deg
    );
    animation: _wxDetailSunRotate 24s linear infinite;
    z-index: -1;
}

.weather-cloud {
    position: absolute;
    width: 148px;
    height: 46px;
    border-radius: 60px;
    background: rgba(255,255,255,0.78);
    filter: blur(2.5px);
    animation: weatherCloudMove 13s ease-in-out infinite;
}

.weather-cloud::before {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.82);
    border-radius: 50%;
    top: -38px;
    left: 18px;
    filter: blur(2px);
}

.weather-cloud::after {
    content: '';
    position: absolute;
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.74);
    border-radius: 50%;
    top: -26px;
    left: 72px;
    filter: blur(2px);
}

.cloud-one { left: 36px; top: 112px; }
.cloud-two { right: 96px; top: 160px; animation-delay: 2.8s; transform: scale(0.62); }

.weather-rain {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image: repeating-linear-gradient(110deg, rgba(59,130,246,0.32) 0 2px, transparent 2px 18px);
    animation: weatherRainFall 0.9s linear infinite;
}

.weather-detail-night {
    background: linear-gradient(135deg, #010208 0%, #030610 38%, #07101e 100%);
}

.weather-detail-night .weather-orb {
    background: radial-gradient(circle at 38% 40%, #eef2ff 18%, #c7d2ff 52%, #a5b4fc 100%);
    box-shadow:
        inset -28px 8px 0 6px #020412,
        0 0 55px rgba(165,180,252,0.72),
        0 0 110px rgba(165,180,252,0.34);
    animation: _wxDetailMoonGlow 5s ease-in-out infinite;
}

.weather-detail-night .weather-orb::before { display: none; }

.weather-detail-rainy .weather-rain,
.weather-detail-storm .weather-rain {
    opacity: 1;
}

.weather-detail-cloudy {
    background: linear-gradient(135deg, #0c1018 0%, #18202e 38%, #222e42 100%);
}

.weather-detail-rainy {
    background: linear-gradient(135deg, #04101e 0%, #0b2240 42%, #102d52 100%);
}

.weather-detail-rainy .weather-orb { opacity: 0; }
.weather-detail-rainy .weather-orb::before { display: none; }

.weather-detail-storm {
    background: linear-gradient(135deg, #07050e 0%, #10091e 38%, #1e1242 100%);
}

.weather-detail-storm .weather-orb {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #fef9c3 22%, #fbbf24 58%, #f59e0b 100%);
    box-shadow: 0 0 45px rgba(251,191,36,0.65), 0 0 90px rgba(251,191,36,0.28);
    animation: weatherStormFlash 2.5s ease-in-out infinite;
    opacity: 0.60;
}

.weather-detail-storm .weather-orb::before { display: none; }

.weather-detail-cold {
    background: linear-gradient(135deg, #031525 0%, #062240 38%, #0e3a6a 100%);
}

.weather-detail-cold .weather-orb {
    background: radial-gradient(circle at 38% 36%, #f0f9ff 18%, #bae6fd 52%, #38bdf8 100%);
    box-shadow:
        0 0 48px rgba(56,189,248,0.58),
        0 0 96px rgba(56,189,248,0.26),
        0 0 180px rgba(56,189,248,0.12);
}

.weather-detail-cold .weather-orb::before { display: none; }

.weather-detail-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.weather-detail-header p {
    margin: 0 0 4px;
    color: #fcd34d;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.weather-detail-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    font-weight: 900;
}

.weather-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.weather-detail-actions button {
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    font-family: inherit;
    font-weight: 900;
    padding: 0 14px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    transition: background 150ms ease;
}

.weather-detail-actions button:hover {
    background: rgba(255,255,255,0.18);
}

.weather-detail-actions #weather-detail-refresh {
    width: 40px;
    padding: 0;
}

.weather-detail-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr);
    gap: 18px;
    align-items: stretch;
}

.weather-detail-current,
.weather-detail-metrics > div,
.weather-forecast-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.13);
    box-shadow: 0 18px 38px rgba(0,0,0,0.32);
    backdrop-filter: blur(14px);
}

.weather-detail-current {
    border-radius: 28px;
    padding: 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.weather-detail-icon {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(252,211,77,0.14);
    border: 1px solid rgba(252,211,77,0.22);
    color: #fcd34d;
    font-size: 2.7rem;
    margin-bottom: 12px;
}

.weather-detail-temp {
    color: #ffffff;
    font-size: clamp(3.4rem, 7vw, 5.3rem);
    font-weight: 900;
    line-height: 0.92;
}

.weather-detail-temp span {
    font-size: 0.34em;
    color: rgba(255,255,255,0.55);
}

.weather-detail-current strong {
    margin-top: 10px;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 900;
}

.weather-detail-current small {
    color: rgba(255,255,255,0.58);
    font-size: 0.86rem;
    font-weight: 800;
}

.weather-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.weather-detail-metrics > div {
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.weather-detail-metrics i {
    color: #fcd34d;
    font-size: 1.05rem;
}

.weather-detail-metrics span {
    color: rgba(255,255,255,0.52);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.weather-detail-metrics strong {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 900;
}

.weather-detail-forecast-head {
    position: relative;
    z-index: 1;
    margin: 24px 0 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
}

.weather-detail-forecast-head span {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
}

.weather-detail-forecast-head small {
    color: rgba(255,255,255,0.52);
    font-size: 0.74rem;
    font-weight: 800;
}

.weather-forecast-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 10px;
}

.weather-forecast-card {
    min-height: 168px;
    border-radius: 20px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.weather-forecast-day {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: capitalize;
}

.weather-forecast-date {
    color: rgba(255,255,255,0.48);
    font-size: 0.68rem;
    font-weight: 800;
}

.weather-forecast-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fcd34d;
    background: rgba(252,211,77,0.12);
    border: 1px solid rgba(252,211,77,0.18);
    font-size: 1.2rem;
}

.weather-forecast-card strong {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 900;
}

.weather-forecast-card small {
    min-height: 32px;
    color: rgba(255,255,255,0.58);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.weather-forecast-card span {
    color: #60a5fa;
    font-size: 0.7rem;
    font-weight: 900;
}

.weather-detail-empty {
    border-radius: 24px;
    min-height: 210px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    font-weight: 900;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.18);
    box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

@keyframes weatherPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes weatherCloudMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(22px); }
}

@keyframes weatherRainFall {
    from { background-position: 0 -24px; }
    to { background-position: 0 24px; }
}

@keyframes weatherStormFlash {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 45px rgba(251,191,36,0.65), 0 0 90px rgba(251,191,36,0.28); }
    45% { filter: brightness(1.55); box-shadow: 0 0 75px rgba(251,191,36,0.90), 0 0 150px rgba(251,191,36,0.48); }
}

@keyframes _wxDetailSunRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes _wxDetailMoonGlow {
    0%, 100% {
        box-shadow: inset -28px 8px 0 6px #020412,
            0 0 55px rgba(165,180,252,0.72), 0 0 110px rgba(165,180,252,0.34);
    }
    50% {
        box-shadow: inset -28px 8px 0 6px #020412,
            0 0 72px rgba(165,180,252,0.90), 0 0 150px rgba(165,180,252,0.48);
    }
}

@media (max-width: 760px) {
    .weather-detail {
        padding: 22px;
    }

    .weather-detail-header,
    .weather-detail-forecast-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .weather-detail-main {
        grid-template-columns: 1fr;
    }

    .weather-detail-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================================
   CUMPLEANOS - Anuncios
   ===================================================================== */
.portal-module[data-module-name="announcements"] div:has(> #anu-employee-widget) {
    display: none !important;
}

.birthday-card {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 18px;
    padding: 12px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    color: var(--cabo-dark);
    box-shadow: 0 10px 26px rgba(15,23,42,0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.birthday-card:hover {
    transform: translateY(-2px);
    border-color: #fdba74;
    box-shadow: 0 16px 34px rgba(249,115,22,0.16);
}

.birthday-card.is-today {
    background: linear-gradient(135deg, #fff7ed, #ffffff 62%, #fff1f2);
    border-color: #fb923c;
}

.birthday-avatar,
.birthday-modal-avatar {
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #dc2626);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden;
    flex-shrink: 0;
}

.birthday-avatar {
    width: 58px;
    height: 58px;
    font-size: 0.92rem;
    border: none;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.45), 0 3px 10px rgba(249,115,22,0.15);
}

.birthday-avatar.has-photo,
.birthday-modal-avatar.has-photo {
    position: relative;
    padding: 0;
    background: #e2e8f0;
}

.birthday-avatar.has-photo img,
.birthday-modal-avatar.has-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    outline: none;
}

.birthday-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.birthday-info strong {
    font-size: 0.98rem;
    color: var(--cabo-dark);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.birthday-info small {
    font-size: 0.72rem;
    color: #c2410c;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.birthday-info em {
    font-size: 0.7rem;
    color: #64748b;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.birthday-today-badge {
    background: #f97316;
    color: #ffffff;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.62rem;
    font-weight: 900;
}

.birthday-popup {
    border-radius: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.birthday-modal {
    position: relative;
    padding: 34px;
    background:
        radial-gradient(circle at 12% 10%, rgba(251,146,60,0.18), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(250,204,21,0.18), transparent 28%),
        linear-gradient(135deg, #fff7ed 0%, #ffffff 48%, #f8fafc 100%);
    font-family: var(--font-main);
}

.birthday-modal-header {
    text-align: center;
    margin-bottom: 22px;
}

.birthday-modal-header > span {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    margin: 0 auto 12px;
    background: #fff7ed;
    color: #f97316;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    border: 1px solid #fed7aa;
    box-shadow: 0 18px 34px rgba(249,115,22,0.14);
}

.birthday-modal-header p {
    margin: 0 0 4px;
    color: #f59e0b;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.birthday-modal-header h2 {
    margin: 0;
    color: var(--cabo-dark);
    font-size: 2rem;
    font-weight: 900;
}

.birthday-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.birthday-modal-card {
    position: relative;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,0.92);
    border-radius: 22px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    color: var(--cabo-dark);
    box-shadow: 0 14px 30px rgba(15,23,42,0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.birthday-modal-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 20px 40px rgba(249,115,22,0.16);
}

.birthday-modal-card.is-today {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.birthday-modal-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.04rem;
    border: none;
    box-shadow: 0 0 0 2.5px rgba(249,115,22,0.5), 0 4px 16px rgba(249,115,22,0.18);
}

.birthday-modal-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.birthday-modal-info strong {
    color: var(--cabo-dark);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.birthday-modal-info small {
    color: #c2410c;
    font-size: 0.78rem;
    font-weight: 900;
}

.birthday-modal-info em,
.birthday-modal-info span {
    color: #64748b;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.birthday-modal-card b {
    position: absolute;
    right: 14px;
    top: 12px;
    background: #f97316;
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.62rem;
    font-weight: 900;
}

.birthday-modal-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f97316;
    opacity: 0.55;
    animation: birthdayFloat 3.6s ease-in-out infinite;
}

.birthday-modal-spark.one { left: 10%; top: 18%; }
.birthday-modal-spark.two { right: 14%; top: 22%; animation-delay: 0.8s; background: #facc15; }
.birthday-modal-spark.three { left: 48%; top: 9%; animation-delay: 1.5s; background: #fb7185; }

.birthday-empty {
    grid-column: 1 / -1;
    padding: 34px;
    text-align: center;
    color: #94a3b8;
    font-weight: 800;
}

.birthday-empty i {
    display: block;
    color: #f59e0b;
    font-size: 2rem;
    margin-bottom: 10px;
}

@keyframes birthdayFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.35); }
}

@media (max-width: 1180px) {
    body.intranet-page .portal-topbar,
    body.intranet-page.intranet-fullscreen .portal-topbar {
        grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
        gap: 16px;
    }

    body.intranet-page .portal-top-actions,
    body.intranet-page.intranet-fullscreen .portal-top-actions {
        gap: 12px;
    }

    body.intranet-page .topbar-logo-center img {
        width: clamp(156px, 18vw, 204px);
    }

    body.intranet-page .portal-weather-text small {
        max-width: 132px;
    }

    body.intranet-page .cabo-user-chip-name {
        max-width: 130px;
    }
}

@media (max-width: 860px) {
    body.intranet-page .portal-topbar,
    body.intranet-page.intranet-fullscreen .portal-topbar {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 12px 0 14px;
        gap: 12px;
    }

    body.intranet-page .topbar-logo-center {
        justify-content: center;
    }

    body.intranet-page .portal-top-actions,
    body.intranet-page.intranet-fullscreen .portal-top-actions {
        width: 100%;
        max-width: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 12px;
    }

    body.intranet-page .portal-live-cluster {
        min-width: 0;
    }

    body.intranet-page .portal-weather-text strong {
        font-size: 1.16rem;
    }

    body.intranet-page .portal-weather-text small {
        max-width: 120px;
        font-size: 0.66rem;
    }

    body.intranet-page .portal-clock-chip strong {
        font-size: 0.84rem;
    }

    body.intranet-page .portal-clock-chip span {
        font-size: 0.56rem;
    }

    body.intranet-page .cabo-user-chip-name {
        display: none;
    }
}

@media (max-width: 560px) {
    body.intranet-page .portal-top-actions,
    body.intranet-page.intranet-fullscreen .portal-top-actions {
        justify-content: flex-start;
        gap: 8px 10px;
    }

    body.intranet-page .portal-live-cluster {
        width: auto;
    }

    body.intranet-page .global-announcer {
        padding-left: 0;
        border-left: 0;
    }

    body.intranet-page #portal-refresh {
        justify-self: auto;
    }

    body.intranet-page .portal-session-chip,
    body.intranet-page #cabo-user-chip-host {
        justify-self: auto;
    }

    body.intranet-page .portal-clock-chip {
        padding-left: 0;
        border-left: 0;
    }
}

/* ════════════════════════════════════════════════════════════════
   PIZARRON DE CORCHO — panel "Proximos eventos del mes"
   Notas (post-it) sujetadas con chinches de colores sobre corcho
═══════════════════════════════════════════════════════════════ */
.anu-important-panel {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(0,0,0,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 75%, rgba(60,30,10,0.22) 0%, transparent 55%),
        radial-gradient(circle at 25% 40%, rgba(80,45,15,0.45) 1px, transparent 1.6px) 0 0/22px 22px,
        radial-gradient(circle at 70% 65%, rgba(60,30,10,0.55) 1px, transparent 1.6px) 6px 9px/26px 26px,
        radial-gradient(circle at 50% 50%, rgba(110,75,40,0.35) 0.6px, transparent 1.2px) 0 0/14px 14px,
        linear-gradient(135deg, #c89968 0%, #b07843 50%, #97623a 100%) !important;
    border: 10px solid #5a3a1c !important;
    border-image: linear-gradient(135deg, #8b5e34 0%, #4a2e15 30%, #6b4423 60%, #8b5e34 100%) 1 !important;
    border-radius: 10px !important;
    padding: 24px 24px 26px !important;
    box-shadow:
        inset 0 0 90px rgba(40,20,5,0.38),
        inset 0 0 0 2px rgba(0,0,0,0.22),
        0 6px 0 #2d1a08,
        0 22px 60px rgba(15,23,42,0.42) !important;
    overflow: visible !important;
    transition: transform .26s ease, box-shadow .26s ease;
}
.anu-important-panel::before,
.anu-important-panel::after { display: none !important; }
.anu-important-panel:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 0 90px rgba(40,20,5,0.38),
        inset 0 0 0 2px rgba(0,0,0,0.22),
        0 8px 0 #2d1a08,
        0 28px 72px rgba(15,23,42,0.50) !important;
}

/* Encabezado: lamina sobre corcho con dos chinches */
.anu-important-panel > div:first-of-type {
    background: linear-gradient(180deg, rgba(15,23,42,0.88), rgba(15,23,42,0.74));
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 10px 14px !important;
    border: 1px solid rgba(0,0,0,0.30);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 6px 14px rgba(0,0,0,0.30);
    margin-bottom: 18px !important;
    position: relative;
}
.anu-important-panel > div:first-of-type::before,
.anu-important-panel > div:first-of-type::after {
    content: '';
    position: absolute;
    top: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, #fde047 15%, #f59e0b 40%, #b45309 75%, #78350f 100%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.55), inset -1px -1px 2px rgba(0,0,0,0.40), inset 1px 1px 2px rgba(255,255,255,0.45);
    z-index: 2;
}
.anu-important-panel > div:first-of-type::before { left: 14px; }
.anu-important-panel > div:first-of-type::after  { right: 14px; background: radial-gradient(circle at 35% 30%, #fff 0%, #bfdbfe 15%, #3b82f6 40%, #1e40af 75%, #172554 100%); }

/* Boton "Ver mural" — botoncito con relieve 3D */
.anu-mural-btn {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%) !important;
    color: #422006 !important;
    border: 1px solid rgba(0,0,0,0.35) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 4px rgba(0,0,0,0.18),
        0 4px 0 #8b4f06,
        0 8px 18px rgba(0,0,0,0.35) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.anu-mural-btn:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 4px rgba(0,0,0,0.18),
        0 6px 0 #8b4f06,
        0 12px 24px rgba(0,0,0,0.42) !important;
}
.anu-mural-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -2px 4px rgba(0,0,0,0.22),
        0 1px 0 #8b4f06,
        0 3px 8px rgba(0,0,0,0.30) !important;
}

/* Notas (post-it) sobre el corcho */
.anu-important-panel .anu-events-preview {
    padding: 10px 4px 8px !important;
    gap: 18px !important;
}
.anu-important-panel-wide,
.anu-important-panel-xl {
    display: flex !important;
    flex-direction: column !important;
}
.anu-important-panel-wide .anu-events-preview-xl,
.anu-important-panel-xl .anu-events-preview-xl {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    align-content: start !important;
}
.anu-important-panel .anu-event-card {
    --rot: 0deg;
    --tint-from: #fffbeb;
    --tint-to:   #fde68a;
    --pin: radial-gradient(circle at 35% 30%, #fff 0%, #fde047 16%, #f59e0b 42%, #b45309 75%, #78350f 100%);
    background: linear-gradient(135deg, var(--tint-from) 0%, var(--tint-to) 100%) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #1f2937 !important;
    backdrop-filter: none !important;
    padding: 20px 12px 12px !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -10px 18px rgba(0,0,0,0.05),
        4px 14px 22px rgba(0,0,0,0.32),
        0 0 0 1px rgba(0,0,0,0.05) !important;
    transform-origin: top center;
    transform: rotate(var(--rot));
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
    position: relative;
    z-index: 1;
}
/* Variaciones de color y rotacion para look organico */
.anu-important-panel .anu-event-card:nth-child(4n+1) { --rot: -2.4deg; --tint-from:#fffbeb; --tint-to:#fde68a;
    --pin: radial-gradient(circle at 35% 30%, #fff 0%, #fde047 16%, #f59e0b 42%, #b45309 75%, #78350f 100%); }
.anu-important-panel .anu-event-card:nth-child(4n+2) { --rot: 1.9deg;  --tint-from:#fef2f2; --tint-to:#fecaca;
    --pin: radial-gradient(circle at 35% 30%, #fff 0%, #fecaca 16%, #ef4444 42%, #991b1b 75%, #450a0a 100%); }
.anu-important-panel .anu-event-card:nth-child(4n+3) { --rot: -1.3deg; --tint-from:#eff6ff; --tint-to:#bfdbfe;
    --pin: radial-gradient(circle at 35% 30%, #fff 0%, #bfdbfe 16%, #3b82f6 42%, #1e40af 75%, #172554 100%); }
.anu-important-panel .anu-event-card:nth-child(4n+4) { --rot: 2.6deg;  --tint-from:#ecfdf5; --tint-to:#bbf7d0;
    --pin: radial-gradient(circle at 35% 30%, #fff 0%, #bbf7d0 16%, #22c55e 42%, #15803d 75%, #052e16 100%); }

/* Chinche (thumbtack) en cada nota */
.anu-important-panel .anu-event-card::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 17px;
    height: 17px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--pin);
    box-shadow:
        0 3px 6px rgba(0,0,0,0.55),
        inset -2px -2px 3px rgba(0,0,0,0.30),
        inset 2px 2px 3px rgba(255,255,255,0.55);
    z-index: 2;
}
/* Sombra de la aguja bajo la chinche */
.anu-important-panel .anu-event-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 2px;
    height: 7px;
    background: rgba(0,0,0,0.40);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 1;
}

/* Hover — la nota tiembla y se levanta como si la moviera el aire */
.anu-important-panel .anu-event-card:hover {
    z-index: 10;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        inset 0 -10px 18px rgba(0,0,0,0.05),
        8px 24px 36px rgba(0,0,0,0.42),
        0 0 0 1px rgba(0,0,0,0.06) !important;
    animation: anu-note-flutter 0.55s ease-out forwards;
}
@keyframes anu-note-flutter {
    0%   { transform: rotate(var(--rot)) translateY(0)   scale(1); }
    25%  { transform: rotate(calc(var(--rot) + 1.5deg)) translateY(-2px) scale(1.015); }
    50%  { transform: rotate(calc(var(--rot) - 1.5deg)) translateY(-3px) scale(1.025); }
    75%  { transform: rotate(calc(var(--rot) + 0.5deg)) translateY(-3px) scale(1.03); }
    100% { transform: rotate(var(--rot)) translateY(-3px) scale(1.03); }
}

/* Click — la chinche sale y la nota se despega cayendo */
.anu-important-panel .anu-event-card.is-unpinning {
    animation: anu-note-unpin 0.55s cubic-bezier(.34,.68,.36,1) forwards;
    z-index: 99;
    pointer-events: none;
}
@keyframes anu-note-unpin {
    0%   { transform: rotate(var(--rot)) translateY(-3px) scale(1.03); opacity: 1; }
    20%  { transform: rotate(calc(var(--rot) + 4deg)) translateY(-14px) scale(1.07); opacity: 1; }
    100% { transform: rotate(calc(var(--rot) + 14deg)) translateY(80px) scale(0.78); opacity: 0; }
}
.anu-important-panel .anu-event-card.is-unpinning::before {
    animation: anu-pin-lift 0.55s ease-out forwards;
}
@keyframes anu-pin-lift {
    0%   { transform: translateX(-50%) translateY(0)    scale(1); opacity: 1; }
    25%  { transform: translateX(-50%) translateY(-10px) scale(1.45); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-32px) scale(0.4); opacity: 0; }
}

/* Texto adaptado al post-it */
.anu-important-panel .anu-event-body b      { color: #1f2937 !important; font-weight: 900; }
.anu-important-panel .anu-event-body small  { color: #6b7280 !important; font-weight: 700; }
.anu-important-panel .anu-event-date        { background: rgba(0,0,0,0.06); color: #b91c1c; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
.anu-important-panel .anu-event-date strong { color: #b91c1c; }
.anu-important-panel .anu-event-date small  { color: #92400e; }
.anu-important-panel .anu-event-photo       { box-shadow: 0 4px 10px rgba(0,0,0,0.20); border-radius: 8px; }
.anu-important-panel .anu-event-body i      { box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.anu-important-panel .anu-event-card em     { background: #dc2626; box-shadow: 0 4px 10px rgba(220,38,38,0.40); }

.anu-important-panel .anu-event-empty {
    grid-column: 1/-1;
    background: rgba(0,0,0,0.20);
    border: 2px dashed rgba(255,255,255,0.40);
    color: rgba(255,255,255,0.92);
    border-radius: 14px;
}
.anu-important-panel .anu-event-empty i      { color: #fbbf24; }
.anu-important-panel .anu-event-empty strong { color: #fff; }
.anu-important-panel .anu-event-empty span   { color: rgba(255,255,255,0.78); }

/* ════ POST-IT CARDS — tablero de corcho (vertical) ════
   Nota cuadrada: foto/icono · fecha · nombre
   Sin rotación para que no se vea caótico con muchos eventos
═══════════════════════════════════════════════════════════ */
.anu-important-panel .anu-event-card.is-cork {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 24px 8px 12px !important;
    min-height: 108px !important;
    text-align: center !important;
    /* Sin rotación: alineadas se ven ordenadas y limpias */
    transform: none !important;
    overflow: visible !important;
}
/* Chinche centrada en la parte superior */
.anu-important-panel .anu-event-card.is-cork::before {
    top: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.anu-important-panel .anu-event-card.is-cork::after {
    top: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
/* Hover: la nota se eleva sin rotar */
.anu-important-panel .anu-event-card.is-cork:hover {
    transform: translateY(-4px) scale(1.04) !important;
    z-index: 10;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        6px 18px 30px rgba(0,0,0,0.38),
        0 0 0 1px rgba(0,0,0,0.06) !important;
}
/* Ocultar estructuras del layout clásico no usadas */
.anu-important-panel .anu-event-card.is-cork .anu-event-date { display: none !important; }
.anu-important-panel .anu-event-card.is-cork .anu-event-body { display: none !important; }
.anu-important-panel .anu-event-card.is-cork em              { display: none !important; }

/* Foto circular */
.anu-cork-photo {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0,0,0,0.30);
    border: 2.5px solid rgba(255,255,255,0.90);
    flex-shrink: 0;
}
/* Icono circular */
.anu-cork-icon {
    width: 42px !important; height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    border: 2px solid rgba(255,255,255,0.70);
}
/* Etiqueta de fecha: día + mes en píldora */
.anu-cork-date-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    background: rgba(0,0,0,0.09);
    border-radius: 6px;
    padding: 2px 8px;
    line-height: 1.5;
}
.anu-cork-date-tag strong {
    font-size: 0.8rem;
    font-weight: 900;
    color: #92400e;
}
.anu-cork-date-tag small {
    font-size: 0.6rem;
    font-weight: 800;
    color: #78350f;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Nombre truncado */
.anu-cork-label {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    color: #1f2937 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    display: block !important;
    line-height: 1.25 !important;
    padding: 0 4px !important;
}
/* Resaltado "Hoy" */
.anu-important-panel .anu-event-card.is-cork.is-today { box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -10px 18px rgba(0,0,0,0.05), 4px 14px 22px rgba(0,0,0,0.32), 0 0 0 2.5px rgba(245,158,11,0.70) !important; }
.anu-important-panel .anu-event-card.is-cork.is-today .anu-cork-date-tag { background: rgba(245,158,11,0.20); }
.anu-important-panel .anu-event-card.is-cork.is-today .anu-cork-date-tag strong,
.anu-important-panel .anu-event-card.is-cork.is-today .anu-cork-date-tag small  { color: #b45309; }

/* ════════════════════════════════════════════════════════════════
   MURAL OVERLAY — entrada animada + cards con efecto pin
═══════════════════════════════════════════════════════════════ */
@keyframes anu-mural-overlay-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes anu-mural-board-in {
    0%   { transform: scale(0.82) translateY(60px) rotate(-1deg); opacity: 0; }
    55%  { transform: scale(1.02) translateY(-8px) rotate(0.4deg); opacity: 1; }
    100% { transform: scale(1)    translateY(0)    rotate(0deg);  opacity: 1; }
}
@keyframes anu-mural-day-pop {
    0%   { transform: scale(0.55) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1)    rotate(0deg);  opacity: 1; }
}
@keyframes anu-mural-card-pop {
    0%   { transform: translateY(20px) rotate(-3deg) scale(0.9); opacity: 0; }
    100% { transform: translateY(0)    rotate(0)     scale(1);   opacity: 1; }
}
#periodicoMuralOverlay { animation: anu-mural-overlay-in 0.40s ease-out; }
#periodicoMuralOverlay {
    z-index: 1000500 !important;
}
body.mural-open .portal-topbar,
body.mural-open .scroll-widget-left,
body.mural-open .scroll-widget-right {
    pointer-events: none;
}
#periodicoMuralOverlay > div { animation: anu-mural-board-in 0.60s cubic-bezier(.34,1.56,.64,1); transform-origin: center top; }

#periodicoMuralOverlay .mural-day { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
#periodicoMuralOverlay .mural-day.has-events {
    animation: anu-mural-day-pop 0.45s cubic-bezier(.34,1.56,.64,1) backwards;
}
#periodicoMuralOverlay .mural-day.has-events:nth-child(1)   { animation-delay: 0.05s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(2)   { animation-delay: 0.07s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(3)   { animation-delay: 0.09s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(4)   { animation-delay: 0.11s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(5)   { animation-delay: 0.13s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(6)   { animation-delay: 0.15s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(7)   { animation-delay: 0.17s; }
#periodicoMuralOverlay .mural-day.has-events:nth-child(n+8) { animation-delay: 0.20s; }
#periodicoMuralOverlay .mural-day.has-events:hover {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 14px 28px rgba(15,23,42,.18);
}

/* La lista de eventos del mes — cada card cae al lugar */
#mural-eventos-lista .anu-event-card {
    animation: anu-mural-card-pop 0.5s cubic-bezier(.34,1.56,.64,1) backwards;
    position: relative;
}
#mural-eventos-lista .anu-event-card:nth-child(1)   { animation-delay: 0.30s; }
#mural-eventos-lista .anu-event-card:nth-child(2)   { animation-delay: 0.36s; }
#mural-eventos-lista .anu-event-card:nth-child(3)   { animation-delay: 0.42s; }
#mural-eventos-lista .anu-event-card:nth-child(4)   { animation-delay: 0.48s; }
#mural-eventos-lista .anu-event-card:nth-child(5)   { animation-delay: 0.54s; }
#mural-eventos-lista .anu-event-card:nth-child(n+6) { animation-delay: 0.60s; }

/* Detalle del dia (Swal) con animacion de entrada de tarjeta */
.mural-day-detail .anu-event-card {
    animation: anu-mural-card-pop 0.45s cubic-bezier(.34,1.56,.64,1) backwards;
}
.mural-day-detail .anu-event-card:nth-child(1)   { animation-delay: 0.05s; }
.mural-day-detail .anu-event-card:nth-child(2)   { animation-delay: 0.12s; }
.mural-day-detail .anu-event-card:nth-child(3)   { animation-delay: 0.19s; }
.mural-day-detail .anu-event-card:nth-child(n+4) { animation-delay: 0.26s; }

/* Detalle del evento (popup) — la nota cae del techo */
@keyframes anu-date-detail-drop {
    0%   { transform: translateY(-80px) rotate(-6deg) scale(0.9); opacity: 0; }
    60%  { transform: translateY(8px)   rotate(2deg)  scale(1.02); opacity: 1; }
    100% { transform: translateY(0)     rotate(0)     scale(1);    opacity: 1; }
}
.anu-date-detail { animation: anu-date-detail-drop 0.55s cubic-bezier(.34,1.56,.64,1); }
.anu-date-detail-photo { animation: anu-mural-card-pop 0.6s cubic-bezier(.34,1.56,.64,1) 0.15s backwards; }
.anu-date-detail-icon  { animation: anu-mural-card-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.25s backwards; }

/* ════════════════════════════════════════════════════════════════
   APARADOR VINTAGE — Periodico Cabo Development
   Vitrina de madera con frontón, marquesina de latón, columnas y placa
═══════════════════════════════════════════════════════════════ */
.periodico-rack {
    position: relative;
    margin-top: 40px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    color: #fff7e6;
    font-family: 'Outfit', sans-serif;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55));
}
.periodico-rack { --wood-grain:
    repeating-linear-gradient(90deg,
        rgba(20,8,2,0.50) 0,
        rgba(40,18,5,0.25) 1px,
        transparent 2px,
        transparent 8px,
        rgba(20,8,2,0.35) 9px);
    --wood-light: linear-gradient(170deg, #8b5a2b 0%, #6b3f1b 30%, #4a2912 65%, #321b0a 100%);
    --wood-dark:  linear-gradient(170deg, #5a3514 0%, #3a1f0c 40%, #2a1808 75%, #170a02 100%);
    --brass: radial-gradient(ellipse at 30% 25%, #fff8dc 0%, #fbbf24 25%, #b45309 65%, #6b3f0a 100%);
    --brass-edge: #422006;
}

/* 1. FRONTÓN (peak superior tipo cornisa) */
.periodico-pediment {
    position: relative;
    height: 34px;
    margin: 0 -2px 0;
    background: var(--wood-grain), var(--wood-light);
    background-blend-mode: multiply, normal;
    clip-path: polygon(0% 100%, 8% 30%, 50% 0%, 92% 30%, 100% 100%);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.45);
    z-index: 2;
}
.periodico-pediment::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,210,150,0.30), transparent 35%);
    pointer-events: none;
}
.periodico-pediment-finial {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--brass);
    border: 1.5px solid var(--brass-edge);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 3px 6px rgba(0,0,0,0.6);
    z-index: 3;
}

/* 2. MARQUESINA — placa de latón */
.periodico-marquee {
    position: relative;
    z-index: 3;
    margin: -2px 8px 0;
    padding: 12px 32px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,240,200,0.55), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(120,70,15,0.50), transparent 60%),
        linear-gradient(180deg, #fde68a 0%, #f59e0b 35%, #b45309 75%, #78350f 100%);
    border: 2px solid var(--brass-edge);
    border-radius: 4px 4px 10px 10px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.60),
        inset 0 -3px 0 rgba(0,0,0,0.30),
        0 8px 18px rgba(0,0,0,0.45);
}
.periodico-marquee-rivet {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8dc 0%, #fbbf24 30%, #78350f 80%);
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.periodico-marquee-rivet-left  { left: 10px; }
.periodico-marquee-rivet-right { right: 10px; }
.periodico-marquee .periodico-rack-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--brass-edge);
    display: grid; place-items: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 4px rgba(0,0,0,0.40),
        0 3px 8px rgba(0,0,0,0.55);
    font-size: 0.85rem;
    border: 1.5px solid var(--brass-edge);
}
.periodico-marquee-text { text-align: center; }
.periodico-marquee .periodico-rack-tag {
    font-size: 0.5rem;
    letter-spacing: 2.2px;
    font-weight: 800;
    color: var(--brass-edge);
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    margin-bottom: 1px;
    font-family: 'Outfit', sans-serif;
}
.periodico-marquee .periodico-rack-name {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0;
    color: #2a1408;
    font-style: italic;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.40);
    letter-spacing: -0.3px;
}

/* 3. CUERPO DEL APARADOR — vitrina con columnas laterales */
.periodico-cabinet {
    position: relative;
    padding: 16px 28px 8px;
    background: var(--wood-grain), var(--wood-dark);
    background-blend-mode: multiply, normal;
    box-shadow:
        inset 0 4px 0 rgba(0,0,0,0.55),
        inset 0 -1px 0 rgba(255,200,140,0.05),
        inset 6px 0 18px rgba(0,0,0,0.40),
        inset -6px 0 18px rgba(0,0,0,0.40);
}
.periodico-cabinet::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 60px;
    background: radial-gradient(ellipse at top, rgba(255,205,120,0.20), transparent 70%);
    pointer-events: none;
    z-index: 1;
    filter: blur(4px);
    animation: periodico-lamp-flicker 5s ease-in-out infinite;
}
@keyframes periodico-lamp-flicker {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1;    }
}
.periodico-cabinet-pillar {
    position: absolute;
    top: 0; bottom: 0;
    width: 14px;
    background:
        repeating-linear-gradient(180deg,
            rgba(255,210,150,0.18) 0,
            rgba(255,210,150,0.18) 1px,
            transparent 1px,
            transparent 6px),
        linear-gradient(90deg, #2a1808 0%, #6b3f1b 50%, #2a1808 100%);
    box-shadow:
        inset 1px 0 0 rgba(255,210,150,0.20),
        inset -1px 0 0 rgba(0,0,0,0.55);
    z-index: 2;
}
.periodico-cabinet-pillar-left  { left: 0; border-right: 1px solid rgba(0,0,0,0.6); }
.periodico-cabinet-pillar-right { right: 0; border-left:  1px solid rgba(0,0,0,0.6); }
.periodico-cabinet-pillar::before {
    content: '';
    position: absolute;
    top: 0; left: -4px; right: -4px;
    height: 8px;
    background: var(--brass);
    border: 1px solid var(--brass-edge);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.periodico-cabinet-pillar::after {
    content: '';
    position: absolute;
    bottom: 0; left: -4px; right: -4px;
    height: 8px;
    background: var(--brass);
    border: 1px solid var(--brass-edge);
    border-radius: 2px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.5);
}

/* 4. BASE — moldura inferior con placa de bronce */
.periodico-base {
    position: relative;
    z-index: 2;
    margin: 0 -2px;
    padding: 10px 22px 12px;
    background: var(--wood-grain), var(--wood-light);
    background-blend-mode: multiply, normal;
    border-radius: 0 0 10px 10px;
    box-shadow:
        inset 0 3px 0 rgba(0,0,0,0.55),
        inset 0 -3px 0 rgba(0,0,0,0.65),
        0 6px 14px rgba(0,0,0,0.55);
    text-align: center;
}
.periodico-base-plate {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brass-edge);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,240,200,0.55), transparent 60%),
        linear-gradient(180deg, #fde68a 0%, #d97706 60%, #92400e 100%);
    border: 1.5px solid var(--brass-edge);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 2px rgba(0,0,0,0.25),
        0 3px 6px rgba(0,0,0,0.4);
    font-family: 'Outfit', sans-serif;
}

/* (Antes había un letrero colgante; reemplazado por .periodico-marquee) */

.periodico-rack-title { display: flex; align-items: center; gap: 14px; }
.periodico-rack-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff8dc 0%, #fbbf24 25%, #b45309 70%, #422006 100%);
    color: #422006;
    display: grid; place-items: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -2px 4px rgba(0,0,0,0.40),
        0 4px 10px rgba(0,0,0,0.55);
    font-size: 1.05rem;
    border: 2px solid #422006;
}
.periodico-rack-tag {
    font-size: 0.58rem;
    font-weight: 800;
    color: #422006;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.periodico-rack-name {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 900;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.05;
    color: #2a1408;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.45),
        0 -1px 0 rgba(0,0,0,0.20);
    font-style: italic;
}
.periodico-rack-meta {
    font-size: 0.65rem;
    font-weight: 800;
    color: #422006;
    background: rgba(255,255,255,0.30);
    border: 1px solid rgba(66,32,6,0.4);
    padding: 5px 11px;
    border-radius: 999px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Riel superior — moldura barroca */
.periodico-shelf {
    position: relative;
    z-index: 3;
    padding-top: 14px;
}

/* ── Fade-blur lateral premium ────────────────────────────────────────
   Las portadas se desvanecen con efecto cristal esmerilado al acercarse
   a los bordes del estante, sin cortar el contenido abruptamente.
   pointer-events:none para que el scroll/clic siga funcionando.
─────────────────────────────────────────────────────────────────────── */
.periodico-shelf::before,
.periodico-shelf::after {
    content: '';
    position: absolute;
    top: 14px;              /* arranca debajo del riel decorativo */
    bottom: 0;
    width: min(140px, 12vw);
    z-index: 6;
    pointer-events: none;
    backdrop-filter: blur(14px) saturate(0.7);
    -webkit-backdrop-filter: blur(14px) saturate(0.7);
}
.periodico-shelf::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(30,12,3,0.92) 0%,
        rgba(42,20,6,0.60) 30%,
        rgba(58,28,8,0.18) 68%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 100%);
    mask-image:         linear-gradient(to right, black 30%, transparent 100%);
}
.periodico-shelf::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(30,12,3,0.92) 0%,
        rgba(42,20,6,0.60) 30%,
        rgba(58,28,8,0.18) 68%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
    mask-image:         linear-gradient(to left, black 30%, transparent 100%);
}
.periodico-shelf-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,200,140,0.15) 0,
            rgba(255,200,140,0.15) 4px,
            transparent 4px,
            transparent 12px),
        linear-gradient(180deg, #6b3a14 0%, #3a1f0c 60%, #1a0e04 100%);
    border-top: 1px solid rgba(255,200,140,0.30);
    border-bottom: 1px solid rgba(0,0,0,0.7);
    box-shadow:
        inset 0 1px 0 rgba(255,200,140,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.6);
}
/* Pequeños remaches de latón en la moldura */
.periodico-shelf-rail::before,
.periodico-shelf-rail::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fde047 0%, #b45309 70%, #422006 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset -1px -1px 1px rgba(0,0,0,0.4);
}
.periodico-shelf-rail::before { left: 18px; }
.periodico-shelf-rail::after  { right: 18px; }

/* Lista de periodicos — fila horizontal con scroll si rebasa */
.periodico-list {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    padding: 30px 16px 18px;
    min-height: 320px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(245,158,11,0.5) transparent;
}
.periodico-list::-webkit-scrollbar { height: 9px; }
.periodico-list::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #b45309, #fbbf24, #b45309);
    border-radius: 4px;
}
.periodico-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.30); border-radius: 4px; }

/* Tabla de madera — base de cada periódico */
.periodico-shelf-wood {
    position: relative;
    height: 32px;
    margin: -10px -6px 0;
    border-radius: 4px 4px 16px 16px;
    background:
        /* veteado horizontal de la madera */
        repeating-linear-gradient(90deg,
            rgba(0,0,0,0.22) 0,
            transparent 1px,
            transparent 6px,
            rgba(0,0,0,0.22) 7px),
        radial-gradient(ellipse at 30% 50%, rgba(255,200,140,0.12), transparent 60%),
        linear-gradient(180deg, #8b5e34 0%, #6b4423 35%, #4a2e15 75%, #2d1a08 100%);
    border-top: 2px solid #2d1a08;
    box-shadow:
        inset 0 3px 0 rgba(255,210,150,0.18),
        inset 0 -3px 0 rgba(0,0,0,0.65),
        0 12px 22px rgba(0,0,0,0.55);
}
/* Nudos de madera */
.periodico-shelf-wood::before {
    content: '';
    position: absolute;
    top: 9px; left: 12%;
    width: 36px; height: 8px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.5), transparent 70%);
    border-radius: 50%;
    filter: blur(1px);
}
.periodico-shelf-wood::after {
    content: '';
    position: absolute;
    top: 11px; right: 18%;
    width: 28px; height: 7px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
    border-radius: 50%;
    filter: blur(1px);
}
.periodico-shelf-shadow {
    height: 30px;
    background: radial-gradient(ellipse at top, rgba(0,0,0,0.7), transparent 70%);
    margin: 0 -6px;
    pointer-events: none;
}

/* Tarjeta de cada periódico — portada estilo periódico vintage */
.periodico-card {
    --tilt: 0deg;
    --sway: 0deg;
    flex: 0 0 auto;
    width: 215px;
    background:
        /* manchas envejecidas */
        radial-gradient(circle at 15% 85%, rgba(180,120,50,0.18) 0%, transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(180,120,50,0.14) 0%, transparent 22%),
        radial-gradient(circle at 50% 60%, rgba(160,100,40,0.08) 0%, transparent 30%),
        linear-gradient(180deg, #fefce8 0%, #fef9c3 40%, #fde68a 100%);
    border: 1px solid rgba(80,40,10,0.30);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transform: translateY(0) rotate(var(--tilt));
    transform-origin: bottom center;
    transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .38s ease;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.50),
        inset 0 -20px 30px rgba(180,120,50,0.10),
        2px 4px 0 rgba(0,0,0,0.10),
        4px 8px 0 rgba(0,0,0,0.06),
        10px 26px 34px rgba(0,0,0,0.70);
    font-family: 'Outfit', sans-serif;
    color: #1f2937;
    animation:
        periodico-stack-in 0.65s cubic-bezier(.34,1.56,.64,1) backwards,
        periodico-sway 7s ease-in-out infinite;
    animation-fill-mode: backwards, both;
}
.periodico-card:nth-child(1) { --tilt: -1.2deg; --sway: 0.4deg;  animation-delay: 0.05s, 0s; }
.periodico-card:nth-child(2) { --tilt: 1.6deg;  --sway: -0.5deg; animation-delay: 0.14s, -1.4s; }
.periodico-card:nth-child(3) { --tilt: -0.8deg; --sway: 0.5deg;  animation-delay: 0.23s, -2.8s; }
.periodico-card:nth-child(4) { --tilt: 2deg;    --sway: -0.4deg; animation-delay: 0.32s, -4.2s; }
.periodico-card:nth-child(5) { --tilt: -1.5deg; --sway: 0.4deg;  animation-delay: 0.41s, -5.6s; }
.periodico-card:nth-child(6) { --tilt: 0.8deg;  --sway: -0.5deg; animation-delay: 0.50s, -0.7s; }
.periodico-card:nth-child(n+7) { --tilt: -0.5deg; animation-delay: 0.60s, -2.1s; }

@keyframes periodico-stack-in {
    0%   { transform: translateY(120px) rotate(calc(var(--tilt) - 8deg)) scale(0.80); opacity: 0; }
    60%  { transform: translateY(-10px) rotate(calc(var(--tilt) + 3deg)) scale(1.03); opacity: 1; }
    100% { transform: translateY(0)     rotate(var(--tilt))              scale(1);    opacity: 1; }
}
/* Vaivén suave como si el aire los moviera */
@keyframes periodico-sway {
    0%, 100% { transform: translateY(0)    rotate(var(--tilt)); }
    50%      { transform: translateY(-1.5px) rotate(calc(var(--tilt) + var(--sway))); }
}

.periodico-card:hover {
    transform: translateY(-18px) rotate(0deg) scale(1.06) !important;
    animation: periodico-stack-in 0s, none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.55),
        inset 0 -20px 30px rgba(180,120,50,0.08),
        2px 4px 0 rgba(0,0,0,0.10),
        4px 8px 0 rgba(0,0,0,0.06),
        18px 44px 60px rgba(0,0,0,0.80),
        0 0 0 2px rgba(245,158,11,0.55),
        0 0 30px rgba(251,191,36,0.30);
    z-index: 10;
}
.periodico-card:active { transform: translateY(-8px) rotate(0deg) scale(0.99) !important; }

/* Reflejo de barniz al pasar el cursor */
.periodico-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    pointer-events: none;
    transition: left 0.7s ease;
    z-index: 4;
}
.periodico-card:hover::after { left: 130%; }

/* Masthead — cabecera tipo periódico vintage */
.periodico-masthead {
    padding: 11px 12px 9px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 100%, rgba(140,80,30,0.10), transparent 70%),
        linear-gradient(180deg, #fffdf2 0%, #fef3c7 100%);
    border-bottom: 3px double rgba(50,20,5,0.65);
    position: relative;
}
.periodico-masthead::before {
    content: '★ ★ ★';
    position: absolute;
    bottom: -5px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.45rem;
    color: rgba(50,20,5,0.55);
    background: #fef3c7;
    padding: 0 8px;
    letter-spacing: 2px;
}
.periodico-masthead-overline {
    font-size: 0.5rem;
    letter-spacing: 2.5px;
    color: rgba(50,20,5,0.65);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(50,20,5,0.25);
    padding-bottom: 3px;
    font-family: 'Outfit', sans-serif;
}
.periodico-masthead-title {
    font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.5px;
    color: #1a0e04;
    margin: 5px 0 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
    font-style: italic;
}
.periodico-masthead-edition {
    font-size: 0.52rem;
    font-weight: 800;
    color: rgba(50,20,5,0.65);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
}

/* Cover area */
.periodico-cover {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: #1e293b;
    border-top: 1px solid rgba(50,20,5,0.20);
    border-bottom: 1px solid rgba(50,20,5,0.20);
}
.periodico-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(1.08);
}
.periodico-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #cbd5e1;
    background:
        repeating-linear-gradient(45deg, #1e293b 0 12px, #0f172a 12px 24px);
}
.periodico-cover-placeholder i { font-size: 2.2rem; opacity: 0.6; }
.periodico-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.4));
    pointer-events: none;
}
.periodico-cover-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    color: #fff;
    z-index: 2;
}
.periodico-cover-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pie de portada — fecha + sello PDF estilo timbre */
.periodico-footer {
    padding: 10px 10px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background:
        radial-gradient(circle at 100% 0%, rgba(120,70,15,0.10), transparent 50%),
        linear-gradient(180deg, #fef3c7, #fde68a);
    border-top: 2px solid rgba(50,20,5,0.40);
    position: relative;
}
.periodico-footer::before {
    content: '';
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 1px;
    background: rgba(50,20,5,0.20);
}
.periodico-date {
    font-size: 0.6rem;
    font-weight: 800;
    color: #5a2a08;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Outfit', sans-serif;
}
.periodico-date i { font-size: 0.6rem; color: #b45309; }
.periodico-pdf-pill {
    font-size: 0.55rem;
    font-weight: 900;
    background:
        radial-gradient(circle at 30% 30%, #ef4444, #b91c1c 70%, #7f1d1d);
    color: #fff;
    padding: 4px 9px;
    border-radius: 4px;
    letter-spacing: 1.5px;
    border: 1px dashed rgba(255,255,255,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 3px 6px rgba(127,29,29,0.55);
    transform: rotate(-5deg);
    text-shadow: 0 1px 1px rgba(0,0,0,0.40);
}

/* Boton de eliminar (solo admins) */
.periodico-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(220,38,38,0.95);
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.periodico-card:hover .periodico-delete { opacity: 1; transform: scale(1.05); }
.periodico-delete:hover { background: #b91c1c; transform: scale(1.15); }

/* Estado vacio — pergamino sobre madera */
.periodico-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 50px 30px;
    border: 2px dashed rgba(255,200,140,0.30);
    border-radius: 14px;
    color: rgba(255,225,180,0.85);
    text-align: center;
    background:
        radial-gradient(ellipse at center, rgba(255,200,140,0.08), transparent 70%),
        rgba(0,0,0,0.30);
    min-width: 100%;
    font-family: 'Outfit', sans-serif;
}
.periodico-empty i { font-size: 2.6rem; color: #fbbf24; filter: drop-shadow(0 4px 8px rgba(251,191,36,0.45)); }
.periodico-empty strong {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    color: #fde68a;
    font-style: italic;
    letter-spacing: 0.3px;
}
.periodico-empty span { font-size: 0.78rem; color: rgba(255,225,180,0.60); }

.periodico-loading {
    flex: 1;
    color: rgba(255,225,180,0.70);
    text-align: center;
    padding: 60px 20px;
    font-size: 0.85rem;
    min-width: 100%;
}
.periodico-loading i { color: #fbbf24; margin-right: 8px; }

/* ── Variante compacta — encaja bajo cumple+clima ── */
.periodico-rack-compact { margin-top: 30px; }
.periodico-rack-compact .periodico-marquee  { margin: -2px 4px 0; padding: 10px 28px 12px; }
.periodico-rack-compact .periodico-marquee .periodico-rack-icon { width: 30px; height: 30px; font-size: 0.8rem; }
.periodico-rack-compact .periodico-marquee .periodico-rack-tag  { font-size: 0.48rem; letter-spacing: 1.8px; }
.periodico-rack-compact .periodico-marquee .periodico-rack-name { font-size: 0.95rem; }
.periodico-rack-compact .periodico-cabinet  { padding: 12px 20px 4px; }
.periodico-rack-compact .periodico-shelf { padding-top: 8px; }
.periodico-rack-compact .periodico-shelf-rail { height: 9px; }
.periodico-rack-compact .periodico-list {
    padding: 16px 8px 12px;
    min-height: 210px;
    gap: 14px;
}
.periodico-rack-compact .periodico-card { width: 160px; }
.periodico-rack-compact .periodico-cover { height: 140px; }
.periodico-rack-compact .periodico-masthead-title { font-size: 0.95rem; }
.periodico-rack-compact .periodico-shelf-wood { height: 22px; margin: -10px -20px 0; }
.periodico-rack-compact .periodico-shelf-shadow { height: 14px; margin: 0 -20px; }
.periodico-rack-compact .periodico-base { padding: 8px 16px 10px; }
.periodico-rack-compact .periodico-base-plate { font-size: 0.55rem; padding: 4px 12px; letter-spacing: 1.6px; }

/* Empty state — encogido para encajar en compacto */
.periodico-rack-compact .periodico-empty {
    padding: 22px 16px;
    gap: 6px;
    border-width: 1.5px;
    background:
        radial-gradient(ellipse at center, rgba(255,200,140,0.10), transparent 70%),
        rgba(0,0,0,0.28);
    min-width: auto;
    flex: 1 1 100%;
    max-width: 100%;
}
.periodico-rack-compact .periodico-empty i { font-size: 1.7rem; }
.periodico-rack-compact .periodico-empty strong { font-size: 0.9rem; }
.periodico-rack-compact .periodico-empty span { font-size: 0.66rem; line-height: 1.45; }
.periodico-rack-compact .periodico-loading { padding: 30px 14px; font-size: 0.74rem; }

@media (max-width: 1100px) {
    .periodico-rack-compact .periodico-card { width: 180px; }
}

/* Form upload — drag drop area */
.periodico-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    text-align: left;
    font-family: 'Outfit', sans-serif;
}
.periodico-form-grid label { display: flex; flex-direction: column; gap: 5px; }
.periodico-form-grid label.full { grid-column: 1/-1; }
.periodico-form-grid label > span {
    font-size: 0.74rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.3px;
}
.periodico-form-grid input[type="text"],
.periodico-form-grid input[type="date"],
.periodico-form-grid textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.86rem;
    color: #0f172a;
    outline: none;
    transition: border-color .2s ease;
}
.periodico-form-grid input[type="text"]:focus,
.periodico-form-grid input[type="date"]:focus,
.periodico-form-grid textarea:focus { border-color: #9333ea; }
.periodico-form-grid textarea { resize: vertical; min-height: 80px; }
.periodico-dropzone {
    border: 2.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.periodico-dropzone:hover, .periodico-dropzone.is-dragover {
    border-color: #9333ea;
    background: #faf5ff;
}
.periodico-dropzone.has-file { border-color: #16a34a; background: #f0fdf4; }
.periodico-dropzone i { font-size: 1.6rem; color: #9333ea; }
.periodico-dropzone.has-file i { color: #16a34a; }
.periodico-dropzone strong { font-size: 0.84rem; color: #0f172a; }
.periodico-dropzone small { font-size: 0.7rem; color: #64748b; }
.periodico-dropzone input[type="file"] { display: none; }
.periodico-cover-preview {
    width: 90px;
    height: 110px;
    border-radius: 6px;
    background: #1e293b;
    background-size: cover;
    background-position: center;
    margin-bottom: 4px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 720px) {
    .periodico-form-grid { grid-template-columns: 1fr; }
    .periodico-card { width: 170px; }
    .periodico-cover { height: 150px; }
}

/* =====================================================================
   Intranet responsive shell - final layer
   ===================================================================== */
body.intranet-page,
body.intranet-page.intranet-fullscreen {
    min-width: 0;
    overflow-x: hidden;
}

.portal-content,
.portal-content-full,
.portal-view,
.portal-module,
.portal-module * {
    box-sizing: border-box;
}

.portal-content,
.portal-content-full,
.portal-view,
.portal-module,
.portal-module > * {
    min-width: 0;
    max-width: 100%;
}

.portal-module :where(img, video, canvas, svg, iframe) {
    max-width: 100%;
}

.portal-module :where(input, select, textarea, button) {
    max-width: 100%;
}

.portal-module :where(.module-grid, .panel-grid, .employee-grid, .docs2-grid, .learn2-grid, .ms365-grid, .mini-status-grid, .inkreq-kpis, .inkreq-layout, .announcements-widget-grid) {
    min-width: 0;
}

.portal-module :where(.module-card, .panel-card, .employee-card, .docs2-card, .learn2-card, .ms365-tile, .inkreq-kpi, .inkreq-panel, .external-panel, .ticket-card, .news-item, .birthday-card) {
    min-width: 0;
}

@media (max-width: 1440px) {
    body.portal-rail-active .portal-content-full {
        --portal-rail-offset: clamp(92px, 7vw, 116px);
    }

    .intranet-fullscreen .portal-content-full {
        padding-inline: clamp(18px, 2.4vw, 42px);
    }

    .intranet-fullscreen .portal-view,
    .portal-view {
        padding: clamp(22px, 2.4vw, 34px);
    }

    .module-grid,
    .panel-grid,
    .employee-grid,
    .docs2-grid,
    .learn2-grid,
    .ms365-grid,
    .mini-status-grid,
    .inkreq-kpis {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
    }
}

@media (max-width: 1120px) {
    body.intranet-page .portal-topbar,
    body.intranet-page.intranet-fullscreen .portal-topbar {
        grid-template-columns: minmax(138px, 188px) minmax(0, 1fr);
        gap: 14px;
        padding-inline: clamp(16px, 2.4vw, 28px);
    }

    body.intranet-page .topbar-logo-center img {
        width: clamp(146px, 17vw, 190px);
        max-height: 42px;
    }

    body.intranet-page .portal-top-actions,
    body.intranet-page.intranet-fullscreen .portal-top-actions {
        gap: 10px 14px;
    }

    body.intranet-page .portal-weather-text small {
        max-width: 118px;
    }

    body.intranet-page .portal-clock-chip {
        padding-left: 14px;
    }

    body.intranet-page .cabo-user-chip-name {
        max-width: 118px;
    }

    .section-header,
    .inkreq-panel-head,
    .hero-services-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .section-header > div:first-child {
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .intranet-fullscreen .portal-content-full,
    body.portal-rail-active .portal-content-full {
        width: 100%;
        max-width: none;
        padding: 10px 12px 106px !important;
    }

    body.portal-rail-active .portal-topbar,
    .intranet-fullscreen .portal-topbar,
    .portal-topbar,
    body.intranet-page .portal-topbar,
    body.intranet-page.intranet-fullscreen .portal-topbar {
        width: 100%;
        margin-left: 0;
        grid-template-columns: 1fr !important;
        min-height: auto;
        padding: 10px 2px 14px;
        margin-bottom: 18px;
        gap: 11px;
    }

    body.intranet-page .topbar-logo-center,
    body.intranet-page.intranet-fullscreen .topbar-logo-center {
        justify-content: center;
    }

    body.intranet-page .topbar-logo-center img {
        width: clamp(146px, 36vw, 200px);
        max-height: 44px;
    }

    body.intranet-page .portal-top-actions,
    body.intranet-page.intranet-fullscreen .portal-top-actions,
    .intranet-fullscreen .portal-top-actions {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px 12px;
    }

    body.intranet-page .portal-live-cluster {
        flex: 1 1 210px;
        justify-content: center;
    }

    body.intranet-page .portal-weather-chip {
        max-width: min(100%, 260px);
        padding-right: 0;
    }

    body.intranet-page .portal-clock-chip {
        padding-left: 12px;
    }

    body.intranet-page .global-announcer {
        padding-left: 0;
        border-left: 0;
    }

    .intranet-fullscreen .portal-view,
    .portal-view {
        padding: 18px;
        border-radius: 24px;
    }

    .section-header,
    .toolbar,
    .docs2-toolbar,
    .learn2-toolbar,
    .inkreq-actions {
        width: 100%;
        align-items: stretch;
    }

    .section-header {
        flex-direction: column;
        gap: 12px;
    }

    .section-header > div:last-child,
    .section-header > button,
    .section-header > a {
        width: 100%;
    }

    .toolbar,
    .docs2-toolbar,
    .learn2-toolbar,
    .inkreq-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .toolbar :where(input, select, button),
    .docs2-toolbar :where(input, select, button),
    .learn2-toolbar :where(input, select, button),
    .inkreq-actions :where(input, select, button),
    .section-header :where(button, a.btn-soft, .btn-soft) {
        flex: 1 1 180px;
        min-width: 0 !important;
    }

    .module-grid,
    .panel-grid,
    .employee-grid,
    .docs2-grid,
    .learn2-grid,
    .ms365-grid,
    .mini-status-grid,
    .inkreq-kpis,
    .birthday-modal-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    }

    .anu-main-row,
    .anu-top-row,
    .weather-detail-main,
    .birthday-modal-grid,
    .sug-swal-grid,
    .periodico-form-grid {
        grid-template-columns: 1fr !important;
    }

    .anu-side-stack {
        flex-direction: column !important;
    }

    .news-item,
    .birthday-card,
    .sug-file-item,
    .sug-history-item,
    .sug-attachment-item,
    .inkreq-stock-row,
    .inkreq-transfer-top,
    .inkreq-transfer-foot,
    .inkreq-warehouse-head,
    .inkreq-activity-row {
        grid-template-columns: 1fr !important;
    }

    .inkreq-transfer-foot,
    .inkreq-stock-row {
        align-items: stretch;
    }

    .inkreq-transfer-foot button,
    .inkreq-stock-row button {
        width: 100%;
        justify-content: center;
    }

    .portal-module :where(.panel-card, .document-card, .course-card, .employee-card, .ticket-card, .docs2-panel, .learn2-panel, .inkreq-panel, .external-panel) {
        overflow-x: auto;
    }

    .portal-module table {
        display: block;
        max-width: 100%;
        min-width: 680px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .portal-quick-rail {
        top: auto !important;
        left: 50% !important;
        bottom: 14px !important;
        max-width: calc(100vw - 24px);
        flex-direction: row !important;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        border-radius: 24px;
        transform: translate(-50%, 120%) scale(0.96) !important;
        scrollbar-width: none;
    }

    .portal-quick-rail::-webkit-scrollbar {
        display: none;
    }

    body.portal-rail-active .portal-quick-rail,
    .portal-in-module .portal-quick-rail {
        transform: translate(-50%, 0) scale(1) !important;
    }

    .portal-rail-btn,
    body.portal-rail-active .portal-quick-rail .portal-rail-btn {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        opacity: 1;
        animation: none;
    }

    .portal-rail-ico {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .portal-rail-label {
        display: none !important;
    }

    .rail-search-popover {
        left: 50% !important;
        top: auto !important;
        bottom: 84px !important;
        width: calc(100vw - 24px) !important;
        max-width: 540px;
        transform: translate(-50%, 16px) scale(0.98) !important;
    }

    .rail-search-popover.is-open {
        transform: translate(-50%, 0) scale(1) !important;
    }

    .scroll-widget-left,
    .scroll-widget-right {
        padding: 7px 10px;
        border-radius: 15px;
    }

    .scroll-widget-left {
        left: 10px;
        top: 8px;
        max-width: 46vw;
    }

    .scroll-widget-right {
        right: 10px;
        top: 8px;
        max-width: 52vw;
        gap: 5px;
    }

    body.portal-scrolled .scroll-widget-left,
    body.portal-scrolled .scroll-widget-right {
        transform: translateX(0) scale(0.94);
    }

    .sw-logo img {
        height: 38px;
    }

    .sw-weather-card {
        padding: 5px 8px;
    }

    .sw-weather-meta {
        max-width: 116px;
    }

    .sw-clock-card {
        padding: 6px 9px;
    }
}

@media (max-width: 640px) {
    .intranet-fullscreen .portal-content-full,
    body.portal-rail-active .portal-content-full {
        padding: 8px 8px 98px !important;
    }

    .intranet-fullscreen .portal-view,
    .portal-view {
        padding: 14px;
        border-radius: 20px;
    }

    .portal-module {
        font-size: 0.96rem;
    }

    .section-header h2,
    .section-header h3 {
        font-size: clamp(1.28rem, 7vw, 1.55rem);
        line-height: 1.08;
    }

    .module-grid,
    .panel-grid,
    .employee-grid,
    .docs2-grid,
    .learn2-grid,
    .ms365-grid,
    .mini-status-grid,
    .inkreq-kpis,
    .birthday-modal-grid,
    #mural-eventos-lista {
        grid-template-columns: 1fr !important;
    }

    .hero-content {
        padding-inline: 6px !important;
    }

    .hero-logo {
        width: min(82vw, 380px) !important;
    }

    .modules-orbit {
        grid-template-columns: repeat(2, minmax(118px, 1fr)) !important;
        gap: 18px 14px !important;
        padding-inline: 0 !important;
    }

    .module-circle {
        max-width: 138px !important;
    }

    .module-circle .ico {
        width: 54px !important;
        height: 54px !important;
        font-size: 1.35rem !important;
    }

    .module-circle .lbl {
        font-size: 0.78rem !important;
    }

    .portal-weather-text small,
    .sw-weather-meta,
    .sw-clock-date {
        display: none;
    }

    body.intranet-page .portal-weather-text strong {
        font-size: 1.04rem;
    }

    body.intranet-page .portal-clock-chip {
        border-left: 0;
        padding-left: 0;
    }

    body.intranet-page .cabo-user-chip-name,
    .scroll-widget-right .cabo-user-chip-name {
        display: none;
    }

    .scroll-widget-left {
        max-width: 42vw;
    }

    .scroll-widget-right {
        max-width: 54vw;
    }

    .sw-logo img {
        height: 32px;
    }

    .sw-weather-card {
        min-height: 34px;
    }

    .sw-weather-temp {
        font-size: 0.9rem;
    }

    .sw-clock-time {
        font-size: 0.86rem;
    }

    .portal-module table {
        min-width: 620px;
    }

    .mural-day {
        min-height: 48px;
        padding: 6px;
        border-radius: 10px;
    }

    .periodico-rack {
        margin-inline: -4px;
    }

    .periodico-rack-compact .periodico-card,
    .periodico-card {
        width: 150px;
    }
}

@media (max-width: 420px) {
    .modules-orbit {
        grid-template-columns: 1fr 1fr !important;
    }

    .module-circle {
        max-width: 124px !important;
    }

    .portal-rail-btn,
    body.portal-rail-active .portal-quick-rail .portal-rail-btn {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .portal-rail-ico {
        width: 34px;
        height: 34px;
    }

    .rail-search-popover {
        bottom: 78px !important;
    }

    .portal-module table {
        min-width: 560px;
    }
}

@media (max-height: 760px) and (min-width: 901px) {
    body.portal-rail-active .portal-content-full {
        --portal-rail-offset: clamp(78px, 6vw, 98px);
    }

    .portal-quick-rail {
        max-height: calc(100dvh - 28px);
        gap: 6px;
        padding: 8px 7px;
        border-radius: 28px;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .portal-quick-rail::-webkit-scrollbar {
        display: none;
    }

    .portal-rail-btn,
    body.portal-rail-active .portal-quick-rail .portal-rail-btn {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .portal-rail-ico {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
}

/* =====================================================================
   Anuncios premium - menu nuevo + estante de periodicos
   ===================================================================== */
.portal-module[data-module-name="announcements"] .anu-hero-shell {
    overflow: visible !important;
    isolation: isolate;
    z-index: 80;
}

.portal-module[data-module-name="announcements"] .anu-hero-shell > img,
.portal-module[data-module-name="announcements"] .anu-hero-shell > div:not(.anu-hero-actions) {
    border-radius: 24px;
    overflow: hidden;
}

.portal-module[data-module-name="announcements"] .anu-hero-actions {
    z-index: 2000;
}

.portal-module[data-module-name="announcements"] .anu-new-wrapper {
    z-index: 2100;
}

.portal-module[data-module-name="announcements"] .anu-new-menu {
    min-width: 336px !important;
    padding: 12px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(245, 158, 11, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(22px) saturate(1.15) !important;
    overflow: hidden;
    z-index: 3000 !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu::before {
    content: "Crear contenido";
    display: block;
    padding: 5px 8px 10px;
    color: #94a3b8;
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button {
    position: relative;
    min-height: 78px;
    grid-template-columns: 50px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(226,232,240,0.78) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button + button {
    margin-top: 9px;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:hover {
    transform: translateY(-2px);
    border-color: rgba(245,158,11,0.34) !important;
    background: #ffffff !important;
    box-shadow: 0 18px 34px rgba(15,23,42,0.12);
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:hover::after {
    transform: translateX(3px);
    color: #fff;
    background: #0f172a;
    border-color: #0f172a;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button > div:first-child {
    width: 50px !important;
    height: 50px !important;
    border-radius: 17px !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(1) > div:first-child {
    background: linear-gradient(135deg, #fff7ed, #fed7aa) !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(1) > div:first-child i {
    color: #c2410c !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(2) > div:first-child {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(2) > div:first-child i {
    color: #2563eb !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(3) {
    background:
        radial-gradient(circle at 100% 0%, rgba(147,51,234,0.14), transparent 34%),
        linear-gradient(135deg, #ffffff, #faf5ff) !important;
    border-color: rgba(147,51,234,0.22) !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(3)::after {
    content: "PDF";
    width: auto;
    min-width: 38px;
    padding: 0 9px;
    font-family: var(--font-main);
    font-size: 0.62rem;
    letter-spacing: 0.9px;
    color: #7c3aed;
    background: #f5f3ff;
    border-color: #ddd6fe;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(3):hover::after {
    color: #fff;
    background: #7c3aed;
    border-color: #7c3aed;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(3) > div:first-child {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu button:nth-child(3) > div:first-child i {
    color: #7c3aed !important;
}

.portal-module[data-module-name="announcements"] .anu-new-menu div div {
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1.1;
}

.portal-module[data-module-name="announcements"] .anu-new-menu small {
    display: block;
    margin-top: 4px;
    color: #64748b !important;
    font-size: 0.74rem !important;
    line-height: 1.25;
}

.portal-module[data-module-name="announcements"] .periodico-rack {
    --rack-wood-a: #7a471e;
    --rack-wood-b: #4b260d;
    --rack-wood-c: #241105;
    --rack-gold-a: #fff3c4;
    --rack-gold-b: #f59e0b;
    --rack-gold-c: #7c3f07;
    margin-top: 18px !important;
    padding: 26px 22px 18px;
    border-radius: 30px;
    background:
        radial-gradient(ellipse at 50% -8%, rgba(255,226,151,0.34), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.09), transparent 22%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px),
        linear-gradient(135deg, var(--rack-wood-a), var(--rack-wood-b) 48%, var(--rack-wood-c));
    border: 1px solid rgba(91, 45, 12, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255,225,180,0.22),
        inset 0 -22px 42px rgba(0,0,0,0.34),
        0 26px 58px rgba(15,23,42,0.28);
    filter: none !important;
    overflow: visible;
}

.portal-module[data-module-name="announcements"] .periodico-rack::before,
.portal-module[data-module-name="announcements"] .periodico-rack::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.portal-module[data-module-name="announcements"] .periodico-rack::before {
    left: 32px;
    right: 32px;
    top: 12px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

.portal-module[data-module-name="announcements"] .periodico-rack::after {
    left: 20px;
    right: 20px;
    bottom: -8px;
    height: 18px;
    border-radius: 0 0 26px 26px;
    background: linear-gradient(180deg, rgba(35,17,5,0.68), rgba(10,5,2,0));
    filter: blur(2px);
}

.portal-module[data-module-name="announcements"] .periodico-pediment {
    width: calc(100% - 20px);
    height: 42px !important;
    margin: -44px auto 0 !important;
    clip-path: polygon(0 100%, 7% 24%, 50% 0, 93% 24%, 100% 100%) !important;
    border-radius: 18px 18px 8px 8px;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 13px),
        linear-gradient(180deg, #8b5424, #5c2e0f 65%, #2a1305) !important;
    box-shadow:
        inset 0 -5px 0 rgba(0,0,0,0.48),
        0 10px 18px rgba(0,0,0,0.24) !important;
}

.portal-module[data-module-name="announcements"] .periodico-pediment-finial {
    top: -7px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.portal-module[data-module-name="announcements"] .periodico-marquee {
    width: min(84%, 560px);
    margin: -3px auto 16px !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,0.72), transparent 24%),
        linear-gradient(180deg, var(--rack-gold-a), var(--rack-gold-b) 52%, var(--rack-gold-c)) !important;
    border: 1px solid rgba(66,32,6,0.74) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        inset 0 -3px 0 rgba(0,0,0,0.2),
        0 14px 26px rgba(0,0,0,0.28) !important;
}

.portal-module[data-module-name="announcements"] .periodico-marquee .periodico-rack-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.98rem !important;
}

.portal-module[data-module-name="announcements"] .periodico-marquee .periodico-rack-tag {
    font-size: 0.54rem !important;
    letter-spacing: 2.4px !important;
}

.portal-module[data-module-name="announcements"] .periodico-marquee .periodico-rack-name {
    font-size: clamp(1.03rem, 1.8vw, 1.32rem) !important;
}

.portal-module[data-module-name="announcements"] .periodico-cabinet {
    margin: 0;
    padding: 24px 30px 12px !important;
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,221,150,0.24), transparent 46%),
        linear-gradient(90deg, rgba(0,0,0,0.34), transparent 9%, transparent 91%, rgba(0,0,0,0.34)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 13px),
        linear-gradient(180deg, #4c270e, #2a1306 72%, #1a0b03) !important;
    border: 1px solid rgba(255,218,154,0.14);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.035),
        inset 0 18px 36px rgba(255,190,90,0.08),
        inset 0 -24px 42px rgba(0,0,0,0.34) !important;
}

.portal-module[data-module-name="announcements"] .periodico-cabinet::before {
    left: 9%;
    right: 9%;
    top: 12px;
    height: 88px;
    background: radial-gradient(ellipse at top, rgba(255,205,120,0.30), transparent 70%) !important;
}

.portal-module[data-module-name="announcements"] .periodico-cabinet-pillar {
    width: 20px !important;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.42), rgba(255,220,160,0.13), rgba(0,0,0,0.5)),
        repeating-linear-gradient(180deg, rgba(255,220,160,0.20) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #6d3d18, #321505) !important;
}

.portal-module[data-module-name="announcements"] .periodico-shelf {
    padding-top: 18px !important;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.03) 28%, rgba(0,0,0,0.14)),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.34), transparent 72%);
    border: 1px solid rgba(255,220,160,0.12);
    overflow: hidden;
}

.portal-module[data-module-name="announcements"] .periodico-shelf-rail {
    height: 18px !important;
    background:
        repeating-linear-gradient(90deg, rgba(255,226,160,0.20) 0 4px, transparent 4px 14px),
        linear-gradient(180deg, #b97827, #5a2d0e 70%, #211004) !important;
}

.portal-module[data-module-name="announcements"] .periodico-list {
    min-height: 260px !important;
    padding: 32px 20px 18px !important;
    gap: 18px !important;
    justify-content: flex-start;
    background:
        linear-gradient(180deg, rgba(255,217,151,0.06), transparent 30%),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 18px);
}

.portal-module[data-module-name="announcements"] .periodico-shelf-wood {
    height: 42px !important;
    margin: -6px -26px 0 !important;
    border-radius: 6px 6px 20px 20px !important;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 2px, transparent 2px 10px),
        radial-gradient(ellipse at 18% 50%, rgba(255,213,150,0.16), transparent 44%),
        radial-gradient(ellipse at 78% 40%, rgba(0,0,0,0.22), transparent 24%),
        linear-gradient(180deg, #a0662b, #64330f 54%, #2b1204) !important;
    box-shadow:
        inset 0 4px 0 rgba(255,226,170,0.18),
        inset 0 -8px 0 rgba(0,0,0,0.34),
        0 -10px 24px rgba(0,0,0,0.20),
        0 16px 26px rgba(0,0,0,0.48) !important;
}

.portal-module[data-module-name="announcements"] .periodico-shelf-shadow {
    height: 16px !important;
    margin: 0 -24px !important;
    background: radial-gradient(ellipse at top, rgba(0,0,0,0.54), transparent 70%) !important;
}

.portal-module[data-module-name="announcements"] .periodico-base {
    margin: 0 12px !important;
    padding: 12px 18px 14px !important;
    border-radius: 0 0 22px 22px !important;
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.20) 0 2px, transparent 2px 13px),
        linear-gradient(180deg, #7d481e, #3a1908) !important;
}

.portal-module[data-module-name="announcements"] .periodico-base-plate {
    border-radius: 999px !important;
    padding: 7px 18px !important;
    font-size: 0.6rem !important;
}

.portal-module[data-module-name="announcements"] .periodico-empty {
    min-height: 170px;
    padding: 24px 22px !important;
    border: 1.5px dashed rgba(255,226,170,0.34) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(245,158,11,0.18), transparent 38%),
        rgba(0,0,0,0.26) !important;
}

.portal-module[data-module-name="announcements"] .periodico-empty strong {
    color: #fff7ed !important;
    font-size: 1rem !important;
}

.portal-module[data-module-name="announcements"] .periodico-empty span {
    color: rgba(255,239,213,0.72) !important;
    max-width: 360px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .portal-module[data-module-name="announcements"] .anu-hero-actions {
        left: 14px;
        right: 14px;
        top: 14px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .portal-module[data-module-name="announcements"] .anu-new-wrapper {
        position: static;
    }

    .portal-module[data-module-name="announcements"] .anu-new-menu {
        position: fixed !important;
        left: 14px !important;
        right: 14px !important;
        top: 88px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .portal-module[data-module-name="announcements"] .periodico-rack {
        padding: 20px 12px 14px;
    }

    .portal-module[data-module-name="announcements"] .periodico-marquee {
        width: 100%;
        padding: 10px 12px !important;
        gap: 8px;
    }

    .portal-module[data-module-name="announcements"] .periodico-marquee .periodico-rack-tag {
        display: none;
    }

    .portal-module[data-module-name="announcements"] .periodico-cabinet {
        padding: 18px 18px 10px !important;
    }

    .portal-module[data-module-name="announcements"] .periodico-cabinet-pillar {
        display: none;
    }
}

/* Acciones premium y estables para administrar ediciones del periodico */
.portal-module[data-module-name="announcements"] .periodico-card:hover {
    transform: translateY(-8px) rotate(0deg) scale(1.025) !important;
    animation: periodico-stack-in 0s, none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.55),
        inset 0 -20px 30px rgba(180,120,50,0.08),
        2px 4px 0 rgba(0,0,0,0.10),
        4px 8px 0 rgba(0,0,0,0.06),
        14px 32px 48px rgba(0,0,0,0.62),
        0 0 0 2px rgba(245,158,11,0.42),
        0 0 24px rgba(251,191,36,0.22);
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable {
    isolation: isolate;
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable:has(.periodico-delete:hover),
.portal-module[data-module-name="announcements"] .periodico-card.is-manageable:has(.periodico-delete:focus-visible) {
    transform: translateY(-3px) rotate(var(--tilt)) scale(1.01) !important;
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete {
    top: 10px;
    right: 10px;
    width: auto;
    min-width: 38px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    opacity: 1 !important;
    transform: none !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,241,242,0.96));
    color: #dc2626;
    border: 1px solid rgba(248,113,113,0.42);
    box-shadow:
        0 12px 28px rgba(127,29,29,0.22),
        inset 0 1px 0 rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    z-index: 12;
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable:hover .periodico-delete {
    opacity: 1 !important;
    transform: none !important;
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete span {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0;
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete:hover,
.portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete:focus-visible {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow:
        0 14px 32px rgba(127,29,29,0.34),
        inset 0 1px 0 rgba(255,255,255,0.24);
}

.portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete:focus-visible {
    outline: 3px solid rgba(251,191,36,0.55);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete {
        min-width: 34px;
        height: 32px;
        padding: 0 9px;
    }

    .portal-module[data-module-name="announcements"] .periodico-card.is-manageable .periodico-delete span {
        display: none;
    }
}

/* Capas: notificaciones y perfil siempre por encima del contenido del modulo */
body.intranet-page .portal-topbar,
body.intranet-page.intranet-fullscreen .portal-topbar {
    position: relative;
    z-index: 90000;
    overflow: visible;
}

body.intranet-page .portal-top-actions,
body.intranet-page .global-announcer,
body.intranet-page #cabo-user-chip-host,
body.intranet-page .cabo-user-chip {
    position: relative;
    z-index: 90100;
    overflow: visible;
}

body.intranet-page .global-announcer-panel,
body.intranet-page .cabo-user-chip-menu {
    z-index: 90200 !important;
}

body.intranet-page .scroll-widget-left,
body.intranet-page .scroll-widget-right {
    z-index: 90000;
}

body.intranet-page .portal-view,
body.intranet-page .portal-module {
    position: relative;
    z-index: 1;
}

/* Fondo continuo de intranet: evita cortes de color al hacer scroll en cualquier modulo */
html,
body.intranet-page,
body.intranet-page.intranet-fullscreen {
    background-color: #f1f3f6 !important;
}

body.intranet-page,
body.intranet-page.intranet-fullscreen {
    background-image:
        radial-gradient(980px circle at 12% 14%, rgba(249, 115, 22, 0.13), transparent 58%),
        radial-gradient(920px circle at 88% 4%, rgba(15, 23, 42, 0.08), transparent 62%),
        radial-gradient(1080px circle at 56% 92%, rgba(59, 130, 246, 0.10), transparent 64%),
        linear-gradient(135deg, #f4f1ee 0%, #eef2f7 48%, #eef3f9 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh, 100vw 100vh !important;
    background-position: center center !important;
}

/* Visor premium de periodico PDF tipo libro */
.periodico-book-overlay {
    position: fixed;
    inset: 0;
    z-index: 100200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.3vw, 34px);
    background:
        radial-gradient(circle at 18% 10%, rgba(245,158,11,0.20), transparent 34%),
        radial-gradient(circle at 82% 88%, rgba(59,130,246,0.16), transparent 34%),
        rgba(15,23,42,0.76);
    backdrop-filter: blur(16px) saturate(1.08);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.periodico-book-overlay.is-open {
    opacity: 1;
}

.periodico-book-shell {
    width: min(1380px, 100%);
    height: min(900px, 100%);
    min-height: 560px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.15), transparent 32%),
        linear-gradient(135deg, #111827, #020617);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        0 40px 120px rgba(0,0,0,0.58),
        inset 0 1px 0 rgba(255,255,255,0.10);
    color: #f8fafc;
    transform: translateY(12px) scale(0.985);
    transition: transform 0.22s cubic-bezier(.22,1,.36,1);
}

.periodico-book-overlay.is-open .periodico-book-shell {
    transform: translateY(0) scale(1);
}

.periodico-book-header,
.periodico-book-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px clamp(18px, 2vw, 28px);
    background: rgba(2,6,23,0.72);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.periodico-book-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 0;
    padding-block: 12px;
    color: #cbd5e1;
    font-weight: 800;
}

.periodico-book-footer small {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.periodico-book-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.periodico-book-title > i {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #f59e0b;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.20);
    flex: 0 0 auto;
}

.periodico-book-title div {
    min-width: 0;
}

.periodico-book-title span {
    display: block;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.periodico-book-title strong {
    display: block;
    max-width: min(58vw, 720px);
    overflow: hidden;
    color: #fff;
    font-size: clamp(1rem, 1.45vw, 1.28rem);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.periodico-book-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.periodico-book-actions button,
.periodico-book-actions a,
.periodico-book-nav {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    display: inline-grid;
    place-items: center;
    color: #cbd5e1;
    background: rgba(255,255,255,0.07);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.periodico-book-actions button:hover,
.periodico-book-actions a:hover,
.periodico-book-nav:hover:not(:disabled) {
    transform: translateY(-1px);
    color: #fff;
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.34);
}

.periodico-book-actions button:disabled,
.periodico-book-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.periodico-book-actions [data-book-zoom-label] {
    min-width: 48px;
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
}

.periodico-book-stage {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 42px) clamp(50px, 7vw, 92px);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.48), transparent 50%),
        linear-gradient(135deg, rgba(248,250,252,0.05), rgba(15,23,42,0.14));
    perspective: 1800px;
}

.periodico-book {
    position: relative;
    width: min(1060px, 100%);
    height: min(680px, 100%);
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    filter: drop-shadow(0 34px 44px rgba(0,0,0,0.50));
    transform-style: preserve-3d;
}

.periodico-book-page {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.9), transparent 34%),
        linear-gradient(135deg, #fffef7, #f8fafc 72%, #eef2f7);
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.65),
        inset 0 -20px 38px rgba(15,23,42,0.04);
}

.periodico-book-left {
    border-radius: 20px 4px 4px 20px;
    transform-origin: right center;
}

.periodico-book-right {
    border-radius: 4px 20px 20px 4px;
    transform-origin: left center;
}

.periodico-book-left::after,
.periodico-book-right::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.periodico-book-left::after {
    background: linear-gradient(90deg, transparent 76%, rgba(15,23,42,0.14));
}

.periodico-book-right::after {
    background: linear-gradient(90deg, rgba(15,23,42,0.13), transparent 24%);
}

.periodico-book-page canvas {
    max-width: calc(100% - 22px);
    max-height: calc(100% - 22px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(15,23,42,0.10);
}

.periodico-book-spine {
    position: relative;
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.48), transparent 72%),
        linear-gradient(90deg, rgba(15,23,42,0.38), rgba(255,255,255,0.36), rgba(15,23,42,0.38));
    box-shadow:
        inset 5px 0 8px rgba(0,0,0,0.20),
        inset -5px 0 8px rgba(0,0,0,0.20);
}

.periodico-turn-sheet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% + 10px);
    width: calc(50% - 10px);
    border-radius: 4px 20px 20px 4px;
    background:
        linear-gradient(90deg, rgba(15,23,42,0.20), rgba(255,255,255,0.92) 18%, rgba(248,250,252,0.98) 70%, rgba(15,23,42,0.18)),
        #fff;
    box-shadow: 0 28px 42px rgba(0,0,0,0.34);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
}

.periodico-book.is-turning-next .periodico-turn-sheet {
    animation: periodicoPageTurnNext 0.58s cubic-bezier(.24,.86,.31,1) forwards;
}

.periodico-book.is-turning-prev .periodico-turn-sheet {
    left: 0;
    border-radius: 20px 4px 4px 20px;
    transform-origin: right center;
    animation: periodicoPageTurnPrev 0.58s cubic-bezier(.24,.86,.31,1) forwards;
}

@keyframes periodicoPageTurnNext {
    0% { opacity: 0; transform: rotateY(0deg); }
    14% { opacity: 1; }
    55% { opacity: 1; transform: rotateY(-96deg); }
    100% { opacity: 0; transform: rotateY(-174deg); }
}

@keyframes periodicoPageTurnPrev {
    0% { opacity: 0; transform: rotateY(0deg); }
    14% { opacity: 1; }
    55% { opacity: 1; transform: rotateY(96deg); }
    100% { opacity: 0; transform: rotateY(174deg); }
}

.periodico-book-page-loader {
    color: #f59e0b;
    font-size: 1.8rem;
}

.periodico-book-page-num {
    position: absolute;
    bottom: 10px;
    right: 14px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 900;
}

.periodico-book-cover-inner,
.periodico-book-blank {
    width: min(82%, 360px);
    min-height: 68%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    color: #241005;
    text-align: center;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 8%, rgba(245,158,11,0.16), transparent 34%),
        linear-gradient(180deg, #fff7ed, #fef3c7);
    border: 1px solid rgba(146,64,14,0.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.60), 0 18px 34px rgba(146,64,14,0.10);
}

.periodico-book-cover-seal {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 35% 30%, #fbbf24, #b45309 78%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 14px 24px rgba(146,64,14,0.32);
    font-size: 1.55rem;
}

.periodico-book-cover-inner span {
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.periodico-book-cover-inner h3 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.25rem, 2vw, 1.72rem);
    font-weight: 950;
    line-height: 1.05;
}

.periodico-book-cover-inner p {
    margin: 0;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1.45;
}

.periodico-book-cover-inner small {
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 900;
}

.periodico-book-blank {
    min-height: 54%;
    color: #94a3b8;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

.periodico-book-blank i {
    color: #cbd5e1;
    font-size: 2rem;
}

.periodico-book-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 48px;
    height: 64px;
    transform: translateY(-50%);
    border-radius: 18px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
}

.periodico-book-nav-prev {
    left: clamp(10px, 2vw, 28px);
}

.periodico-book-nav-next {
    right: clamp(10px, 2vw, 28px);
}

.periodico-book-fallback {
    width: min(1120px, 100%);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
}

.periodico-book-fallback > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    color: #f8fafc;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
}

.periodico-book-fallback > div i {
    color: #f59e0b;
    font-size: 1.4rem;
}

.periodico-book-fallback > div span {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 750;
}

.periodico-book-fallback iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 18px;
    background: #fff;
}

@media (max-width: 880px) {
    .periodico-book-shell {
        min-height: 0;
        height: 100%;
        border-radius: 24px;
    }

    .periodico-book-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .periodico-book-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .periodico-book-stage {
        padding: 18px 16px 76px;
    }

    .periodico-book {
        width: min(520px, 100%);
        height: 100%;
        grid-template-columns: 1fr;
    }

    .periodico-book-left,
    .periodico-book-spine {
        display: none;
    }

    .periodico-book-right {
        border-radius: 20px;
    }

    .periodico-turn-sheet {
        left: 0;
        width: 100%;
        border-radius: 20px;
    }

    .periodico-book-nav {
        top: auto;
        bottom: 14px;
        transform: none;
        width: 76px;
        height: 46px;
    }

    .periodico-book-nav-prev {
        left: calc(50% - 86px);
    }

    .periodico-book-nav-next {
        right: calc(50% - 86px);
    }

    .periodico-book-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   INTRANET — PREMIUM MOBILE & TABLET (iPhone · iPad)
   ─────────────────────────────────────────────────────────────────
   The quick-rail already becomes a bottom tab bar at ≤ 720px.
   These rules complete the experience for small screens.
═══════════════════════════════════════════════════════════════════ */

/* ── iPhone safe-area (notch + home bar) ───────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 720px) {
        .portal-quick-rail {
            bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
        }
        .portal-in-module .portal-content-full {
            padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
        }
        body.intranet-page {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ── Touch device — tap feedback, no hover effects ────────────────
   On devices that don't have a hover pointer (iPhone, iPad),
   swap CSS hover animations for :active states instead.          */
@media (hover: none) {
    .portal-rail-btn,
    .portal-nav-item,
    .doc-card, .course-card,
    .dir-card, .collab-card,
    .service-card, .tool-card {
        -webkit-tap-highlight-color: transparent;
    }
    .portal-rail-btn:active { transform: scale(0.88) !important; }
}

/* ── iPad — intermediate grid (768px – 1024px) ────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .module-grid,
    .panel-grid,
    .document-grid,
    .course-grid { grid-template-columns: repeat(2, 1fr); }

    .helpdesk-kpis { grid-template-columns: repeat(3, 1fr); }

    .portal-view { padding: 24px 28px; }

    /* Better rail on iPad portrait (bigger buttons) */
    .portal-rail-btn { width: 52px; height: 52px; }
}

/* ── iPhone portrait (≤ 430px) ────────────────────────────────── */
@media (max-width: 430px) {

    /* Topbar compact */
    .portal-topbar { padding: 10px 14px; gap: 8px; }

    .portal-view { padding: 14px; }

    /* Module cards full width */
    .module-grid,
    .panel-grid,
    .document-grid,
    .course-grid,
    .employee-grid,
    .helpdesk-kpis { grid-template-columns: 1fr; }

    /* Rail tab bar: no text, tight padding */
    .portal-quick-rail { padding: 6px 8px; gap: 6px; border-radius: 24px; }
    .portal-rail-btn { width: 46px; height: 46px; }

    /* Search popover full width */
    .rail-search-popover { width: calc(100vw - 20px); }
}

/* ── Landscape iPhone (height ≤ 430px, wide) ──────────────────── */
@media (max-height: 430px) and (orientation: landscape) {
    /* Move rail to right side in landscape to avoid content overlap */
    .portal-quick-rail {
        top: 50%; bottom: auto;
        left: auto; right: 12px;
        transform: translateY(-50%) translateX(32px);
        flex-direction: column;
        max-width: none; overflow-x: hidden; overflow-y: auto;
        border-radius: 999px;
        max-height: calc(100vh - 40px);
    }
    .portal-in-module .portal-quick-rail {
        transform: translateY(-50%) translateX(0);
    }
    .portal-in-module .portal-content-full {
        padding-left: 14px;
        padding-right: 80px;
        padding-bottom: 14px;
    }
    .portal-rail-btn .portal-rail-label { display: none; }
}