*{box-sizing:border-box}
  :root{
    --ink:#1A1815; --ink2:#2A2622; --orange:#F08020; --orange-lt:#FFB370;
    --cream:#FAF7F1; --sandm:#C9BCA5; --sandd:#8A7E6B;
  }
  body{margin:0;background:var(--ink);color:var(--cream);font-family:'DM Sans',-apple-system,sans-serif;
       -webkit-font-smoothing:antialiased;min-height:100vh}
  h1,h2,.serif{font-family:'DM Serif Display',serif;font-weight:400}
  a{color:var(--orange-lt)}
  .wrap{max-width:640px;margin:0 auto;padding:3.5rem 1.5rem 4rem}
  .wrap.wide{max-width:1080px}
  .brand{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:2.5rem;font-size:.7rem;
         letter-spacing:.14em;text-transform:uppercase;color:var(--sandd)}
  .brand b{color:var(--orange-lt);font-weight:500}
  .brand .quien{font-size:.68rem;color:var(--sandm);text-transform:none;letter-spacing:0}
  .card{background:var(--ink2);border:1px solid rgba(240,128,32,.14);border-radius:4px;padding:2.2rem}
  .card.scroll{overflow-x:auto;padding:1.4rem}
  h1{font-size:1.9rem;line-height:1.2;margin:0 0 .8rem}
  h1.tight{margin:0}
  h2{font-size:1.3rem;margin:0 0 1rem}
  p.lead{color:var(--sandm);line-height:1.7;margin:0 0 2rem;font-size:.95rem}
  label{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sandd);margin-bottom:.4rem}
  .fld{margin-bottom:1.3rem}
  .consentimiento{margin-top:1.8rem}
  label.chk{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--sandm);cursor:pointer}
  label.chk input[type=checkbox]{width:auto;margin-top:.2rem;flex-shrink:0}
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
    width:100%;background:var(--ink);border:1px solid rgba(240,128,32,.22);color:var(--cream);
    padding:.8rem .9rem;border-radius:2px;font-size:.92rem;font-family:inherit}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange)}
  textarea{resize:vertical;min-height:80px}
  .btn{display:inline-block;background:var(--orange);color:var(--ink);font-weight:600;text-decoration:none;
       padding:.9rem 1.7rem;border-radius:2px;border:none;cursor:pointer;font-size:.85rem;
       letter-spacing:.03em;font-family:inherit}
  .btn:hover{background:var(--orange-lt)}
  .btn-o{display:inline-block;background:transparent;color:var(--orange-lt);text-decoration:none;
         padding:.85rem 1.6rem;border-radius:2px;border:1px solid rgba(240,128,32,.4);font-size:.85rem;
         cursor:pointer;font-family:inherit}
  .btn-sm{font-size:.68rem;padding:.4rem .8rem}
  .btn-block{display:block;width:100%;text-align:center}
  .btn-danger{color:#FFB3A6;border-color:rgba(200,60,40,.4)}
  .err{background:rgba(200,60,40,.14);border:1px solid rgba(200,60,40,.4);color:#FFB3A6;
       padding:.8rem 1rem;border-radius:2px;font-size:.85rem;margin-bottom:1.3rem}
  .ok{background:rgba(90,150,90,.14);border:1px solid rgba(90,150,90,.4);color:#B9E6B9;
      padding:.8rem 1rem;border-radius:2px;font-size:.85rem;margin-bottom:1.3rem}
  .foot{margin-top:2.5rem;font-size:.72rem;color:var(--sandd);text-align:center}
  .foot a{color:var(--sandd)}
  table{width:100%;border-collapse:collapse;font-size:.82rem}
  th{text-align:left;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-lt);
     padding:.6rem .7rem;border-bottom:2px solid rgba(240,128,32,.25)}
  td{padding:.7rem;border-bottom:1px solid rgba(240,128,32,.08);color:var(--sandm);vertical-align:top}
  td.sub{font-size:.76rem;color:var(--sandd)}
  span.sub-line{color:var(--sandd);font-size:.78rem}
  .tag{display:inline-block;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;
       padding:.2rem .55rem;border-radius:2px}
  .tag-pendiente{background:rgba(240,128,32,.16);color:var(--orange-lt)}
  .tag-aprobado{background:rgba(90,150,90,.18);color:#B9E6B9}
  .tag-rechazado{background:rgba(200,60,40,.14);color:#FFB3A6}
  .tag-activo{background:rgba(90,150,90,.18);color:#B9E6B9}
  .tag-inactivo{background:rgba(138,126,107,.18);color:var(--sandd)}
  .tag-rol-admin{background:rgba(240,128,32,.16);color:var(--orange-lt)}
  .tag-rol-gerencia{background:rgba(120,150,200,.18);color:#AFC8E8}
  .row-btns{display:flex;gap:.5rem;flex-wrap:wrap}
  .row-btns form{display:inline}
  .tabs{display:flex;gap:1.5rem;margin-bottom:1.8rem;border-bottom:1px solid rgba(240,128,32,.15);flex-wrap:wrap}
  .tabs a{display:block;padding:.7rem 0;color:var(--sandd);text-decoration:none;font-size:.78rem;
          letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid transparent}
  .tabs a.active{color:var(--orange-lt);border-color:var(--orange)}
  .filelist{list-style:none;padding:0;margin:0}
  .filelist li{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;
               background:var(--ink2);border:1px solid rgba(240,128,32,.12);border-radius:3px;margin-bottom:.7rem}
  .top-admin{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}

  /* ---- Módulos: nav de pestañas del panel ---- */
  .modnav{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.2rem}
  .modnav a{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:3px;
            text-decoration:none;font-size:.78rem;letter-spacing:.02em;color:var(--sandm);
            background:var(--ink2);border:1px solid rgba(240,128,32,.1)}
  .modnav a.active{background:rgba(240,128,32,.14);color:var(--orange-lt);border-color:rgba(240,128,32,.35)}
  .modnav a .n{background:rgba(240,128,32,.25);color:var(--orange-lt);font-size:.64rem;font-weight:600;
               padding:.05rem .4rem;border-radius:8px;min-width:1.2rem;text-align:center}

  /* ---- Tablero (resumen con KPIs) ---- */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
        background:rgba(240,128,32,.1);margin-bottom:2.5rem;border-radius:4px;overflow:hidden}
  .kpi{background:var(--ink2);padding:1.6rem 1.4rem}
  .kpi .kpi-n{font-family:'DM Serif Display',serif;font-size:2.1rem;color:var(--orange-lt);line-height:1}
  .kpi .kpi-l{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sandd);margin-top:.5rem}
  .accesos-rapidos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2.5rem}
  .acceso-rapido{display:block;background:var(--ink2);border:1px solid rgba(240,128,32,.14);border-radius:4px;
                 padding:1.4rem;text-decoration:none;transition:border-color .2s}
  .acceso-rapido:hover{border-color:var(--orange)}
  .acceso-rapido .ar-t{color:var(--cream);font-weight:500;font-size:.92rem;margin-bottom:.3rem}
  .acceso-rapido .ar-d{color:var(--sandd);font-size:.78rem}

  /* ---- Teclado PIN (mostrador) ---- */
  .pin-wrap{max-width:340px;margin:0 auto;text-align:center}
  .pin-quien{margin-bottom:1.6rem}
  .pin-quien .pq-n{font-family:'DM Serif Display',serif;font-size:1.4rem}
  .pin-dots{display:flex;justify-content:center;gap:.8rem;margin:1.6rem 0}
  .pin-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(240,128,32,.4);background:transparent;transition:background .15s}
  .pin-dot.filled{background:var(--orange)}
  .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
  .pin-key{aspect-ratio:1;border-radius:50%;border:1px solid rgba(240,128,32,.25);background:var(--ink2);
           color:var(--cream);font-size:1.4rem;font-family:inherit;cursor:pointer;display:flex;
           align-items:center;justify-content:center}
  .pin-key:active{background:rgba(240,128,32,.25)}
  .pin-key.ghost{background:transparent;border:none;color:var(--sandd);font-size:.85rem}
  .selector-usuarios{display:grid;gap:.8rem;margin-top:1rem}
  .usuario-tile{display:flex;align-items:center;gap:1rem;background:var(--ink2);border:1px solid rgba(240,128,32,.14);
                border-radius:4px;padding:1.1rem 1.4rem;text-decoration:none;color:inherit}
  .usuario-tile .ut-av{width:42px;height:42px;border-radius:50%;background:rgba(240,128,32,.18);color:var(--orange-lt);
                        display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}
  .usuario-tile .ut-n{color:var(--cream);font-weight:500}
  .usuario-tile .ut-p{font-size:.76rem;color:var(--sandd)}

  @media(max-width:600px){
    .wrap.wide{padding:2.5rem 1rem 3rem}
    .top-admin{flex-direction:column;align-items:flex-start}
  }

  /* ---- Utilidades (evitan cualquier style= inline, CSP estricta sin unsafe-inline) ---- */
  .mt-lg{margin-top:1.8rem}
  .mb-lg{margin-bottom:2rem}
  .mb-md{margin-bottom:1.6rem}
  .txt-count{font-size:1rem}
  .oculto{display:none}
  .card-narrow{max-width:460px}
  .card-narrow-sm{max-width:420px}
  .pin-display{font-size:2rem;letter-spacing:.3em;text-align:center;color:var(--orange-lt);margin:1.5rem 0}
  .pin-strong{font-size:1.1rem;letter-spacing:.15em}