/* SIyT · cabecera como la de Posgrado FCNyM; tipografía y colores neutros estilo Gmail+ (Arial, tamaño normal, sin negritas gruesas).
   Los colores de la cabecera están en las variables de :root. */
:root{
  --bg:#f1f3f4;--card:#fff;--ink:#202124;--mut:#5f6368;--line:#dadce0;--hover:#f1f3f4;
  --brand:#2f5aae;--pri:#2f5aae;--pri-ink:#fff;--err:#b3261e;--link:#2f5aae;
  --hdr-bg:#fff;--hdr-ink:#202124;--hdr-line:#dadce0;--util-bg:#eceff1;--util-ink:#3c4043;
  --admin-bg:#1f1f1f;--admin-ink:#f1f3f4;--admin-hover:rgba(255,255,255,.12);
  --shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-pop:0 4px 12px rgba(60,64,67,.3);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#202124;--card:#2d2e31;--ink:#e8eaed;--mut:#9aa0a6;--line:#444746;--hover:#3c4043;
  --brand:#8ab4f8;--pri:#8ab4f8;--pri-ink:#202124;--err:#f2b8b5;--link:#8ab4f8;
  --hdr-bg:#2d2e31;--hdr-ink:#e8eaed;--hdr-line:#444746;--util-bg:#252628;--util-ink:#bdc1c6;
  --admin-bg:#111;--shadow:0 1px 2px rgba(0,0,0,.6),0 1px 3px 1px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.5 Arial,Helvetica,sans-serif;font-weight:400;background:var(--bg);color:var(--ink)}
a{color:var(--link)}
h1{font-size:22px;font-weight:400;margin:0}h2{font-weight:400}
.wrap{max-width:1300px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:16px;padding-bottom:24px}

/* ---- Cabecera ---- */
header.site{position:relative;z-index:30}
header.site a{text-decoration:none}
.utilbar{background:var(--util-bg);color:var(--util-ink);font-size:13px;border-bottom:1px solid var(--hdr-line)}
.utilbar .wrap{display:flex;justify-content:flex-end}
.mainbar{background:var(--hdr-bg);color:var(--hdr-ink);border-bottom:1px solid var(--hdr-line)}
.mainbar .wrap{display:flex;align-items:center;gap:16px;padding-top:8px;padding-bottom:8px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--hdr-ink)}
.brand .logo{height:52px;width:auto;display:block}
.brand .sep{width:1px;align-self:stretch;background:var(--hdr-line);margin:4px 2px}
.brand-text{font-size:26px;line-height:1.1;color:var(--brand)}
.brand-sub{font-size:13px;color:var(--mut);align-self:flex-end;padding-bottom:3px}
.adminbar{background:var(--admin-bg);color:var(--admin-ink);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.adminbar nav{display:flex;gap:2px;flex-wrap:wrap;align-items:stretch}
.adminbar nav>a,.adminbar summary{color:var(--admin-ink);padding:10px 14px;border-bottom:3px solid transparent}
.adminbar nav>a:hover,.adminbar summary:hover,.adminbar .dd[open]>summary{background:var(--admin-hover)}
.adminbar nav>a.on,.adminbar summary.on{border-bottom-color:var(--brand);background:var(--admin-hover)}

/* desplegables */
.dd{position:relative}
.dd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.dd>summary::-webkit-details-marker{display:none}
.utilbar .dd>summary{padding:5px 10px}.utilbar .dd>summary:hover,.utilbar .dd[open]>summary{background:rgba(0,0,0,.07)}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;display:inline-block}
.role{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:0 8px}
.dd-menu{position:absolute;z-index:40;top:100%;left:0;min-width:240px;display:grid;background:var(--card);border-radius:4px;padding:6px 0;box-shadow:var(--shadow-pop)}
.dd-menu.right{left:auto;right:0}
.dd-menu a,.dd-menu button{display:block;width:100%;text-align:left;padding:8px 16px;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.dd-menu a:hover,.dd-menu button:hover{background:var(--hover)}.dd-menu a.on{color:var(--brand);background:var(--hover)}
.dd-menu form{margin:0}

/* ---- Botones y campos ---- */
.btn,button.btn{background:var(--pri);color:var(--pri-ink);border:0;border-radius:4px;padding:8px 16px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:var(--card);color:var(--ink);box-shadow:none;border:1px solid var(--line)}.btn.alt:hover{background:var(--hover);filter:none}
.btn.danger{background:var(--err);color:#fff}
.btn.off{opacity:.35;pointer-events:none}
button.link{background:none;border:0;color:var(--link);cursor:pointer;font:inherit;padding:0}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font:inherit;background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
label{display:block;font-size:12px;color:var(--mut)}label input,label select,label textarea{margin-top:3px;font-size:14px}

/* ---- Tarjetas, tablas, listados ---- */
.box{background:var(--card);border-radius:8px;padding:18px;box-shadow:var(--shadow)}
.narrow{max-width:420px;margin:40px auto;display:grid;gap:12px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}.bar h1{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:14px 0}.wide{grid-column:1/-1}
.chk{display:flex;gap:8px;align-items:center}.chk input{width:auto}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:8px;display:block;overflow-x:auto;box-shadow:var(--shadow)}
th,td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;font-weight:400;color:var(--mut);text-transform:uppercase;letter-spacing:.3px}
tr:hover td{background:var(--hover)}.act{white-space:nowrap}
.search{display:flex;gap:6px}.search input{width:240px}.muted{color:var(--mut)}
.flash{padding:10px 14px;border-radius:4px;margin-bottom:12px}.flash.ok{background:#e6f4ea;color:#137333}.flash.err{background:#fce8e6;color:#a50e0e}.flash ul{margin:0;padding-left:18px}
@media (prefers-color-scheme:dark){.flash.ok{background:#1e3a2a;color:#81c995}.flash.err{background:#42221f;color:#f28b82}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px}
.card{display:grid;gap:4px;padding:16px;background:var(--card);border-radius:8px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}.card:hover{box-shadow:var(--shadow-pop)}.card span{color:var(--mut)}
.detail{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:6px 16px;background:var(--card);border-radius:8px;padding:16px;box-shadow:var(--shadow)}
.detail dt{color:var(--mut);font-size:12px}.detail dd{margin:0;word-break:break-word}
.sub{margin-top:24px}.sub h2{font-size:17px;margin:0;flex:1}
.pager{display:flex;gap:12px;align-items:center;margin:12px 0}

/* autocompletado FK */
.fk{position:relative;display:block}
.fk-list{position:absolute;z-index:5;left:0;right:0;margin:2px 0 0;padding:0;list-style:none;background:var(--card);border-radius:4px;max-height:240px;overflow:auto;box-shadow:var(--shadow-pop)}
.fk-list li{padding:7px 12px;cursor:pointer;color:var(--ink)}.fk-list li:hover{background:var(--hover)}

/* formularios tipo Access */
.frow{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 12px}
.frow.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.frow.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.frow.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.frow.c2,.frow.c3,.frow.c4,.detail{grid-template-columns:1fr}}
.more{margin:8px 0 14px}.more summary{cursor:pointer;color:var(--mut)}

/* barra de navegación de registros (pie) */
.navbar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:16px;padding:8px 12px;background:var(--card);border-radius:8px;box-shadow:0 -2px 8px rgba(60,64,67,.25)}
.navbar .rnav{display:flex;gap:6px;align-items:center}.navbar .pos{padding:0 8px;white-space:nowrap}
.navbar .btn{padding:4px 10px;white-space:nowrap}
.find{display:flex;gap:6px}.find input{width:200px}
nav[role=navigation]{margin:12px 0}