:root{
        --primary:#1a365d; --primary-dark:#0f2a4a; --primary-light:#2d5a8b;
        --accent:#17a2b8; --accent-light:#20c997;
        --bg-main: #e0ebf1; --bg-card: #ffffff; --bg-sidebar:#2d3748;
        --text-primary:#2d3748; --text-secondary:#64748b;
        --text: var(--text-primary); --muted: var(--text-secondary); --border: #e2e8f0;
        --shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
        --shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
        --gradient-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
        --sidebar-primary:#2b6cb0;
        --sidebar-primary-dark:#0b0f14;
        --sidebar-accent:#7aa7e6;
        --sidebar-text:#e2e8f0;
        --space-2:.5rem;
        --space-3:.75rem;
        --space-4:1rem;
        --space-5:1.25rem;
        --space-6:1.5rem;
        --space-7:1.85rem;
      }
      body[data-density="compact"]{
        --space-2:.4rem;
        --space-3:.6rem;
        --space-4:.85rem;
        --space-5:1rem;
        --space-6:1.2rem;
        --space-7:1.5rem;
      }
      *{box-sizing:border-box;margin:0;padding:0}
      html,body{height:100%;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg-main);color:var(--text);line-height:1.6}

      .app{display:flex;min-height:100vh}
      .sidebar{
        width:320px;
        background:linear-gradient(180deg,#111827 0%,var(--sidebar-primary-dark) 100%);
        border-right:1px solid rgba(122,167,230,.26);
        position:fixed;height:100vh;overflow:hidden;z-index:1000;box-shadow:var(--shadow-lg);display:flex;flex-direction:column
      }
      .sidebar-header{
        background:linear-gradient(120deg,var(--sidebar-accent) 0%,var(--sidebar-primary-dark) 100%);
        padding:1.55rem 1.35rem 1.25rem;
        text-align:center;
        border-radius:0 0 1rem 1rem;
        box-shadow:0 8px 24px rgba(15,23,42,.28);
      }
      .logo{width:76px;height:76px;border-radius:14px;border:3px solid rgba(255,255,255,.26);object-fit:cover;box-shadow:0 8px 32px rgba(0,0,0,.3)}
      .brand-title{color:#fff;font-size:1.4rem;font-weight:800;letter-spacing:.03em;margin:.64rem 0 .2rem}
      .brand-sub{color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;line-height:1.35}
      .banner{height:210px;position:relative;overflow:hidden;background:linear-gradient(120deg,var(--sidebar-accent) 0%,var(--sidebar-primary-dark) 100%);border-radius:0 0 .95rem .95rem;margin:.72rem 0 .84rem}
      .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;background-size:cover;background-position:center}
      .slide.active{opacity:1}
      .overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(43,108,176,.42),rgba(11,15,20,.82));display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.35rem;color:#ffffff;padding:1rem;text-align:center}
      .banner-meta{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.35rem}
      .banner-greeting{font-size:1.05rem;font-weight:800}
      .banner-role{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85)}
      .banner-text{font-size:1.05rem;font-weight:700}
      .sidebar-user{padding:.68rem 1.36rem .5rem;border-bottom:1px solid rgba(122,167,230,.22);background:rgba(15,23,42,.22)}
      .sidebar-greeting{color:#fff;font-size:.92rem;font-weight:800;line-height:1.2}
      .sidebar-role{margin-top:0.14rem;color:rgba(169,195,255,.86);font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
      .nav{padding:.36rem 0 .62rem;overflow-y:auto;flex:1}
      .nav::-webkit-scrollbar{width:8px}
      .nav::-webkit-scrollbar-thumb{background:rgba(122,167,230,.32);border-radius:999px}
      .nav::-webkit-scrollbar-track{background:transparent}
      .main{flex:1;margin-left:320px;display:flex;flex-direction:column;min-height:100vh}

      .header{background:var(--bg-card);border-bottom:1px solid var(--border);padding:.75rem 2rem;box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
      .header-inner{
        max-width:1400px;
        margin:0 auto;
        display:grid;
        grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr);
        align-items:center;
        gap:1rem;
      }
      .topbar-left{display:flex;align-items:center;min-height:1px}
      .topbar-center{display:flex;align-items:center;justify-content:center}
      .topbar-ciemat{
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }
      .topbar-ciemat img{
        height:52px;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
        border-radius:999px;
        background:#fff;
        padding:.25rem;
      }
      .topbar-right{display:flex;align-items:center;gap:.75rem;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
      .topbar-right .logo-institucional{
        height:50px;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
        border-radius:999px;
        background:#ffffff;
        padding:.2rem;
      }
      
      /* Exit chip especifico */
      .exit-chip{background:#dc2626!important;color:#fff!important;border-color:#dc2626!important}
      .exit-chip:hover{background:#b91c1c!important;border-color:#b91c1c!important}
      .content{flex:1;max-width:1180px;margin:0 auto;width:100%;padding:var(--space-6)}
      .content-surface{
        background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(248,250,252,.97) 100%);
        border:1px solid rgba(26,54,93,.12);
        border-radius:1.2rem;
        box-shadow:0 18px 32px rgba(15,23,42,.08);
        padding:var(--space-6);
      }
      .messages-container{max-width:none;margin:0 0 var(--space-5);width:100%}
      .alert{padding:1rem;margin-bottom:.8rem;border-radius:.9rem;border-left:4px solid transparent;box-shadow:0 6px 18px rgba(15,23,42,.06)}
      .alert-success{background:#f0fdf4;border-left-color:#22c55e;color:#166534}
      .alert-error{background:#fef2f2;border-left-color:#ef4444;color:#991b1b}
      .alert-warning{background:#fffbeb;border-left-color:#f59e0b;color:#92400e}
      .alert-info{background:#eff6ff;border-left-color:#3b82f6;color:#1e40af}
      .card{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem}
      .icts-context-frame{
        margin:0 0 var(--space-5);
        border:1px solid rgba(26,54,93,.12);
        border-radius:1.1rem;
        padding:var(--space-2);
        background:rgba(226,232,240,.6);
        box-shadow:0 10px 24px rgba(15,23,42,.08);
      }
      .icts-context-header{
        background:linear-gradient(120deg,#7aa7e6 0%,#173659 48%,#0b0f14 100%);
        color:#ffffff;
        border-radius:1rem;
        border:1px solid rgba(122,167,230,.3);
        padding:.9rem 1rem;
        box-shadow:0 14px 28px rgba(15,23,42,.22);
      }
      .icts-context-header-inner{
        display:flex;
        align-items:center;
        gap:1rem;
        flex-wrap:wrap;
      }
      .icts-context-logo-wrap{
        width:64px;
        height:64px;
        border-radius:999px;
        background:#ffffff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 10px 18px rgba(0,0,0,.22);
      }
      .icts-context-logo{
        width:52px;
        height:52px;
        object-fit:contain;
      }
      .icts-context-copy{
        flex:1 1 320px;
        min-width:220px;
      }
      .icts-context-overline{
        margin:0;
        font-size:.72rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        font-weight:800;
        color:rgba(255,255,255,.82);
      }
      .icts-context-title{
        margin:.12rem 0 0;
        font-size:1.1rem;
        font-weight:900;
        letter-spacing:.04em;
        text-transform:uppercase;
      }
      .icts-context-subtitle{
        margin:.22rem 0 0;
        font-size:.84rem;
        color:rgba(255,255,255,.88);
        font-weight:600;
        max-width:76ch;
      }
      .icts-context-pill{
        margin-left:auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:2.1rem;
        padding:.38rem .8rem;
        border-radius:999px;
        background:rgba(255,255,255,.14);
        border:1px solid rgba(255,255,255,.22);
        color:#ffffff;
        font-size:.75rem;
        font-weight:800;
        letter-spacing:.06em;
        text-transform:uppercase;
      }
      .footer{background:var(--bg-sidebar);color:rgba(255,255,255,.8);text-align:center;padding:1.25rem;margin-top:auto}

      .toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:1100;background:var(--sidebar-primary);color:#fff;border:none;border-radius:.5rem;padding:.6rem .8rem;line-height:1;font-size:0}
      .toggle::before{content:"\2630";font-size:1.25rem;vertical-align:middle}
      .overlay-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}
      .icts-floating-back{
        position:fixed;
        right:1rem;
        top:50%;
        z-index:1085;
        display:inline-flex;
        align-items:center;
        gap:.4rem;
        padding:.55rem .85rem;
        border-radius:999px;
        border:1px solid rgba(122,167,230,.45);
        background:var(--primary-dark);
        color:#ffffff;
        text-decoration:none;
        font-weight:700;
        box-shadow:0 12px 24px rgba(15,42,74,.32);
        transition:background .2s ease, transform .12s ease, box-shadow .2s ease;
        transform:translateY(-50%);
      }
      .icts-floating-back:hover{
        background:var(--primary);
        color:#ffffff;
        text-decoration:none;
        transform:translateY(calc(-50% - 1px));
        box-shadow:0 14px 26px rgba(15,42,74,.36);
      }
      .icts-floating-back:active{transform:translateY(-50%)}

      /* Navegacion como DTF */
      .nav-title{
        color:rgba(169,195,255,.72);
        font-size:.72rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.07em;
        padding:0 .92rem;
        line-height:1.2;
        margin:.86rem .58rem .3rem .58rem;
        border-radius:.56rem;
      }
      .nav-title-main{
        color:#ffffff;
        font-size:1.08rem;
        font-weight:800;
        letter-spacing:.08em;
        margin:1.02rem .62rem .45rem .62rem;
        padding:.2rem .88rem;
        border-radius:.56rem;
        background:rgba(122,167,230,.12);
      }
      .nav-title .nav-lab-label{display:inline-block}
      .nav .nav-lab-group > .nav-title{
        color:#dbe7ff;
        font-size:.98rem;
        font-weight:800;
        letter-spacing:.075em;
        line-height:1.2;
        margin:.98rem .62rem .34rem .62rem;
        padding:.2rem .88rem;
        border-radius:.56rem;
      }
      .nav .nav-lab-group > .nav-title .nav-lab-label,
      .nav .nav-lab-group > .nav-title > span{
        color:#dbe7ff;
      }
      .nav-lab-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding:.1rem 0}
      .nav-lab-toggle .nav-lab-chevron{font-size:.85rem;transition:transform .2s}
      .nav-lab-toggle.is-collapsed .nav-lab-chevron{transform:rotate(-90deg)}
      .nav-lab-toggle:hover{background:rgba(122,167,230,.1);border-radius:.6rem}
      .nav-lab-group{
        margin:.45rem .52rem;
        padding:.2rem 0 .36rem;
        border-radius:.9rem;
        background:rgba(255,255,255,.045);
        border:1px solid rgba(191,219,254,.08);
      }
      .nav-item{
        display:block;
        margin-right:.45rem;
        padding:.62rem 1.34rem;
        color:var(--sidebar-text);
        text-decoration:none;
        font-weight:500;
        font-size:.98rem;
        line-height:1.2;
        letter-spacing:.01em;
        border-left:3px solid transparent;
        border-radius:0 .65rem .65rem 0;
        transition:.2s
      }
      .nav-item:hover{
        color:#fff;
        background:rgba(122,167,230,.2);
        border-left-color:var(--sidebar-accent);
        transform:translateX(2px)
      }
      .nav-item i{font-size:1rem;width:1.15rem;text-align:center;margin-right:.48rem}
      .nav-subtitle{
        color:rgba(169,195,255,.58);
        font-size:.66rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.07em;
        padding:0 .88rem;
        margin:.45rem .62rem .22rem .62rem;
        border-radius:.56rem;
      }
      .nav-subtitle-toggle{
        background:transparent;
        border:none;
        width:calc(100% - 1.24rem);
        display:flex;
        align-items:center;
        justify-content:space-between;
        cursor:pointer;
      }
      .nav-subtitle-toggle i{font-size:.85rem;transition:transform .2s}
      .nav-subtitle-toggle.is-collapsed i{transform:rotate(-90deg)}
      .nav-subsection.is-collapsed{display:none}
      .nav-subsection{margin-bottom:.08rem}
      .nav-subitem{padding-left:2.48rem;font-weight:500;font-size:.94rem}
      .nav-subitem:hover{transform:translateX(2px)}
      .nav-item-static{cursor:default}
      .nav-item-static:hover{background:transparent;border-left-color:transparent;transform:none}
      .nav-item-static i{opacity:.85}

      /* Responsive */
      @media (max-width:1024px){
        .sidebar{transform:translateX(-100%);transition:transform .3s}
        .sidebar.open{transform:translateX(0)}
        .overlay-bg.open{display:block}
        .main{margin-left:0}
        .toggle{display:block}
        .nav-item{padding:.6rem 1.25rem;font-size:.88rem}
        .nav-subitem{padding-left:2.35rem}
        .header{padding:.75rem 1rem}
        .header-inner{grid-template-columns:1fr auto}
        .topbar-left,
        .topbar-center{display:none}
        .topbar-right .logo-institucional{height:34px;padding:.15rem}
        .icts-floating-back{
          right:.7rem;
          top:50%;
          padding:.5rem .65rem;
        }
        .icts-floating-back i{font-size:1.05rem}
      }

      /* Paginas sin sidebar */
      body.no-sidebar .sidebar{display:none}
      body.no-sidebar .main{margin-left:0}
      body.no-sidebar .toggle, body.no-sidebar .overlay-bg{display:none}

      /* Estilos utiles en el header */
      .top-actions{ display:flex; gap:.5rem; align-items:center; margin-left:.5rem }
      .chip{
        display:inline-flex; align-items:center; gap:.35rem;
        padding:.35rem .65rem; border:1px solid #dee2e6; border-radius:999px;
        text-decoration:none; color:#212529; background:#ffffff;
        box-shadow:0 2px 4px rgba(0,0,0,0.1); font-weight:600;
      }
      .topbar-right form{margin:0}
      .topbar-right form .chip{font:inherit; cursor:pointer}
      .chip:hover{ background:#eff6ff; color:#0f2a4a; border-color:rgba(26,54,93,.35) }
      .cert-chip{
        border-color: rgba(26,54,93,.4);
        color:#1f2937;
        background:#f8fafc;
      }
      .cert-chip:hover{
        background:#e2e8f0;
        color:#0f172a;
      }
      .footer .logo-institucional{
        height:100px;
        margin-left:.4rem;
        vertical-align:middle;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
      }
      .footer .logo-infraestructuras{
        height:64px;
        width:auto;
        margin-left:.6rem;
        border-radius:.6rem;
        background:#ffffff;
        padding:.2rem .45rem;
      }
      .role-chip{
        padding:.35rem .65rem; border-radius:999px; font-weight:700;
        background:var(--primary); color:#ffffff; box-shadow:0 2px 4px rgba(0,0,0,0.2);
        text-shadow:none; border:1px solid rgba(255,255,255,0.2);
      }
      .lang-switcher{
        display:inline-flex;
        align-items:center;
        gap:.25rem;
        padding:.2rem;
        background:#f1f5f9;
        border-radius:999px;
        margin-right:.5rem;
        border-radius:999px;
        border:1px solid #dbe4ee;
        background:linear-gradient(135deg,#f8fafc,#e2e8f0);
        box-shadow:0 6px 16px rgba(15,23,42,.12);
      }
      .lang-label{
        color:#1f2937;
        font-weight:800;
        font-size:.7rem;
        letter-spacing:.12em;
        text-transform:uppercase;
        padding:0 .35rem;
      }
      .lang-pill{
        border:0;
        background:transparent;
        color:#334155;
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        padding:.3rem .75rem;
        border-radius:999px;
        font-weight:700;
        letter-spacing:.02em;
        transition:all .2s ease;
        cursor:pointer;
      }
      .lang-pill:hover{
        color:#0f172a;
        background:rgba(15,23,42,.08);
      }
      .lang-pill.is-active{
        background:var(--primary);
        color:#fff;
        box-shadow:0 6px 14px rgba(26,54,93,.25);
      }
      .lang-code{
        font-size:.7rem;
        font-weight:800;
        letter-spacing:.12em;
      }
      .lang-name{
        font-size:.8rem;
        font-weight:600;
      }
      @media (max-width:768px){
        .lang-name{ display:none; }
        .lang-pill{ padding:.3rem .6rem; }
      }

      @media (max-width:900px){
        .content{padding:1rem}
        .content-surface{padding:1rem;border-radius:1rem}
        .icts-context-header{padding:.85rem .9rem}
        .icts-context-header-inner{align-items:flex-start}
        .icts-context-pill{margin-left:0}
      }

      @media (max-width:640px){
        .content{padding:.6rem}
        .content-surface{padding:.78rem;border-radius:.9rem}
        .icts-context-logo-wrap{width:54px;height:54px}
        .icts-context-logo{width:44px;height:44px}
        .icts-context-title{font-size:1rem}
        .footer .logo-institucional{height:74px}
      }

      .nav-item.active{
        color:#fff;
        background:rgba(122,167,230,.24);
        border-left-color:var(--sidebar-accent);
        box-shadow:inset 0 0 0 1px rgba(169,195,255,.2);
      }
      .nav[data-admin-sidebar="1"] .nav-title > i:not(.nav-lab-chevron){
        display:none;
      }