:root{
    --ink:#1A1A1A;
    --ink-soft:#333333;
    --paper:#F7F7F5;
    --card:#FFFFFF;
    --line:#E4E4E2;
    --slate:#646567;
    --slate-light:#9A9B9D;
    --gold:#F0AF1F;
    --gold-soft:#FBEFD3;
    --good:#2F6F4E;
    --good-bg:#E7F1EB;
    --bad:#B23B3B;
    --bad-bg:#F7E9E8;
    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font-body); line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; }
  header.top{
    background:var(--ink);
    background-image:
      linear-gradient(var(--ink), var(--ink)),
      repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 28px);
    color:#EDEAE1;
    padding:34px 28px 30px;
  }
  .top-inner{ max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
  .title-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
  .logo-badge{
    display:inline-flex; align-items:center;
  }
  .logo-badge img{ height:44px; width:auto; display:block; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); border:1px solid rgba(240,175,31,.5); padding:4px 10px; border-radius:999px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
  h1{ font-family:var(--font-display); font-weight:400; font-size:32px; margin:0 0 6px; letter-spacing:.2px; }
  .top-inner p{ margin:0; color:#C7C7C4; max-width:560px; font-size:14.5px; }
  .roadmap-note{ font-family:var(--font-mono); font-size:12px; color:#9A9B9D; text-align:right; max-width:230px; }
  main{ max-width:1080px; margin:0 auto; padding:32px 28px 80px; display:flex; flex-direction:column; gap:22px; }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:10px;
    padding:24px 26px; box-shadow:0 1px 2px rgba(16,27,45,0.03);
  }
  .card h2{ font-family:var(--font-display); font-size:20px; font-weight:400; margin:0 0 4px; }
  .card .card-sub{ color:var(--slate); font-size:13.5px; margin:0 0 18px; }
  .card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:6px;}

  /* Dropzone */
  .dropzone{
    border:1.5px dashed #C7C2B4; border-radius:8px; padding:28px 20px; text-align:center;
    background:#FCFBF9; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .dropzone:hover, .dropzone.dragover{ border-color:var(--gold); background:var(--gold-soft); }
  .dropzone strong{ display:block; font-size:14.5px; margin-bottom:4px; }
  .dropzone span{ font-size:12.5px; color:var(--slate); }
  input[type=file]{ display:none; }

  .btn{
    font-family:var(--font-body); font-size:13.5px; font-weight:600; border:none; border-radius:6px;
    padding:10px 16px; cursor:pointer; transition:transform .05s, opacity .15s;
  }
  .btn:active{ transform:scale(.98); }
  .btn-primary{ background:var(--ink); color:#F3F1EA; }
  .btn-primary:hover{ background:var(--ink-soft); }
  .btn-gold{ background:var(--gold); color:#2A1F0C; }
  .btn-gold:hover{ opacity:.9; }
  .btn-ghost{ background:transparent; color:var(--slate); border:1px solid var(--line); }
  .btn-ghost:hover{ border-color:var(--slate-light); color:var(--ink); }
  .btn-small{ padding:6px 10px; font-size:12px; }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; }

  /* Manual form */
  details.manual{ border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
  details.manual summary{ cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-soft); list-style:none; display:flex; align-items:center; gap:8px;}
  details.manual summary::-webkit-details-marker{ display:none; }
  details.manual summary::before{ content:'+'; font-family:var(--font-mono); font-size:16px; color:var(--gold); width:16px;}
  details.manual[open] summary::before{ content:'−'; }
  .manual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-top:16px; }
  .manual-grid.wide{ grid-template-columns:1fr; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ font-size:12px; color:var(--slate); font-weight:600; }
  .field input, .field select{
    font-family:var(--font-body); font-size:13.5px; padding:8px 10px; border:1px solid var(--line);
    border-radius:6px; background:#fff; color:var(--ink);
  }
  .field select:focus, .field input:focus{ outline:2px solid var(--gold-soft); border-color:var(--gold); }
  .section-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--slate-light); margin:18px 0 4px; }

  /* status list */
  .status-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
  .status-item{ display:flex; gap:10px; align-items:flex-start; font-size:13px; padding:9px 12px; border-radius:6px; }
  .status-ok{ background:var(--good-bg); color:#1F4C36; }
  .status-warn{ background:#FBF3E2; color:#6B4B12; }
  .status-err{ background:var(--bad-bg); color:#7A2622; }
  .status-item .icon{ font-family:var(--font-mono); font-weight:700; }

  /* respondents table */
  table{ width:100%; border-collapse:collapse; font-size:13.5px; }
  th{ text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-light); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); }
  td{ padding:10px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tr:last-child td{ border-bottom:none; }
  .name-cell{ font-weight:600; }
  .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; }
  .badge-good{ background:var(--good-bg); color:var(--good); }
  .badge-bad{ background:var(--bad-bg); color:var(--bad); }
  .badge-none{ background:#EEECE5; color:var(--slate-light); }
  .mono{ font-family:var(--font-mono); }
  .row-actions{ display:flex; gap:6px; justify-content:flex-end; }
  .icon-btn{ background:none; border:none; cursor:pointer; color:var(--slate-light); font-size:15px; padding:4px 6px; border-radius:5px; }
  .icon-btn:hover{ color:var(--bad); background:var(--bad-bg); }
  .icon-btn.detail:hover{ color:var(--ink); background:var(--gold-soft); }

  .empty{ text-align:center; padding:34px 10px; color:var(--slate-light); font-size:13.5px; }

  /* tabs */
  .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
  .tab{ padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--slate-light); cursor:pointer; border-bottom:2px solid transparent; }
  .tab.active{ color:var(--ink); border-bottom-color:var(--gold); }

  /* ledger bars */
  .ledger{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
  .ledger-row{ display:grid; grid-template-columns:30px 1fr 90px; gap:14px; align-items:center; }
  .ledger-rank{ font-family:var(--font-display); font-size:19px; color:var(--gold); text-align:right; }
  .ledger-main{ display:flex; flex-direction:column; gap:5px; }
  .ledger-label{ font-size:13.5px; font-weight:600; display:flex; justify-content:space-between; }
  .ledger-track{ height:8px; background:#EFEDE6; border-radius:5px; overflow:hidden; }
  .ledger-fill{ height:100%; background:linear-gradient(90deg, var(--gold), #F5C762); border-radius:5px; }
  .ledger-pct{ font-family:var(--font-mono); font-size:13px; text-align:right; color:var(--ink-soft); }

  .table-wrap{ overflow-x:auto; }
  .promedio-col{ background:var(--gold-soft); font-weight:700; }

  footer.note{ max-width:1080px; margin:0 auto; padding:0 28px 60px; color:var(--slate-light); font-size:12.5px; font-family:var(--font-mono); }

  .toolbar{ display:flex; gap:10px; flex-wrap:wrap; }

  /* modal */
  .overlay{ position:fixed; inset:0; background:rgba(16,27,45,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 20px; z-index:50; }
  .modal{ background:#fff; border-radius:10px; max-width:640px; width:100%; padding:26px 28px; max-height:86vh; overflow-y:auto; }
  .modal h3{ font-family:var(--font-display); font-weight:400; margin:0 0 4px; font-size:20px; }
  .modal .close{ float:right; background:none; border:none; font-size:20px; cursor:pointer; color:var(--slate-light); }
  .modal table{ margin-top:14px; }
  .kpi-row{ display:flex; gap:18px; margin:16px 0 4px; flex-wrap:wrap; }
  .kpi{ background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 14px; min-width:120px; }
  .kpi .kpi-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--slate-light); }
  .kpi .kpi-value{ font-family:var(--font-mono); font-size:16px; font-weight:700; margin-top:2px; }

  /* import review modal (Excel / Sincronizar) */
  .review-toolbar{ display:flex; gap:10px; margin-bottom:10px; }
  .review-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; max-height:360px; overflow-y:auto; }
  .review-row{ display:flex; gap:12px; padding:11px 13px; border-bottom:1px solid var(--line); cursor:pointer; }
  .review-row:last-child{ border-bottom:none; }
  .review-row:hover{ background:var(--paper); }
  .review-row input[type=checkbox]{ margin-top:3px; flex-shrink:0; }
  .review-row-main{ flex:1; min-width:0; }
  .review-row-name{ font-weight:600; font-size:13.5px; margin-bottom:5px; }
  .review-row-badges{ display:flex; gap:6px; flex-wrap:wrap; }
  .review-note{ font-size:12px; color:var(--slate); margin-top:5px; }
  .review-note-warn{ color:var(--bad); }
  .review-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

  /* gauge (termómetro) del cuestionario público */
  .quiz-list{ display:flex; flex-direction:column; gap:24px; margin-top:16px; }
  .gauge-field{ display:flex; flex-direction:column; gap:8px; }
  .gauge-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .gauge-head label{ font-size:14px; font-weight:600; color:var(--ink-soft); }
  .gauge-value{ font-family:var(--font-display); font-size:13px; color:var(--ink); background:var(--gold-soft); padding:3px 12px; border-radius:999px; white-space:nowrap; }
  .gauge-track{ display:flex; gap:5px; }
  .gauge-seg{ flex:1; height:38px; border:1px solid var(--line); background:#fff; border-radius:5px; cursor:pointer; padding:0; transition:background .12s ease, border-color .12s ease; }
  .gauge-seg:hover{ border-color:var(--slate-light); }
  .gauge-seg:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .gauge-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--slate-light); }
  @media (max-width:480px){
    .gauge-seg{ height:44px; }
  }

  @media (max-width:640px){
    .manual-grid{ grid-template-columns:1fr; }
    h1{ font-size:26px; }
    .ledger-row{ grid-template-columns:22px 1fr 70px; gap:10px; }
  }