:root{
    --red:#D81F2A;
    --red-dark:#b81620;
    --gray-900:#2b2b2b;
    --gray-700:#474747;
    --gray-500:#767676;
    --gray-300:#d4d4d4;
    --gray-200:#e7e7e7;
    --gray-100:#f2f2f2;
    --white:#ffffff;
    --ok:#1a8f4c;
    --ok-bg:#e7f6ed;
    --revisar:#b5850a;
    --revisar-bg:#fbf1d9;
    --preguntar:#b81620;
    --preguntar-bg:#fbe6e7;
    --sinhoja:#767676;
    --sinhoja-bg:#efefef;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    color:var(--gray-900);
    background:#f5f5f6;
    display:flex;
    height:100vh;
    overflow:hidden;
  }
  .wireframe-badge{
    position:fixed; top:10px; right:14px; z-index:999;
    background:var(--gray-900); color:#fff; font-size:11px; letter-spacing:.04em;
    padding:4px 10px; border-radius:20px; opacity:.75; text-transform:uppercase;
  }

  /* ---- Sidebar ---- */
  .sidebar{
    width:230px; flex-shrink:0; background:var(--gray-900); color:#fff;
    display:flex; flex-direction:column; padding:20px 0;
  }
  .brand{
    display:flex; align-items:center; gap:8px; padding:0 20px 22px 20px;
    border-bottom:1px solid #444; margin-bottom:14px;
  }
  .brand .mark{
    width:26px; height:26px; border-radius:6px; background:var(--red);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
  }
  .brand .name{font-weight:600; font-size:15px; letter-spacing:.01em;}
  .brand .name small{display:block; font-weight:400; font-size:10.5px; color:#aaa;}
  nav{display:flex; flex-direction:column; gap:2px; padding:0 10px;}
  nav button{
    all:unset; cursor:pointer; padding:10px 12px; border-radius:8px; font-size:13.5px;
    color:#d8d8d8; display:flex; align-items:center; gap:10px;
  }
  nav button .ic{width:16px; text-align:center; opacity:.8;}
  nav button:hover{background:#3a3a3a;}
  nav button.active{background:var(--red); color:#fff;}
  .sidebar-footer{margin-top:auto; padding:14px 20px 0 20px; border-top:1px solid #444;}
  .user-chip{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#ccc;}
  .avatar{width:24px; height:24px; border-radius:50%; background:#555; display:flex; align-items:center; justify-content:center; font-size:11px;}

  /* ---- Main area ---- */
  .main{flex:1; display:flex; flex-direction:column; overflow:hidden;}
  .topbar{
    background:#fff; border-bottom:1px solid var(--gray-200);
    padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
  }
  .topbar h1{font-size:18px; margin:0; font-weight:650;}
  .topbar .sub{font-size:12.5px; color:var(--gray-500); margin-top:2px;}
  .period-select{
    display:flex; align-items:center; gap:10px;
  }
  select, .btn, input[type=text]{
    font-family:inherit; font-size:13px;
  }
  select{
    padding:7px 10px; border-radius:7px; border:1px solid var(--gray-300); background:#fff; color:var(--gray-900);
  }
  .status-pill{
    font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px; letter-spacing:.02em;
  }
  .status-pill.abierto{background:var(--ok-bg); color:var(--ok);}
  .status-pill.cerrado{background:var(--sinhoja-bg); color:var(--sinhoja);}
  .btn{
    padding:8px 14px; border-radius:7px; border:1px solid var(--gray-300); background:#fff; cursor:pointer; font-weight:600; color:var(--gray-700);
  }
  .btn:hover{background:var(--gray-100);}
  .btn.primary{background:var(--red); border-color:var(--red); color:#fff;}
  .btn.primary:hover{background:var(--red-dark);}
  .btn.ghost{border-color:transparent; color:var(--gray-500);}
  .btn.sm{padding:5px 10px; font-size:12px;}
  .btn.link{border:none; background:none; color:var(--red); font-weight:600; padding:0;}

  .content{flex:1; overflow-y:auto; padding:24px 28px;}
  .screen{display:none;}
  .screen.active{display:block;}

  .grid-cards{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:10px;}
  .card{background:#fff; border:1px solid var(--gray-200); border-radius:10px; padding:16px; cursor:pointer; transition:.1s;}
  .card:hover{border-color:var(--gray-300); box-shadow:0 2px 8px rgba(0,0,0,.05);}
  .card .num{font-size:26px; font-weight:700;}
  .card .lbl{font-size:12px; color:var(--gray-500); margin-top:2px;}
  .card.ok .num{color:var(--ok);}
  .card.revisar .num{color:var(--revisar);}
  .card.preguntar .num{color:var(--preguntar);}
  .card.sinhoja .num{color:var(--sinhoja);}

  .banner{
    display:flex; align-items:center; gap:10px; background:var(--revisar-bg); color:#8a660a;
    border:1px solid #ecd48f; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:20px;
  }
  .banner.info{background:#e9f1fb; color:#1c5ea8; border-color:#bcd8f2;}
  .banner b{font-weight:700;}

  .section-title{font-size:14px; font-weight:700; margin:26px 0 10px 0; display:flex; align-items:center; justify-content:space-between;}
  .section-title .hint{font-size:11.5px; font-weight:400; color:var(--gray-500);}

  table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--gray-200); border-radius:10px; overflow:hidden;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500);
    background:var(--gray-100); padding:9px 12px; border-bottom:1px solid var(--gray-200);
  }
  tbody td{padding:10px 12px; border-bottom:1px solid var(--gray-100); font-size:13.2px;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr.clickable:hover{background:#fafafa; cursor:pointer;}
  .badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block;}
  .badge.OK{background:var(--ok-bg); color:var(--ok);}
  .badge.REVISAR{background:var(--revisar-bg); color:var(--revisar);}
  .badge.PREGUNTAR{background:var(--preguntar-bg); color:var(--preguntar);}
  .badge.SINPEP{background:var(--sinhoja-bg); color:var(--sinhoja);}
  .badge.SIN_HOJA{background:var(--sinhoja-bg); color:var(--sinhoja);}
  .badge.SIN_PEP{background:var(--sinhoja-bg); color:var(--sinhoja);}
  .badge.SIN_DATOS_MES{background:var(--sinhoja-bg); color:var(--sinhoja);}
  .diff-neg{color:var(--preguntar); font-weight:600;}
  .diff-zero{color:var(--ok); font-weight:600;}
  .muted{color:var(--gray-500);}
  .tag{font-size:10.5px; background:var(--gray-100); color:var(--gray-700); padding:2px 7px; border-radius:5px; margin-left:6px;}

  .filters{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center;}
  .chip{
    font-size:12px; padding:6px 12px; border-radius:20px; border:1px solid var(--gray-300); background:#fff; cursor:pointer; color:var(--gray-700);
  }
  .chip.active{background:var(--gray-900); border-color:var(--gray-900); color:#fff;}
  .search-box{
    padding:7px 12px; border-radius:20px; border:1px solid var(--gray-300); font-size:12.5px; width:220px; margin-left:auto;
  }

  /* Upload screen */
  .upload-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .upload-card{background:#fff; border:1px solid var(--gray-200); border-radius:10px; padding:18px;}
  .upload-card h3{margin:0 0 4px 0; font-size:14.5px;}
  .upload-card .filetype{font-size:11.5px; color:var(--gray-500); margin-bottom:14px;}
  .dropzone{
    border:2px dashed var(--gray-300); border-radius:10px; padding:26px; text-align:center; color:var(--gray-500);
    font-size:12.5px; margin-bottom:14px; background:var(--gray-100);
  }
  .dropzone b{color:var(--red); text-decoration:underline; cursor:pointer;}
  .snapshot-meta{font-size:12px; color:var(--gray-700); display:flex; justify-content:space-between; margin-bottom:10px;}
  .diff-box{
    background:var(--gray-100); border-radius:8px; padding:10px 12px; font-size:12.3px; color:var(--gray-700);
  }
  .diff-box .diff-title{font-weight:700; margin-bottom:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500);}
  .diff-box ul{margin:0; padding-left:18px;}
  .diff-box li{margin-bottom:3px;}

  /* Client detail (página completa, no panel lateral) */
  .back-link{
    all:unset; cursor:pointer; color:var(--red); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; margin-bottom:16px;
  }
  .back-link:hover{text-decoration:underline;}
  .drawer-head{
    background:#fff; border:1px solid var(--gray-200); border-radius:10px; padding:18px 22px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .drawer-head h2{margin:0; font-size:20px;}
  .drawer-head .sub{font-size:12.5px; color:var(--gray-500); margin-top:3px;}
  .drawer-body{max-width:980px;}
  .kv-grid{display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:12px; margin-bottom:20px;}
  .kv{background:#fff; border:1px solid var(--gray-200); border-radius:8px; padding:10px 12px;}
  .kv .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); margin-bottom:3px;}
  .kv .v{font-size:15px; font-weight:700;}
  .tab-strip{display:flex; gap:4px; border-bottom:1px solid var(--gray-200); margin-bottom:16px;}
  .tab-strip button{
    all:unset; cursor:pointer; padding:8px 12px; font-size:12.5px; color:var(--gray-500); border-bottom:2px solid transparent;
  }
  .tab-strip button.active{color:var(--red); border-color:var(--red); font-weight:600;}
  .subtab{display:none;}
  .subtab.active{display:block;}
  .note-box{
    background:#fff8e6; border:1px solid #f0dca0; border-radius:8px; padding:10px 12px; font-size:12.5px; color:#7a5b06; margin-bottom:14px;
  }
  .note-box.ok{background:var(--ok-bg); border-color:#bfe3cd; color:#116636;}
  tr.consultor-row{cursor:pointer;}
  tr.consultor-row:hover{background:#fafafa;}
  tr.consultor-row .chev{display:inline-block; width:14px; color:var(--gray-500); font-size:11px; transition:transform .15s;}
  tr.consultor-row.open .chev{transform:rotate(90deg);}
  tr.reg-row{display:none;}
  tr.reg-row.open{display:table-row;}
  tr.reg-row td{padding:0 12px 14px 34px; border-bottom:1px solid var(--gray-100); background:var(--gray-100);}
  table.mini{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--gray-200); border-radius:8px; overflow:hidden; margin-top:2px;}
  table.mini thead th{background:var(--gray-100); text-align:left; padding:6px 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--gray-500); border-bottom:1px solid var(--gray-200);}
  table.mini tbody td{padding:6px 10px; font-size:12.3px; border-bottom:1px solid var(--gray-100);}
  table.mini tbody tr:last-child td{border-bottom:none;}
  .form-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:13px;}
  .form-row:last-child{border-bottom:none;}
  .toggle{
    width:34px; height:20px; border-radius:20px; background:var(--gray-300); position:relative; cursor:pointer; flex-shrink:0;
  }
  .toggle.on{background:var(--ok);}
  .toggle .knob{width:16px; height:16px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition:.15s;}
  .toggle.on .knob{left:16px;}
  .alias-list{list-style:none; margin:0; padding:0; font-size:12.5px;}
  .alias-list li{padding:7px 0; border-bottom:1px solid var(--gray-100); display:flex; justify-content:space-between;}
  .alias-list .sys{color:var(--gray-500); font-size:11px; text-transform:uppercase; letter-spacing:.02em;}

  .history-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--gray-100); font-size:12.8px;}
  .history-row .m{font-weight:600;}

  .empty-note{font-size:12px; color:var(--gray-500); text-align:center; padding:20px;}

  /* Config screen */
  .config-table td{vertical-align:top;}
  .alias-chip{background:var(--gray-100); font-size:11px; padding:2px 7px; border-radius:5px; margin:2px 4px 2px 0; display:inline-block; color:var(--gray-700);}
  .rule-chip{font-size:11px; padding:2px 8px; border-radius:20px; margin-right:4px;}
  .rule-chip.on{background:var(--ok-bg); color:var(--ok);}
  .rule-chip.off{background:var(--gray-100); color:var(--gray-500);}