/* SIGA 136 · Tema juvenil (prueba). Colores: azul, amarillo, verde y rojo. Solo aplica con <html data-theme="joven">. */
@font-face{font-family:"Bricolage";src:url(/static/fonts/BricolageGrotesque-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/static/fonts/BricolageGrotesque-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Outfit";src:url(/static/fonts/Outfit-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(/static/fonts/Outfit-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

html[data-theme=joven]{
  --uva:#00143a;--uva-osc:#000a1f;--uva-claro:#e4e9f2;
  --mango:#fec015;--menta:#019301;--chicle:#c30117;--cielo:#1f6fc2;
  --ink:#0f1b2f;--muted:#5d6b80;--line:#dbe4ef;--paper:#f3f6fa;
  --wine:var(--uva);--gold:var(--mango);
  --hombro:0 4px 0 #dbe4ef;
  font-family:"Outfit",Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--paper)
}
html[data-theme=joven] body{background:var(--paper)}
html[data-theme=joven] h1,html[data-theme=joven] h2,html[data-theme=joven] h3,
html[data-theme=joven] .brand strong,html[data-theme=joven] .metrics strong,html[data-theme=joven] .hero-count>strong,
html[data-theme=joven] .welcome h1{font-family:"Bricolage","Outfit",sans-serif}
html[data-theme=joven] h1{font-size:34px;letter-spacing:-.8px;font-weight:700}
html[data-theme=joven] h2{font-weight:700;letter-spacing:-.3px}

/* Encabezado: banda uva con la marca */
html[data-theme=joven] .top{background:var(--uva);border:0;color:white;position:relative}
html[data-theme=joven] .top:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--mango) 0 25%,var(--menta) 25% 50%,var(--cielo) 50% 75%,var(--chicle) 75%)}
html[data-theme=joven] .brand{color:white}
html[data-theme=joven] .brand img{background:white;border-radius:14px;padding:6px 10px;width:150px}
html[data-theme=joven] .brand-line{border-color:#ffffff55}
html[data-theme=joven] .brand strong{font-size:32px;letter-spacing:0}
html[data-theme=joven] .brand strong b{font-weight:700;color:var(--ink);background:var(--mango);border-radius:10px;padding:0 8px;margin-left:2px;display:inline-block;transform:rotate(-4deg)}
html[data-theme=joven] .brand small,html[data-theme=joven] .credit{color:#d4e3f3}
html[data-theme=joven] .identity strong{color:white}
html[data-theme=joven] .identity small{color:#c6d8ec}
html[data-theme=joven] .identity .link,html[data-theme=joven] .top .theme-switch{color:white}

/* Menú en píldoras */
html[data-theme=joven] .menu-ribbon{background:white;border-bottom:2px solid var(--line);box-shadow:none}
html[data-theme=joven] #main-navigation{gap:6px;padding:10px 0;scrollbar-color:var(--line) transparent}
html[data-theme=joven] #main-navigation a{min-height:40px;padding:8px 16px;border:0;border-radius:999px;color:var(--ink);font-size:14px}
html[data-theme=joven] #main-navigation a:hover{background:var(--uva-claro);color:var(--uva)}
html[data-theme=joven] #main-navigation a.active{background:var(--uva);color:white;box-shadow:0 3px 0 var(--uva-osc)}
html[data-theme=joven] .ribbon-scroll{border-radius:999px;color:var(--uva)}

html[data-theme=joven] .ribbon-inner.sub{border-top:2px solid var(--line)}
html[data-theme=joven] .sub-nav a{border-radius:999px;font-weight:600}
html[data-theme=joven] .sub-nav a:hover{background:var(--uva-claro);color:var(--uva)}
html[data-theme=joven] .sub-nav a.active{background:var(--mango);color:var(--ink);box-shadow:0 3px 0 #c99400}

/* Títulos de página */
html[data-theme=joven] .eyebrow{display:inline-block;letter-spacing:.2px;font-size:12px;color:var(--uva);background:var(--uva-claro);padding:4px 12px;border-radius:999px;text-transform:none}
html[data-theme=joven] .page-title p{color:var(--muted);font-size:16px}

/* Botones redondos con "hombro" */
html[data-theme=joven] button,html[data-theme=joven] .button{border-radius:999px;border:2px solid var(--line);font-weight:700;transition:transform .08s,box-shadow .08s}
html[data-theme=joven] button:hover,html[data-theme=joven] .button:hover{filter:none;transform:translateY(-1px)}
html[data-theme=joven] button:active,html[data-theme=joven] .button:active{transform:translateY(2px);box-shadow:none}
html[data-theme=joven] .primary{background:var(--uva);border-color:var(--uva);color:white;box-shadow:0 4px 0 var(--uva-osc)}
html[data-theme=joven] .secondary{background:white;color:var(--uva);border-color:var(--line)}
html[data-theme=joven] .secondary:hover{border-color:var(--uva)}
html[data-theme=joven] .danger{background:#fde6e8;color:#b00115;border-color:#f6c6cc}
html[data-theme=joven] .link{border:0;box-shadow:none}
html[data-theme=joven] .link:hover{transform:none;text-decoration:underline}

/* Tarjetas y paneles */
html[data-theme=joven] .panel,html[data-theme=joven] .request-card,html[data-theme=joven] .subject-card,html[data-theme=joven] .task,
html[data-theme=joven] .tile,html[data-theme=joven] .hero-count,html[data-theme=joven] .login-card,html[data-theme=joven] .adm-sec{border:2px solid var(--line);border-radius:22px;box-shadow:var(--hombro)}
html[data-theme=joven] .panel.inner,html[data-theme=joven] details.edit[open]{background:#f8fafd;border-radius:18px;box-shadow:none}
html[data-theme=joven] summary{cursor:pointer;font-weight:700}
html[data-theme=joven] .tile:hover{border-color:var(--uva);box-shadow:0 4px 0 var(--uva)}
html[data-theme=joven] main a:not(.button){color:var(--cielo)}

/* Indicadores: cada uno con su color */
html[data-theme=joven] .metrics>div{border:2px solid var(--line);border-radius:22px;box-shadow:var(--hombro);position:relative;overflow:hidden}
html[data-theme=joven] .metrics>div:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--c,var(--uva))}
html[data-theme=joven] .metrics>div:nth-child(4n+1){--c:var(--uva)}
html[data-theme=joven] .metrics>div:nth-child(4n+2){--c:var(--menta)}
html[data-theme=joven] .metrics>div:nth-child(4n+3){--c:var(--mango)}
html[data-theme=joven] .metrics>div:nth-child(4n+4){--c:var(--chicle)}
html[data-theme=joven] .metrics strong{color:var(--ink);font-size:40px}
html[data-theme=joven] .hero-count>strong{color:var(--uva)}

/* Tablas */
html[data-theme=joven] .cap-group{border:2px solid var(--line);border-radius:22px;box-shadow:var(--hombro)}
html[data-theme=joven] .cap-group.ready{border-color:var(--menta);background:#eef9ee;box-shadow:0 4px 0 var(--menta)}
html[data-theme=joven] .cap-prog::-webkit-progress-value{background:var(--mango)}html[data-theme=joven] .cap-prog::-moz-progress-bar{background:var(--mango)}
html[data-theme=joven] .cap-prog.full::-webkit-progress-value{background:var(--menta)}html[data-theme=joven] .cap-prog.full::-moz-progress-bar{background:var(--menta)}
html[data-theme=joven] .partials-table th:last-child{background:#fff3cc;color:var(--ink)}
html[data-theme=joven] .partials-table td:last-child{background:#fffaeb;border-left-color:var(--mango)}
@media(max-width:700px){html[data-theme=joven] .student .partials-table td:last-child{border-left:0;border-top-color:var(--mango)}}
html[data-theme=joven] .table-wrap{border:2px solid var(--line);border-radius:20px;box-shadow:var(--hombro)}
html[data-theme=joven] th{background:var(--uva-claro);color:var(--uva-osc);text-transform:none;letter-spacing:0;font-size:13px}
html[data-theme=joven] td{border-top:1px solid var(--line)}
html[data-theme=joven] tbody tr:nth-child(even) td{background:#f9fbfe}
html[data-theme=joven] tr:hover td{background:#edf3fa}

/* Formularios */
html[data-theme=joven] input,html[data-theme=joven] select,html[data-theme=joven] textarea{border:2px solid var(--line);border-radius:14px}
html[data-theme=joven] input:focus,html[data-theme=joven] select:focus,html[data-theme=joven] textarea:focus{outline:3px solid #00143a33;border-color:var(--uva)}
html[data-theme=joven] input[type=checkbox],html[data-theme=joven] .check input{accent-color:var(--uva)}

/* Etiquetas y avisos */
html[data-theme=joven] .tag{border-radius:999px;padding:5px 11px;font-weight:700;background:#e8edf4;color:#3c4a5e}
html[data-theme=joven] .tag.authorized,html[data-theme=joven] .notice.success{background:#e1f4e1;color:#016b01}
html[data-theme=joven] .tag.pending,html[data-theme=joven] .notice.warning{background:#fff3cc;color:#7a5600}
html[data-theme=joven] .tag.rejected,html[data-theme=joven] .notice.error{background:#fde6e8;color:#b00115}
html[data-theme=joven] .tag.closed{background:#e9edf2;color:#5d6b80}
html[data-theme=joven] .notice{border-radius:16px;background:#e4e9f2;color:#00143a}
html[data-theme=joven] .low,html[data-theme=joven] .req{color:#b00115}
html[data-theme=joven] .positive,html[data-theme=joven] .suggest{color:#016b01}

/* Asistente de solicitud */
html[data-theme=joven] .wizard-steps li{border-bottom-width:5px;border-radius:0}
html[data-theme=joven] .wizard-steps li.current{color:var(--uva);border-color:var(--uva)}
html[data-theme=joven] .wizard-steps li.current span{background:var(--uva)}
html[data-theme=joven] .wizard-steps li.done{color:#016b01;border-color:var(--menta)}
html[data-theme=joven] .wizard-steps li.done span{background:#e1f4e1;color:#016b01}
html[data-theme=joven] .choice{border-radius:18px}
html[data-theme=joven] .choice.on{border-color:var(--uva);background:var(--uva-claro);box-shadow:0 4px 0 var(--uva)}
html[data-theme=joven] .owed-item{border-radius:18px;border-left-color:var(--chicle)}
html[data-theme=joven] .student-identity{background:var(--uva-claro);border-left:0;border-radius:22px;box-shadow:inset 8px 0 0 var(--mango)}

/* Vista del alumno en celular: renglones como tarjetas */
html[data-theme=joven] .student tr{border:2px solid var(--line);border-radius:18px;box-shadow:var(--hombro)}

/* Inicio de sesión */
html[data-theme=joven] body:has(.login-shell){background:radial-gradient(circle at 88% 8%,#fec01533 0 190px,transparent 191px),radial-gradient(circle at 4% 96%,#01930120 0 240px,transparent 241px),var(--paper);background-attachment:fixed;min-height:100vh}
html[data-theme=joven] .login-shell>header .brand{color:var(--uva)}
html[data-theme=joven] .login-shell>header .brand small,html[data-theme=joven] .login-shell>header .credit{color:var(--muted)}
html[data-theme=joven] .login-shell>header .brand img{background:none;padding:0}
html[data-theme=joven] .login-shell>header .brand-line{border-color:var(--line)}
html[data-theme=joven] .welcome h1{font-size:52px;letter-spacing:-1.5px;line-height:1.02}
html[data-theme=joven] .welcome em{color:var(--uva);background:linear-gradient(transparent 62%,#fec01599 62%)}
html[data-theme=joven] .welcome-foot strong{color:var(--chicle)}
html[data-theme=joven] .login-card{box-shadow:0 6px 0 var(--line)}

/* Ventanas y mensajes */
html[data-theme=joven] dialog{border-radius:26px;border:2px solid var(--line)}
html[data-theme=joven] dialog::backdrop,html[data-theme=joven] #busy{background:#12243ba8}
html[data-theme=joven] #toast{background:var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--uva)}
html[data-theme=joven] #toast.error{background:#c30117;box-shadow:0 5px 0 #7d000f}
html[data-theme=joven] .spinner{border-color:var(--uva-claro);border-top-color:var(--uva)}
html[data-theme=joven] code{background:var(--uva-claro);border-radius:6px}
html[data-theme=joven] footer{color:var(--muted)}

/* Interruptor de tema (ambos temas) */
html[data-theme=joven] .theme-switch{border:0;box-shadow:none;padding:4px 0;min-height:30px;border-radius:0}
html[data-theme=joven] .theme-switch:hover{transform:none}
.theme-switch{display:block;margin-left:auto;background:none;border:0;padding:4px 0;min-height:30px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.theme-switch:hover{text-decoration:underline;filter:none}
.login-shell>header{display:flex;justify-content:space-between;align-items:center;gap:12px}

@media(max-width:700px){
  html[data-theme=joven] .welcome h1{font-size:38px}
  html[data-theme=joven] .brand strong{font-size:26px}
  html[data-theme=joven] #main-navigation a{padding:8px 13px}
}
@media(prefers-reduced-motion:reduce){html[data-theme=joven] button,html[data-theme=joven] .button{transition:none}}

html[data-theme=joven] .name-link{border:0;box-shadow:none;border-radius:0;font-weight:inherit;padding:0;min-height:0}
html[data-theme=joven] .name-link:hover{color:var(--cielo);transform:none}
html[data-theme=joven] .exp-sec{border:2px solid var(--line);border-radius:18px}
html[data-theme=joven] .privacy-page>header .brand{color:var(--uva)}html[data-theme=joven] .privacy-page>header .brand small,html[data-theme=joven] .privacy-page>header .credit{color:var(--muted)}