:root{--bg:#f2f3f5;--card:#fff;--tx:#202124;--mut:#6b7280;--ac:#e0241b;--ac2:#c11d15;--bd:#d4d7dc;--bad:#b00020;--side:#1f1f1f;--side2:#3a3a3a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--tx);font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:15px}

/* ---------- esqueleto: barra lateral + barra superior ---------- */
.shell{display:flex;min-height:100vh}
.side{width:88px;flex:none;background:var(--side);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
.marca{width:38px;height:38px;border-radius:9px;background:var(--ac);color:#fff;display:grid;place-items:center;margin:2px 0 14px}
.marca svg{width:22px;height:22px}
.side a{display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:10px 4px;border-radius:8px;color:#e8e8e8;text-decoration:none;font-size:11px;font-weight:500;text-align:center;word-break:break-word}
.side a svg{width:22px;height:22px}
.side a:hover{background:#2b2b2b}.side a.on{background:var(--side2);color:#fff}
.cuerpo{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:46px;flex:none;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 12px;position:sticky;top:0;z-index:50}
.top .grp{display:flex;align-items:center;gap:4px}
.ic{width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#555;display:grid;place-items:center;cursor:pointer}
.ic:hover{background:#eef0f2}.ic svg{width:21px;height:21px}
.main{flex:1;padding:12px;width:100%;max-width:1200px;margin:0 auto}
.velo{display:none}
.menu-user{position:absolute;right:10px;top:48px;background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px #0003;min-width:230px;padding:6px;z-index:70}
.menu-user .quien{padding:10px 12px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.menu-user .quien small{display:block;color:var(--mut)}
.menu-user button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:transparent;padding:10px 12px;border-radius:8px;font:inherit;color:var(--tx);cursor:pointer;text-align:left}
.menu-user button:hover{background:#f2f3f5}.menu-user button svg{width:18px;height:18px;color:var(--ac)}
.shell.oculta .side{display:none}
@media(max-width:800px){
  .side{position:fixed;left:-100px;top:0;transition:left .2s}
  .shell.abierto .side{left:0}
  .shell.abierto .velo{display:block;position:fixed;inset:0;background:#0006;z-index:55}
  .shell.oculta .side{display:flex}
}
@media print{.side,.top,.velo{display:none!important}.main{padding:0;max-width:none}body{background:#fff}}

/* ---------- menú de botones grandes (inicio) ---------- */
.menu{display:grid;gap:12px}
a.big{display:flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:10px 16px;background:#f4f5f8;border:1px solid #c9ccd2;border-radius:14px;box-shadow:0 2px 3px #0002;color:var(--tx);text-decoration:none;font-size:19px}
a.big:hover{background:#fff;border-color:#a9adb5}
a.big svg{width:22px;height:22px;color:var(--ac);flex:none}

/* ---------- componentes comunes ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:14px}
h2{font-size:17px;margin:0 0 4px}
label{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
input,select,button,textarea{font:inherit;color:var(--tx);background:#fff;border:1px solid var(--bd);border-radius:8px;padding:10px;width:100%}
input:focus,select:focus{outline:2px solid #e0241b55;border-color:var(--ac)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
button.pri{background:var(--ac);color:#fff;border:0;font-weight:600;cursor:pointer;margin-top:14px}
button.pri:hover{background:var(--ac2)}
button.sec,button.sm{width:auto;cursor:pointer}button.sm{padding:6px 10px}
button.del{width:auto;padding:6px 10px;color:var(--bad);cursor:pointer}
.info{font-size:13px;color:var(--mut);margin-top:6px;min-height:1.2em}
.msg{color:var(--bad);font-size:14px;min-height:1.2em;margin-top:8px}
dialog{border:1px solid var(--bd);border-radius:12px;background:#fff;color:var(--tx);width:min(340px,calc(100vw - 32px))}
dialog::backdrop{background:#0006}
.btns{display:flex;gap:8px;margin-top:14px}.btns button{flex:1;cursor:pointer}
.btns button.pri{margin-top:0}