:root{
        --primary:#14532d; --primary-dark:#0b2414; --primary-light:#1f7a45;
        --accent:#2dd36f; --accent-light:#58f18f;
        --lab-accent:var(--accent); --lab-accent-dark:var(--primary-dark); --lab-accent-soft:rgba(20,83,45,.16);
        --bg-main:#e6f3ec; --bg-card:#ffffff; --bg-sidebar:#0b2414;
        --sidebar-bg:#0b2414; --sidebar-primary:#1f7a45; --sidebar-primary-dark:#0b2414; --sidebar-accent:#2dd36f;
        --text:#1f2a24; --muted:#5c6f63; --text-primary:#1f2a24; --text-secondary:#5c6f63; --border:#83c5a3;
        --bg:var(--bg-main); --surface:var(--bg-card); --bg-surface:var(--surface);
        --shadow:0 4px 8px rgba(11,36,20,.12),0 2px 4px rgba(11,36,20,.08);
        --shadow-lg:0 20px 28px rgba(11,36,20,.18),0 12px 16px rgba(11,36,20,.12);
        --gradient-primary:linear-gradient(135deg,var(--primary-light) 0%,var(--primary-dark) 100%);
        --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
        --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem;
      }
      body[data-density="compact"]{
        --space-1:.2rem; --space-2:.4rem; --space-3:.6rem; --space-4:.85rem;
        --space-5:1rem; --space-6:1.2rem; --space-7:1.5rem; --space-8:1.9rem;
      }
      *{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:var(--sidebar-bg);position:fixed;height:100vh;overflow:hidden;z-index:1000;box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
      .sidebar-header{background:linear-gradient(135deg,var(--sidebar-primary) 0%,var(--sidebar-primary-dark) 100%);padding:var(--space-7) var(--space-6) var(--space-6);text-align:center;border-radius:0 0 1rem 1rem}
      .logo{width:80px;height:80px;border-radius:16px;border:3px solid rgba(255,255,255,.25);object-fit:contain;box-shadow:0 8px 32px rgba(0,0,0,.25);background:#fff;padding:.35rem}
      .brand-title{color:#fff;font-size:1.5rem;font-weight:700;margin:var(--space-3) 0 var(--space-1)}
      .brand-sub{color:rgba(255,255,255,0.85);font-size:.9rem;font-weight:500}
      .banner{height:220px;position:relative;overflow:hidden;background:var(--gradient-primary);border-radius:0 0 1rem 1rem;margin:1rem 0}
      .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;background-size:cover;background-position:center;border-radius:inherit}
      .slide.active{opacity:1}
      .slide-link{display:flex;align-items:center;justify-content:center;height:100%;width:100%;text-decoration:none;color:#fff}
      .overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,83,45,.6),rgba(11,36,20,.78));display:flex;align-items:center;justify-content:center;color:#ffffff;padding:1rem;text-align:center}
      .banner-text{font-size:1.05rem;font-weight:700;letter-spacing:.04em}
      .nav{padding:var(--space-3) 0;overflow-y:auto;flex:1}
      .nav-title{color:rgba(255,255,255,.6);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:0 var(--space-6);margin:var(--space-4) 0 var(--space-2)}
      .nav-item{display:flex;align-items:center;gap:.65rem;padding:var(--space-3) var(--space-6);color:rgba(255,255,255,.9);text-decoration:none;font-weight:600;border-left:3px solid transparent;transition:.2s}
      .nav-item:hover{color:#fff;background:rgba(255,255,255,.12);border-left-color:var(--sidebar-accent);transform:translateX(4px);text-decoration:none}
      .nav-item.active{color:#fff;background:rgba(255,255,255,.15);border-left-color:var(--sidebar-accent)}
      .nav-item i{font-size:1.1rem}
      .nav-title-with-icon{display:flex;align-items:center;gap:.45rem}
      .sidebar-lab-icon{width:16px;height:16px;border-radius:4px;background:#ffffff;padding:1px;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.25)}

      .main{flex:1;margin-left:320px;display:flex;flex-direction:column;min-height:100vh}
      .header{background:var(--bg-card);border-bottom:1px solid rgba(131,197,163,.45);padding:var(--space-4) var(--space-6);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
      .header-inner{
        max-width:1320px;
        margin:0 auto;
        display:grid;
        grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);
        align-items:center;
        gap:var(--space-4);
      }
      .topbar-left{min-height:1px}
      .topbar-center{display:flex;justify-content:center;align-items:center}
      .topbar-ciemat{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        transform:translateX(-16px);
      }
      .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{justify-self:end}
      .page-title{font-size:1.75rem;font-weight:700;color:var(--text);margin:0}
      .page-title-row:empty{display:none!important;margin:0!important}
      .logos{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;row-gap:.35rem;flex-wrap:wrap;margin-left:auto;max-width:100%}
      .logos img{
        height:48px;
        max-width:176px;
        object-fit:contain;
        filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
        border-radius:999px;
        background:#fff;
        padding:.25rem;
      }
      .portal-home-chip{
        width:38px;
        height:38px;
        padding:0;
        justify-content:center;
        border-radius:999px;
      }
      .portal-home-chip i{font-size:1rem}
      .content{flex:1;max-width:1120px;margin:0 auto;width:100%;padding:var(--space-5)}
      .content-surface{
        background:rgba(255,255,255,.88);
        border:1px solid rgba(131,197,163,.45);
        border-radius:1.25rem;
        box-shadow:var(--shadow);
        padding:var(--space-5);
      }
      body[data-density="compact"] .content-surface{padding:var(--space-4)}
      .card{background:var(--bg-card);border:1px solid rgba(131,197,163,.4);border-radius:1.25rem;padding:var(--space-5);box-shadow:var(--shadow);margin-bottom:var(--space-5)}
      .footer{background:var(--sidebar-bg);color:rgba(255,255,255,.8);text-align:center;padding:var(--space-5);margin-top:auto}

      .toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:1100;background:var(--primary);color:#fff;border:none;border-radius:.6rem;padding:.6rem .8rem;line-height:1;font-size:0;box-shadow:var(--shadow);cursor:pointer}
      .toggle::before{content:"\2630";font-size:1.25rem;vertical-align:middle}
      .overlay-bg{display:none;position:fixed;inset:0;background:rgba(11,36,20,.55);z-index:999}

      @media (max-width:1280px){
        .header{padding:var(--space-4) var(--space-5)}
        .header-inner{
          max-width:1200px;
          grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr);
        }
        .topbar-ciemat{transform:none}
        .topbar-ciemat img{height:48px}
        .logos img{height:44px}
        .content{max-width:1060px;padding:var(--space-4)}
      }

      @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}
        .header{padding:.75rem 1rem}
        .header-inner{
          grid-template-columns:1fr auto;
        }
        .topbar-left,
        .topbar-center{
          display:none;
        }
        .logos{gap:.35rem}
        .logos img{height:34px;padding:.15rem}
      }

      @media (max-width:900px){
        .role-badge{font-size:.72rem;padding:.2rem .45rem;margin-right:.3rem}
        .content{padding:.85rem}
        .content-surface{padding:.95rem;border-radius:1rem}
        .card{padding:.9rem;margin-bottom:.9rem;border-radius:1rem}
        .top-actions{flex-wrap:wrap;row-gap:.3rem;margin-left:0}
        .top-actions .chip{padding:.3rem .5rem;font-size:.78rem}
      }

      @media (max-width:640px){
        .header-inner{gap:.45rem}
        .logos img{height:30px;padding:.12rem}
        .portal-home-chip{width:34px;height:34px}
        .content{padding:.55rem}
        .content-surface{padding:.7rem;border-radius:.85rem}
        .card{padding:.75rem;margin-bottom:.75rem}
        .footer .logo-institucional{height:74px}
      }

      .role-badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.8rem; letter-spacing:.02em; box-shadow:var(--shadow); margin-right:.5rem; color:#fff; }
      .role-badge.tech{ background: var(--accent); }
      .role-badge.user{ background: var(--primary-dark); }

      .form-input, textarea.form-input, select.form-input{ width:100%; padding:.9rem 1rem; border:2px solid var(--border); border-radius:.75rem; background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,.06); transition: all .2s ease; }
      .form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,83,45,.15) }
      .form-label{ display:block; margin-bottom:.5rem; font-weight:700; color:var(--text) }
      .form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem }

      /* Buttons & chips */
      .btn, .cta{ display:inline-flex; align-items:center; gap:.5rem; background:var(--primary); color:#fff; text-decoration:none; padding:.6rem 1rem; border-radius:.6rem; border:1px solid var(--primary); font-weight:700; box-shadow:var(--shadow); transition:transform .05s ease, background .2s ease; cursor:pointer }
      .btn:hover, .cta:hover{ background:var(--primary-dark); color:#fff; text-decoration:none }
      .btn:active, .cta:active{ transform:translateY(1px) }
      .btn-secondary{ background:var(--accent); border-color:var(--accent); color:#fff }
      .btn-secondary:hover{ background:var(--accent-light); color:#fff }
      .btn-ghost{ background: #588882; color:var(--text); border:1px solid var(--border) }
      .btn-ghost:hover{ background:#20c997; color:var(--text) }
      .btn-small{ padding:.35rem .6rem; font-size:.85rem; font-weight:700; border-radius:.45rem }
      .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .65rem; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:var(--text); background:#ffffff }
      .cert-chip{ border-color: rgba(11,36,20,.35); background:#f1f5f9; color:#0f172a; }
      .cert-chip:hover{ background:#e2e8f0; color:#0f172a; }
      .footer .logo-institucional{ height:100px; vertical-align:middle; margin-left:.35rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
      .badge, .pill{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; border:1px solid var(--border); background:var(--accent-light); color:var(--text) }
      .muted{ color:var(--muted) }
      .text-muted{ color:var(--muted) }
      .small{ font-size:.85rem }
      .mb-0{ margin-bottom:0 }
      .fw-semibold{ font-weight:600 }
      .text-decoration-none{ text-decoration:none }

      /* Simple grids */
      .grid{ display:grid; gap:1rem }
      .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
      .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
      @media (max-width:720px){ .grid-2,.grid-3{ grid-template-columns:1fr } }

      .table-responsive{ width:100%; overflow-x:auto; }
      .table{ width:100%; border-collapse:collapse; }
      .table th, .table td{ padding:.75rem 1rem; text-align:left; border-bottom:1px solid rgba(131,197,163,.35); }
      .table thead{ background:rgba(20,83,45,.08); }
      .table tbody tr:nth-child(even){ background:rgba(255,255,255,.6); }

      .dtf-user-frame{
        background:#edf7f0;
        border:1px solid rgba(131,197,163,.38);
        border-radius:1.1rem;
        padding:var(--space-2);
        margin-bottom:var(--space-4);
        box-shadow:0 10px 20px rgba(11,36,20,.12);
      }
      .dtf-user-header{
        background:linear-gradient(120deg,#1e4a32 0%,#1a3f2a 50%,#0f2e1d 100%);
        color:#ffffff;
        border:1px solid rgba(131,197,163,.35);
        border-radius:1rem;
        padding:.8rem 1rem;
        margin-bottom:0;
        box-shadow:0 12px 22px rgba(11,36,20,.2);
      }
      .dtf-user-header-inner{
        display:flex;
        align-items:center;
        gap:1rem;
        flex-wrap:wrap;
      }
      .dtf-user-logo-wrap{
        width:64px;
        height:64px;
        border-radius:999px;
        background:#ffffff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 8px 16px rgba(0,0,0,.22);
      }
      .dtf-user-logo{
        width:54px;
        height:54px;
        object-fit:contain;
      }
      .dtf-user-overline{
        margin:0;
        font-size:.78rem;
        letter-spacing:.1em;
        text-transform:uppercase;
        font-weight:800;
        color:rgba(255,255,255,.86);
      }
      .dtf-user-title{
        margin:.1rem 0 0;
        font-size:1.05rem;
        letter-spacing:.04em;
        text-transform:uppercase;
        font-weight:900;
      }
      .dtf-user-subtitle{
        margin:.2rem 0 0;
        font-size:.82rem;
        color:rgba(255,255,255,.84);
        font-weight:600;
      }
      .dtf-lab-context{
        margin:0 0 var(--space-3);
        border:1px solid rgba(131,197,163,.38);
        border-radius:.75rem;
        background:#ffffff;
        padding:.35rem .55rem;
        display:flex;
        align-items:center;
        gap:.45rem;
        box-shadow:0 2px 8px rgba(11,36,20,.07);
        max-width:560px;
      }
      .dtf-lab-context-logo{
        width:24px;
        height:24px;
        border-radius:999px;
        background:var(--primary-dark);
        border:1px solid rgba(255,255,255,.2);
        padding:.2rem;
        object-fit:contain;
      }
      .dtf-lab-context-logo-white{
        filter:brightness(0) invert(1);
      }
      .dtf-lab-context-text{
        display:flex;
        flex-direction:column;
        gap:0;
        min-width:0;
      }
      .dtf-lab-context-label{
        margin:0;
        font-size:.56rem;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--muted);
        font-weight:700;
      }
      .dtf-lab-context-name{
        margin:0;
        font-size:.78rem;
        font-weight:700;
        color:var(--primary-dark);
      }
      @media (max-width:760px){
        .dtf-lab-context{flex-wrap:wrap}
      }

.top-actions{display:inline-flex;gap:.5rem;align-items:center;margin-left:.5rem}
.top-actions .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--text);background:var(--bg-card)}
.top-actions .chip:hover{background:var(--bg-main)}

.dtf-floating-back{
  position:fixed;
  right:1rem;
  top:50%;
  bottom:auto;
  z-index:1085;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:var(--primary-dark);
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 12px 24px rgba(11,36,20,.3);
  transition:background .2s ease, transform .12s ease, box-shadow .2s ease;
  transform:translateY(-50%);
}
.dtf-floating-back:hover{
  background:var(--primary);
  color:#ffffff;
  text-decoration:none;
  transform:translateY(calc(-50% - 1px));
  box-shadow:0 14px 26px rgba(11,36,20,.34);
}
.dtf-floating-back:active{
  transform:translateY(-50%);
}
@media (max-width:640px){
  .dtf-floating-back{
    right:.7rem;
    top:50%;
    padding:.5rem .65rem;
  }
  .dtf-floating-back i{
    font-size:1.05rem;
  }
}