body{margin:0}
/* Sistema de diseño UBA Económicas · Diplomatura PM. Identidad clara e institucional: se mantiene un solo tema claro, con fondos explícitos. */
:root{
  --fce-naranja:#FF770C; --fce-tinta:#121617; --fce-blanco:#FFFFFF;
  --naranja-50:#FFF4EB; --naranja-100:#FFE4CC; --naranja-600:#E06000; --naranja-700:#B34C00;
  --gris-25:#FAFAF9; --gris-50:#F4F4F2; --gris-100:#E9E9E6; --gris-200:#D6D7D4; --gris-500:#767A7B; --gris-600:#575C5E; --gris-700:#3A3F41; --gris-800:#22272A;
  --verde-500:#1F8A4C; --verde-50:#E8F5EC; --amarillo-500:#8A6A00; --amarillo-50:#FDF6DC; --rojo-500:#C8321E; --rojo-50:#FBEAE7; --azul-500:#1F5FA8; --azul-50:#E7EFF8;
  --text-strong:var(--fce-tinta); --text-body:var(--gris-800); --text-muted:var(--gris-600); --text-accent:var(--naranja-700);
  --accent:var(--fce-naranja); --accent-hover:var(--naranja-600); --accent-tint:var(--naranja-50);
  --surface-page:var(--gris-25); --surface-card:var(--fce-blanco); --surface-sunken:var(--gris-50); --surface-dark:var(--fce-tinta);
  --border-subtle:var(--gris-100); --border-default:var(--gris-200); --border-strong:var(--fce-tinta);
  --font-sans:'Archivo','Helvetica Neue',Arial,sans-serif; --font-serif:'Source Serif 4',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:15px;line-height:1.4}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--fce-blanco)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font-sans);color:var(--text-strong);text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
a{color:var(--text-accent)} a:hover{color:var(--fce-tinta)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.eyebrow{font-stretch:72%;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent)}
.cap{font-stretch:72%;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.bar{display:block;width:48px;height:6px;background:var(--accent)}
.read{font-family:var(--font-serif);font-size:17px;line-height:1.6;color:var(--text-body);max-width:720px;display:grid;gap:.8rem}
.muted{color:var(--text-muted)}

/* Encabezado institucional */
.site{background:var(--fce-blanco);border-bottom:1px solid var(--border-default)}
.site .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.site img{height:26px;width:auto}
.site .div{width:1px;height:28px;background:var(--border-default)}
.site .dip{font-stretch:72%;font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong)}
@media (max-width:520px){.site .div,.site .dip{display:none}}

/* Hero tinta */
.hero{background:var(--surface-dark);color:var(--fce-blanco)}
.hero .wrap{padding-block:40px 36px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.hero .eyebrow{color:var(--accent)}
.hero h1{color:var(--fce-blanco);font-weight:800;font-size:clamp(36px,6vw,56px);letter-spacing:-.02em;line-height:1.05}
.hero p.lead{font-family:var(--font-serif);font-size:18px;line-height:1.55;color:var(--gris-200);max-width:640px}
.hero-txt{display:grid;gap:12px}
.status{border:2px solid var(--accent);padding:12px 16px;display:grid;gap:6px;min-width:230px}
.status div{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.status .cap{color:var(--gris-200)}
.status b{font-family:var(--font-mono);font-size:13px;color:var(--fce-blanco);font-weight:600}
@media (max-width:720px){.hero .wrap{grid-template-columns:1fr}.status{min-width:0}}

/* Pestañas */
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--fce-blanco);border-bottom:1px solid var(--border-default)}
.tabs .wrap{display:flex;gap:26px;overflow-x:auto}
.tab{flex:0 0 auto;background:none;border:0;border-bottom:3px solid transparent;padding:14px 0 11px;font:600 14px var(--font-sans);font-stretch:72%;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;display:flex;gap:8px;align-items:center}
.tab:hover{color:var(--text-strong)}
.tab[aria-selected="true"]{color:var(--text-strong);border-bottom-color:var(--accent)}
.tab .pct{font-family:var(--font-mono);font-size:11px;letter-spacing:0;text-transform:none;color:var(--text-muted)}
.tab .lock{font-size:11px;letter-spacing:.04em;color:var(--gris-500)}

