:root{
        --ds-bg:#090d1f;
        --ds-panel:#0f1633;
        --ds-card:#f5f7ff;
        --ds-border:#dbe2ff;
        --ds-muted:#667197;
        --ds-primary:#4f46e5;
        --ds-primary-weak:rgba(79,70,229,.16);
        --ds-soft:#eef1ff;
        --ds-shadow:0 14px 36px rgba(10,20,60,.18);
      }

      .ds-wrap{max-width:1320px;margin:30px auto;padding:0 16px;}
      .ds-muted{color:var(--ds-muted);}

      .ds-card{
        background:var(--ds-card);
        border:1px solid var(--ds-border);
        border-radius:20px;
        padding:22px;
        box-shadow:var(--ds-shadow);
        margin-bottom:18px;
      }
      .ds-wrap .ds-card.ds-narrow{
        max-width:560px !important;width:100% !important;margin-left:auto !important;margin-right:auto !important;
      }
      .ds-card.ds-narrow h1,
      .ds-card.ds-narrow h2,
      .ds-card.ds-narrow h3,
      .ds-card.ds-narrow label,
      .ds-card.ds-narrow strong{
        color:#1f2937;
      }
      .ds-card.ds-narrow p,
      .ds-card.ds-narrow small{
        color:#374151;
      }
      .ds-card.ds-narrow input::placeholder{
        color:#6b7280;
        opacity:1;
      }

      .ds-btn{
        display:inline-flex;align-items:center;gap:8px;
        padding:10px 16px;border-radius:12px;border:1px solid var(--ds-border);
        text-decoration:none;color:#111827;background:#fff;font-weight:700;
        box-shadow:0 6px 16px rgba(0,0,0,.04);
      }
      .ds-btn:hover{opacity:.95}
      .ds-btn-primary{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff}
      .ds-btn-danger{background:#ef4444;border-color:#ef4444;color:#fff}
      .ds-btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:#111827;padding:8px 10px}
      .ds-toplinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

      .ds-field{
        width:100% !important;max-width:100% !important;box-sizing:border-box !important;
        padding:10px 12px;border:1px solid var(--ds-border);border-radius:12px;outline:none;
      }
      .ds-field:focus{border-color:#c7d2fe;box-shadow:0 0 0 4px var(--ds-primary-weak);}

      .ds-hr{height:1px;background:var(--ds-border);border:0;margin:18px 0}

      .ds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
      @media(max-width:860px){.ds-grid{grid-template-columns:1fr;}}

      /* ===== Home / Landing ===== */
      .ds-home-hero{
        position:relative;
        overflow:hidden;
        background:radial-gradient(1000px 400px at 10% -20%, #c7d2fe 0%, rgba(199,210,254,0) 60%),
                   linear-gradient(135deg, #0b1220 0%, #1f2a44 55%, #2a3560 100%);
        color:#fff;
        border:1px solid rgba(255,255,255,.12);
      }
      .ds-home-hero::after{
        content:'';
        position:absolute;
        right:-70px;top:-70px;
        width:220px;height:220px;border-radius:50%;
        background:rgba(79,70,229,.28);
        filter:blur(6px);
      }
      .ds-home-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;position:relative;z-index:1;}
      @media(max-width:900px){.ds-home-grid{grid-template-columns:1fr;}}
      .ds-home-title{margin:0 0 10px;font-size:44px;line-height:1.05;letter-spacing:-.4px;}
      .ds-home-lead{margin:0 0 18px;color:rgba(255,255,255,.86);font-size:17px;max-width:60ch;}
      .ds-home-points{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none;}
      .ds-home-points li{
        font-size:12px;font-weight:800;letter-spacing:.2px;
        background:rgba(255,255,255,.12);
        border:1px solid rgba(255,255,255,.2);
        padding:7px 10px;border-radius:999px;
      }
      .ds-home-aside{
        background:rgba(255,255,255,.1);
        border:1px solid rgba(255,255,255,.16);
        border-radius:16px;
        padding:16px;
      }
      .ds-home-aside h3{margin:0 0 10px;font-size:18px;color:#fff}
      .ds-home-list{margin:0;padding-left:18px;color:rgba(255,255,255,.88)}
      .ds-home-list li{margin:0 0 7px;}

      .ds-feature .ds-ico{
        width:38px;height:38px;border-radius:10px;
        display:inline-flex;align-items:center;justify-content:center;
        background:#eef2ff;color:#3730a3;font-weight:900;margin-bottom:8px;
      }

      .ds-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
      @media(max-width:860px){.ds-steps{grid-template-columns:1fr;}}
      .ds-step{border:1px dashed var(--ds-border);border-radius:14px;padding:12px;background:#fcfcff;}
      .ds-step b{display:inline-block;margin-bottom:6px;}

      /* ===== App Layout (Panel) ===== */
      .ds-app{
        display:grid;
        grid-template-columns:280px 1fr;
        gap:18px;
        align-items:start;
      }
      @media(max-width:980px){
        .ds-app{grid-template-columns:1fr;}
      }

      .ds-sidebar{
        background:linear-gradient(180deg, #0d1231 0%, #151042 52%, #22145d 100%);
        border:1px solid rgba(182, 164, 255, .18);
        border-radius:24px;
        padding:18px;
        color:#e5e7eb;
        box-shadow:0 20px 38px rgba(4,10,35,.45);
        position:sticky;top:18px;
      }
      @media(max-width:980px){
        .ds-sidebar{position:relative;top:auto;}
      }

      .ds-brand{
        font-weight:900;letter-spacing:.2px;font-size:20px;
        display:flex;align-items:center;justify-content:space-between;
        margin-bottom:18px;
      }
      .ds-user{
        background:rgba(255,255,255,.08);
        border:1px solid rgba(184,198,255,.18);
        border-radius:16px;
        padding:12px;
        margin-bottom:14px;
      }
      .ds-user strong{display:block;color:#fff}
      .ds-user small{display:block;color:rgba(229,231,235,.75);margin-top:2px}

      .ds-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
      .ds-nav a{
        color:#e5e7eb;text-decoration:none;
        padding:11px 14px;border-radius:14px;
        border:1px solid rgba(255,255,255,.05);
        background:rgba(255,255,255,.035);
        font-weight:700;
      }
      .ds-nav a:hover{background:rgba(255,255,255,.09)}
      .ds-nav a.ds-active{
        background:linear-gradient(90deg, rgba(106,84,255,.58), rgba(95,72,244,.42));
        border-color:rgba(179,163,255,.58);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
      }

      .ds-content .ds-head{
        display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
        margin-bottom:14px;
      }
      .ds-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
      .ds-title{margin:0;font-size:34px;line-height:1.08;color:#f7f8ff}
      .ds-sub{margin:8px 0 0;color:#c6cdee}
      .ds-notif{position:relative}
      .ds-notif > summary{list-style:none;cursor:pointer}
      .ds-notif > summary::-webkit-details-marker{display:none}
      .ds-bell{
        display:inline-flex;align-items:center;gap:8px;
        padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.24);
        color:#fff;background:rgba(255,255,255,.08);font-weight:800;
      }
      .ds-bell-count{
        display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;
        border-radius:999px;background:#ef4444;color:#fff;font-size:11px;line-height:1;
      }
      .ds-notif-panel{
        position:absolute;right:0;top:calc(100% + 8px);z-index:40;
        width:min(360px,88vw);max-height:340px;overflow:auto;
        background:#fff;color:#111827;border:1px solid #dbe2ff;border-radius:14px;
        box-shadow:0 14px 36px rgba(10,20,60,.18);padding:10px;
      }
      .ds-notif-item{padding:9px 10px;border-radius:10px;border:1px solid #eef2ff;background:#f8faff;margin-bottom:8px;font-size:13px}
      .ds-notif-item:last-child{margin-bottom:0}

      .ds-content{
        position:relative;
        overflow:hidden;
        border-radius:26px;
        padding:18px;
        background:linear-gradient(180deg, rgba(26,35,82,.86) 0%, rgba(43,29,97,.82) 100%);
        border:1px solid rgba(174,164,247,.24);
        box-shadow:0 26px 58px rgba(9,8,35,.46);
      }
      .ds-cap-float{
        position:absolute;
        left:78%;
        top:22%;
        font-size:34px;
        line-height:1;
        opacity:.18;
        pointer-events:none;
        user-select:none;
        transform:translate3d(0,0,0);
        transition:transform .12s linear;
        filter:drop-shadow(0 6px 14px rgba(0,0,0,.32));
      }

      .ds-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 16px;}
      @media(max-width:980px){.ds-stats{grid-template-columns:repeat(2,minmax(0,1fr));}}
      .ds-stat{
        background:linear-gradient(180deg, #f8f9ff 0%, #eff2ff 100%);
        border:1px solid #d8defa;border-radius:18px;padding:14px;
        box-shadow:0 10px 18px rgba(29,36,96,.15);
      }
      .ds-stat .k{font-size:12px;color:var(--ds-muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
      .ds-stat .v{font-size:24px;font-weight:900;margin-top:6px;color:#1d2352}
      .ds-badge{
        display:inline-flex;align-items:center;gap:6px;
        font-size:12px;font-weight:800;
        padding:6px 10px;border-radius:999px;
        border:1px solid var(--ds-border);
        background:#f9fafb;color:#111827;
      }
      .ds-badge-ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
      .ds-badge-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

      .ds-table{width:100%;border-collapse:collapse;border:1px solid var(--ds-border);border-radius:14px;overflow:hidden}
      .ds-table th,.ds-table td{padding:12px;border-bottom:1px solid var(--ds-border);text-align:left}
      .ds-table th{background:#f9fafb;font-size:12px;letter-spacing:.2px;text-transform:uppercase;color:#6b7280}
      .ds-table tr:last-child td{border-bottom:none}

      .ds-empty{
        padding:14px;border:1px dashed var(--ds-border);border-radius:14px;color:var(--ds-muted);background:#fafafa;
      }

      /* ===== Skin visual para el panel del profesor (referencia dashboard) ===== */
      body .site-main{
        background:
          radial-gradient(58% 36% at 50% 106%, rgba(145, 90, 255, .62) 0%, rgba(58, 36, 130, 0) 68%),
          radial-gradient(72% 58% at 50% 86%, rgba(99, 69, 255, .34) 0%, rgba(29, 22, 70, 0) 72%),
          linear-gradient(180deg,#090d1f 0%, #101735 45%, #17143a 100%);
        background-size:100% 100%, 100% 100%, 220% 220%;
        animation:dsPanelBgShift 24s ease-in-out infinite;
        border-top:none !important;
      }

      .ds-content .dstp-card{
        background:linear-gradient(180deg,#f8f9ff 0%, #eef2ff 100%);
        border:1px solid #dde3fb;
        border-radius:18px;
      }
      .ds-content .dstp-tab.active,
      .ds-content .dstp-btn-primary{
        background:linear-gradient(90deg,#4f46e5 0%, #6366f1 55%, #8b5cf6 100%);
        border-color:transparent;
        color:#fff;
      }
      .ds-content .dstp-btn{
        border-radius:12px;
      }
      .ds-content .dstp-kpi,
      .ds-content .dstp-day,
      .ds-content .dstp-item,
      .ds-content .dstp-picker-day{
        border-color:rgba(121,135,205,.42);
        background:rgba(247,248,255,.92);
      }
      .ds-content .dstp-picker-day{
        color:#1f2a5d;
        font-size:14px;
        font-weight:800;
        text-shadow:0 1px 0 rgba(255,255,255,.55);
      }
      .ds-content .dstp-picker-day:hover{
        background:rgba(238,242,255,.96);
        color:#18224f;
      }
      .ds-content .dstp-picker-day.is-selected{
        background:linear-gradient(90deg,#5c51ea 0%, #7c63f8 100%);
        color:#fff;
        border-color:transparent;
      }

      @keyframes dsPanelBgShift{
        0%{background-position:0% 50%;}
        50%{background-position:100% 50%;}
        100%{background-position:0% 50%;}
      }

      @media(max-width:980px){
        .ds-wrap{margin:20px auto;}
        .ds-title{font-size:28px;}
      }