:root{
    --ink:#0B3B52;
    --ink-soft:#0F5470;
    --paper:#F3F7FA;
    --card:#FFFFFF;
    --line:#D6E2E8;
    --accent:#00699A;
    --accent-dark:#004F76;
    --muted:#5C7686;
    --danger:#A6402A;
    --danger-bg:#F6E5DF;
    --success:#2C6B4F;
    --success-bg:#E1EFE6;
    --pending:#94701E;
    --pending-bg:#F5EBD3;
    --info:#4C6B8A;
    --info-bg:#E6EDF3;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:Arial,Helvetica,sans-serif;
    background:var(--paper);
    color:var(--ink);
    min-height:100vh;
    line-height:1.5;
  }
  h1,h2,h3{font-family:Arial,Helvetica,sans-serif; margin:0; font-weight:600; color:var(--ink);}
  #app{min-height:100vh; display:flex; flex-direction:column;}

  .login-wrap{
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:32px 16px;
    background:
      radial-gradient(circle at 15% 20%, rgba(0,105,144,0.12), transparent 45%),
      radial-gradient(circle at 85% 80%, rgba(11,59,82,0.10), transparent 45%),
      var(--paper);
  }
  .login-card{
    width:100%; max-width:420px; background:var(--card);
    border:1px solid var(--line); border-radius:4px;
    padding:40px 36px; box-shadow:0 1px 3px rgba(22,35,61,0.06);
  }
  .login-brand{margin-bottom:28px;}
  .login-brand img{height:34px; margin-bottom:14px;}
  .login-brand .eyebrow{font-size:12.5px; color:var(--accent-dark); font-weight:600; letter-spacing:0.02em;}
  .login-brand h1{font-size:24px; line-height:1.25; margin-top:6px;}
  .field{margin-bottom:18px;}
  .field label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
  select, input, textarea{
    width:100%; padding:10px 12px; font-size:14.5px; font-family:inherit;
    border:1px solid #C9C2AD; border-radius:3px; background:#FFFFFF; color:var(--ink);
  }
  select:focus, input:focus, textarea:focus{outline:2px solid rgba(0,105,144,0.45); outline-offset:1px; border-color:var(--accent);}
  textarea{resize:vertical; min-height:70px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 20px; border-radius:3px; border:1px solid transparent;
    font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-primary:hover{background:var(--ink-soft);}
  .btn-accent{background:var(--accent); color:#fff;}
  .btn-accent:hover{background:var(--accent-dark);}
  .btn-outline{background:transparent; border-color:#C9C2AD; color:var(--ink);}
  .btn-outline:hover{border-color:var(--ink);}
  .btn-danger{background:#fff; border-color:var(--danger); color:var(--danger);}
  .btn-danger:hover{background:var(--danger-bg);}
  .btn-success{background:var(--success); color:#fff;}
  .btn-success:hover{background:#2A4E39;}
  .btn-block{width:100%;}
  .btn-sm{padding:6px 12px; font-size:13px;}
  .btn-xs{padding:4px 9px; font-size:12px;}
  .login-error{color:var(--danger); font-size:13.5px; margin:-8px 0 16px;}
  .demo-hint{
    margin-top:22px; padding:12px 14px; background:#FBF9F3; border:1px dashed var(--line);
    border-radius:3px; font-size:12.5px; color:var(--muted); line-height:1.6;
  }
  .demo-hint b{color:var(--ink-soft);}

  .topbar{
    background:var(--ink); color:#fff; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .topbar .brand{display:flex; align-items:center; gap:14px;}
  .topbar .brand img{height:26px; background:#fff; padding:4px 8px; border-radius:3px;}
  .topbar .brand-text h1{color:#fff; font-size:17px;}
  .topbar .brand-text span{font-size:11.5px; color:#9FCBDD; letter-spacing:0.03em;}
  .topbar .who{display:flex; align-items:center; gap:14px; font-size:13.5px; color:#D9D4C4;}
  .topbar .who b{color:#fff;}
  .role-chip{
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
    padding:2px 10px; border-radius:20px; font-size:11.5px; font-weight:600; color:#CDEBF7;
  }
  .tabs{ display:flex; gap:2px; background:#082B3D; padding:0 24px; overflow-x:auto; }
  .tab{ padding:12px 16px; font-size:13.5px; font-weight:600; color:#AEB6C9; cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; }
  .tab:hover{color:#fff;}
  .tab.active{color:#fff; border-bottom-color:var(--accent);}
  main{flex:1; padding:28px; max-width:1220px; width:100%; margin:0 auto;}

  .card{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:24px; margin-bottom:20px;}
  .card h2{font-size:20px; margin-bottom:4px;}
  .card .sub{color:var(--muted); font-size:13.5px; margin-bottom:20px;}
  .grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 20px;}
  .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 20px;}
  .span-2{grid-column:span 2;}
  @media(max-width:720px){ .grid, .grid-3{grid-template-columns:1fr;} .span-2{grid-column:span 1;} main{padding:16px;} .topbar{padding:12px 16px;} .tabs{padding:0 12px;} }

  .readonly-field{background:#F3F1EA; color:var(--muted);}
  .hint{font-size:12px; color:var(--muted); margin-top:4px;}
  .row-actions{display:flex; gap:8px; flex-wrap:wrap;}

  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{ text-align:left; padding:10px 12px; background:#FAF8F2; color:var(--ink-soft); font-size:11.5px; font-weight:700; border-bottom:2px solid var(--line); white-space:nowrap; }
  td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
  tr:hover td{background:#FBFAF5;}
  tr.row-vencida td{background:#F8E1DB !important;}
  .table-wrap{overflow-x:auto;}

  .badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap;}
  .badge-pendiente{background:var(--pending-bg); color:var(--pending);}
  .badge-info{background:var(--info-bg); color:var(--info);}
  .badge-autorizada{background:var(--success-bg); color:var(--success);}
  .badge-rechazada{background:var(--danger-bg); color:var(--danger);}
  .badge-muted{background:#EDEEF0; color:var(--muted);}

  .toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
  .search-box{max-width:280px;}

  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px;}
  .kpi{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:18px 20px;}
  .kpi .n{font-family:Arial,Helvetica,sans-serif; font-size:28px; font-weight:600; color:var(--ink);}
  .kpi .l{font-size:12.5px; color:var(--muted); margin-top:2px;}
  @media(max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr);} }

  .charts{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  @media(max-width:900px){ .charts{grid-template-columns:1fr;} }
  .chart-box{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:20px;}
  .chart-box h3{font-size:15px; margin-bottom:14px;}
  .chart-box.wide{grid-column:1 / -1;}

  .detail-panel{background:#FBFAF5; border:1px solid var(--line); border-radius:3px; padding:16px 18px; margin-top:10px; font-size:13.5px;}
  .detail-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px 20px;}
  .detail-grid div b{display:block; color:var(--muted); font-weight:600; font-size:11px; margin-bottom:2px;}
  @media(max-width:800px){ .detail-grid{grid-template-columns:1fr 1fr;} }

  .partidas-table th, .partidas-table td{padding:6px 8px; font-size:13px;}
  .partidas-table input{padding:6px 8px; font-size:13px;}

  .reject-box{margin-top:12px; padding:14px; background:var(--danger-bg); border-radius:3px;}
  .reject-box label{font-size:12.5px; font-weight:600; color:var(--danger); margin-bottom:6px; display:block;}

  .empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
  .empty-state h3{color:var(--ink-soft); margin-bottom:6px;}

  .overlay{ position:fixed; inset:0; background:rgba(22,35,61,0.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
  .modal{background:#fff; border-radius:5px; max-width:420px; width:100%; padding:30px; text-align:center;}
  .modal .icon{ width:46px; height:46px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 16px; }
  .modal h3{font-size:19px; margin-bottom:8px;}
  .modal p{color:var(--muted); font-size:14px; margin-bottom:22px;}
  .modal .folio-pill{ display:inline-block; background:var(--paper); border:1px solid var(--line); padding:4px 14px; border-radius:20px; font-weight:700; color:var(--ink); font-family:Arial,Helvetica,sans-serif; margin-bottom:4px; }
  .required:after{content:" *"; color:var(--danger);}
  .storage-note{font-size:11.5px; color:var(--muted); text-align:center; padding:10px; border-top:1px solid var(--line);}
  .save-warning{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; background:var(--pending-bg); color:var(--pending); font-size:13px; font-weight:600; padding:10px 20px; border-bottom:1px solid var(--line); }
  .budget-box{ display:flex; gap:20px; flex-wrap:wrap; padding:14px 16px; background:var(--info-bg); border-radius:3px; margin:10px 0 4px; }
  .budget-box div{font-size:12.5px; color:var(--info);}
  .budget-box b{display:block; font-family:Arial,Helvetica,sans-serif; font-size:18px; color:var(--ink);}
  .budget-box .neg b{color:var(--danger);}