main .wrap{padding-block:36px 64px;display:grid;gap:36px}
section.panel{display:grid;gap:28px}

.head{display:grid;gap:10px}
.head h2{font-size:clamp(26px,4vw,32px);font-weight:700}
.head p{font-family:var(--font-serif);font-size:17px;line-height:1.6;color:var(--text-muted);max-width:720px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.card{background:var(--surface-card);border:1px solid var(--border-default);padding:22px 24px;display:grid;gap:10px;align-content:start;min-width:0}
.card.accent{border-top:6px solid var(--accent)}
.dots{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dots li{position:relative;padding-left:20px}
.dots li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
ol.num{margin:0;padding-left:22px;display:grid;gap:6px}

/* Callouts: fondo tintado + etiqueta cuadrada */
.callout{padding:20px 24px 22px;display:grid;gap:10px;background:var(--surface-sunken)}
.callout .tag{justify-self:start;height:26px;display:inline-flex;align-items:center;padding:0 10px;font-stretch:72%;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--fce-tinta);color:var(--fce-blanco)}
.callout.actividad{background:var(--accent-tint)} .callout.actividad .tag{background:var(--accent);color:var(--fce-tinta)}
.callout.atencion{background:var(--rojo-50)} .callout.atencion .tag{background:var(--rojo-500)}
.callout.ejemplo{background:var(--azul-50)} .callout.ejemplo .tag{background:var(--azul-500)}
.callout.clave{background:var(--fce-tinta);color:var(--fce-blanco)} .callout.clave .tag{background:var(--accent);color:var(--fce-tinta)} .callout.clave h3{color:var(--fce-blanco)}
.callout .body{font-family:var(--font-serif);font-size:16px;line-height:1.55}

/* Tablas */
.tablewrap{overflow-x:auto;border:1px solid var(--border-default);background:var(--surface-card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 12px;border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
th{font-stretch:72%;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-sunken);border-bottom:1px solid var(--border-default)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--font-mono);font-size:13px;white-space:nowrap}
td.fixed{font-weight:700;color:var(--text-strong);white-space:nowrap}

/* Personas */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.person{background:var(--surface-card);border:1px solid var(--border-default);padding:18px 20px;display:grid;gap:6px;align-content:start}
.person h3{font-size:17px;font-weight:700}
.person .area{font-size:13px;color:var(--text-muted)}
.person dl{margin:4px 0 0;display:grid;gap:4px;font-size:14px}
.person dt{display:inline;font-weight:700;color:var(--text-strong)} .person dd{display:inline;margin:0}
.badge{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-sunken);color:var(--text-body)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gris-500)}
.badge.off::before{background:var(--accent)}
.badge.risk{background:var(--rojo-50);color:var(--rojo-500)} .badge.risk::before{background:var(--rojo-500)}

/* Templates */
.tpl{background:var(--surface-card);border:1px solid var(--border-default);border-top:6px solid var(--accent)}
.tpl-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border-default)}
.tpl-num{font-weight:800;font-size:34px;line-height:1;color:var(--accent);letter-spacing:-.02em}
.tpl-head h3{font-size:20px;font-weight:700}
.tpl-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-align:right;white-space:nowrap}
.tpl-body{padding:20px 24px;display:grid;gap:16px}
.tpl-body .intro{font-family:var(--font-serif);font-size:16px;line-height:1.55;max-width:720px}
.tpl-foot{padding:16px 24px;border-top:1px solid var(--border-subtle);background:var(--surface-sunken);display:grid;gap:8px}
.tpl-foot .dots{font-size:14px;color:var(--text-body)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;border:1px solid var(--border-default);font-size:12px;color:var(--text-muted);background:var(--surface-card)}
@media (max-width:560px){.tpl-head{grid-template-columns:auto 1fr}.tpl-meta{grid-column:1/-1;text-align:left}}

.f{display:grid;gap:6px}
.f label,.f .lbl{font-weight:700;font-size:14px;color:var(--text-strong)}
.f .help{font-size:13px;color:var(--text-muted)}
input[type=text],input[type=number],textarea,select{width:100%;font:15px/1.4 var(--font-sans);color:var(--text-strong);background:var(--fce-blanco);border:1px solid var(--gris-200);border-radius:2px;padding:8px 10px;transition:border-color 120ms var(--ease)}
input:hover,textarea:hover,select:hover{border-color:var(--gris-500)}
input:focus,textarea:focus,select:focus{border-color:var(--fce-tinta);outline:2px solid var(--accent);outline-offset:1px}
input:disabled,textarea:disabled,select:disabled{background:var(--surface-sunken);color:var(--gris-500)}
textarea{resize:vertical;min-height:3.4rem}
table input,table select,table textarea{min-width:8rem}
table td.narrow input,table td.narrow select{min-width:5rem}
.calc{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px}
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.ok{background:var(--verde-50);color:var(--verde-500)} .st.warn{background:var(--amarillo-50);color:var(--amarillo-500)} .st.bad{background:var(--rojo-50);color:var(--rojo-500)}
.matrix .pair{display:flex;gap:4px}
.matrix .pair input{min-width:3.2rem;width:3.4rem;text-align:center;font-family:var(--font-mono)}
.gap{display:block;font-family:var(--font-mono);font-size:11px;margin-top:4px;color:var(--text-muted)}
.gap.bad{color:var(--rojo-500)} .gap.ok{color:var(--verde-500)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;font:700 15px var(--font-sans);letter-spacing:.01em;border-radius:0;border:2px solid var(--accent);background:var(--accent);color:var(--fce-tinta);cursor:pointer;transition:background 120ms var(--ease)}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--fce-tinta);border-color:var(--fce-tinta);color:var(--fce-blanco)} .btn.dark:hover{background:var(--gris-700);border-color:var(--gris-700)}
.btn.sec{background:transparent;border-color:var(--fce-tinta);color:var(--fce-tinta)} .btn.sec:hover{background:var(--gris-50)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.msg{font-size:14px;min-height:1.2em}
.msg.bad{color:var(--rojo-500)} .msg.ok{color:var(--verde-500)}

/* Candado y novedad */
.lockbox{background:var(--surface-card);border:2px dashed var(--border-default);padding:24px;display:grid;gap:12px;justify-items:start}
.lockbox form{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:440px}
.lockbox input{flex:1 1 180px;text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.12em}
.news{background:var(--fce-tinta);color:var(--fce-blanco)}
.news-head{display:flex;gap:12px;align-items:center;padding:14px 24px;border-bottom:1px solid var(--gris-700)}
.news-head .tag{height:26px;display:inline-flex;align-items:center;padding:0 10px;font-stretch:72%;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--fce-tinta)}
.news-head span.when{font-size:14px;color:var(--gris-200)}
.news-body{padding:18px 24px 22px;display:grid;gap:10px;font-family:var(--font-serif);font-size:17px;line-height:1.55}
.pending{display:grid;gap:10px;padding:20px 24px;background:var(--surface-sunken);border:1px solid var(--border-default)}
.meter{height:8px;background:var(--gris-100);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);transition:width 200ms var(--ease)}

/* Entrega */
.prog{display:grid;gap:10px}
.prog-row{display:grid;grid-template-columns:3rem minmax(0,1fr) 3.4rem;gap:12px;align-items:center;font-size:14px}
.prog-row .n{font-weight:800;color:var(--accent)}
.prog-row .v{font-family:var(--font-mono);font-size:12px;text-align:right}
details.teacher summary{cursor:pointer;list-style:none}details.teacher summary::-webkit-details-marker{display:none}
.saved{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
input[type=file]{font:14px var(--font-sans)}

/* Pie */
footer.site-foot{background:var(--fce-tinta);color:var(--gris-200)}
footer.site-foot .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;font-size:13px}
footer.site-foot img{height:20px;width:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Versión web */
.savebar{position:sticky;bottom:0;z-index:15;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;background:var(--fce-blanco);border:1px solid var(--border-default);border-top:3px solid var(--fce-tinta);padding:14px 24px;box-shadow:0 -6px 18px rgba(18,22,23,.08)}
.savebar-txt{display:grid;gap:2px}
.saved.ok{color:var(--verde-500)} .saved.err{color:var(--rojo-500)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:600 12px var(--font-sans);font-stretch:72%;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.linkbtn:hover{color:var(--fce-blanco)}
.login .grid2{gap:16px}
.login input{max-width:100%}