:root{
    --bg: #EEF1F5;
    --surface: #FFFFFF;
    --surface-2: #F7F9FB;
    --ink: #182534;
    --ink-muted: #5B6675;
    --ink-faint: #8B95A3;
    --border: #DCE2E9;
    --border-strong: #C4CDD8;

    --primary: #0F3D63;
    --primary-light: #1B5C8E;
    --primary-tint: #E7EEF4;

    --c-ausencia: #8A6A2F;
    --c-ausencia-tint: #F6EFE1;
    --c-ros: #A63A3A;
    --c-ros-tint: #F7E9E9;
    --c-individual: #1C7A72;
    --c-individual-tint: #E4F1EF;
    --c-multiple: #3D6B3E;
    --c-multiple-tint: #E9F1E9;

    --radius: 10px;
    --shadow: 0 1px 2px rgba(15,61,99,0.06), 0 6px 20px rgba(15,61,99,0.05);
    --font-body: 'Public Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    min-height:100vh;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- Layout shell ---------- */
  .shell{

        width:100%;
    
        max-width:1700px;
    
        margin:40px auto;
    
        display:grid;
    
        grid-template-columns:260px 1fr;
    
        gap:28px;
    
        align-items:start;

    }

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:296px;
    flex-shrink:0;
    background: var(--primary);
    color: #fff;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
  }
  .sidebar-header{
    padding:26px 22px 20px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .sidebar-header .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    color: #BFD4E6;
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .sidebar-header .badge svg{flex-shrink:0;}
  .sidebar-header h1{
    font-size:17px;
    font-weight:700;
    line-height:1.35;
    margin:0 0 4px;
  }
  .sidebar-header p{
    font-size:12.5px;
    color:#AFC6DB;
    margin:0;
    line-height:1.5;
  }

  .nav{
    list-style:none;
    margin:0;
    padding:14px 12px;
    flex:1;
  }
  .nav-label{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#7FA1C1;
    padding:10px 10px 8px;
    font-weight:600;
  }
  .nav-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    text-align:left;
    background:transparent;
    border:none;
    color:#D8E4EF;
    padding:12px 12px;
    border-radius:8px;
    cursor:pointer;
    margin-bottom:4px;
    position:relative;
    font-family:inherit;
  }
  .nav-item .stripe{
    position:absolute;
    left:0; top:8px; bottom:8px;
    width:3px;
    border-radius:2px;
    background: var(--stripe-color, transparent);
    opacity:0;
    transition:opacity .15s ease;
  }
  .nav-item:hover{ background: rgba(255,255,255,0.06); }
  .nav-item.active{ background: rgba(255,255,255,0.10); color:#fff; }
  .nav-item.active .stripe{ opacity:1; }
  .nav-icon{
    width:30px; height:30px;
    border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.08);
    flex-shrink:0;
    margin-top:1px;
  }
  .nav-item.active .nav-icon{ background: var(--stripe-color); }
  .nav-text .code{
    font-family: var(--font-mono);
    font-size:10.5px;
    letter-spacing:.04em;
    color:#9FBBD4;
    display:block;
    margin-bottom:2px;
  }
  .nav-item.active .nav-text .code{ color:#D8E4EF; }
  .nav-text .title{
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    display:block;
  }

  .sidebar-footer{
    padding:16px 22px 20px;
    border-top:1px solid rgba(255,255,255,0.12);
    font-size:11.5px;
    color:#8FA8C1;
    line-height:1.6;
  }

  /* ---------- Main ---------- */
  .main{

        flex:1;
    
        background:#ffffff;
    
        border-radius:16px;
    
        box-shadow:0 10px 30px rgba(0,0,0,.08);
    
        padding:45px;
    
        min-height:900px;
    
        overflow:hidden;
    
    }
  .topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:26px;
    gap:20px;
    flex-wrap:wrap;
  }
  .topbar h2{
    font-size:22px;
    margin:0 0 6px;
    font-weight:700;
    color:var(--primary);
  }
  .topbar .meta{
    font-size:13px;
    color:var(--ink-muted);
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .topbar .meta span{ display:inline-flex; align-items:center; gap:6px; }
  .topbar .meta code{
    font-family:var(--font-mono);
    background:var(--surface-2);
    border:1px solid var(--border);
    padding:2px 8px;
    border-radius:5px;
    font-size:12px;
  }

  .form-card{
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border:1px solid var(--border);
    overflow:hidden;
  }
  .form-card .stripe-top{ height:4px; background: var(--form-color); }
  .form-card .card-inner{ padding: 30px 34px 34px; }

  .intro-note{
    display:flex; gap:12px;
    background: var(--form-tint);
    border:1px solid color-mix(in srgb, var(--form-color) 30%, white);
    border-radius:8px;
    padding:14px 16px;
    margin-bottom:26px;
    font-size:13px;
    line-height:1.55;
    color: var(--ink);
  }
  .intro-note svg{ flex-shrink:0; margin-top:1px; color: var(--form-color); }

  fieldset{
    border:none;
    padding:0;
    margin:0 0 28px;
  }
  fieldset legend{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color: var(--form-color);
    padding:0 0 12px;
    width:100%;
    border-bottom:2px solid var(--border);
    margin-bottom:18px;
  }
  .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px 20px;
  }
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field.full{ grid-column: 1 / -1; }
  .field label{
    font-size:12.5px;
    font-weight:600;
    color: var(--ink);
  }
  .field label .opt{ font-weight:400; color:var(--ink-faint); }
  .field .hint{ font-size:11.5px; color:var(--ink-faint); margin-top:-2px; }

  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=number], select, textarea{
    font-family: inherit;
    font-size:13.5px;
    color: var(--ink);
    background: var(--surface-2);
    border:1px solid var(--border-strong);
    border-radius:7px;
    padding:10px 12px;
    width:100%;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  }
  textarea{ resize:vertical; min-height:76px; font-family:inherit; }
  input:focus, select:focus, textarea:focus{
    outline:none;
    border-color: var(--form-color);
    background:#fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-color) 18%, transparent);
  }
  input:required, select:required, textarea:required{}

  .radio-row, .check-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .pill-option{
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--border-strong);
    background: var(--surface-2);
    padding:9px 14px;
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
    transition: all .15s ease;
  }
  .pill-option:has(input:checked){
    border-color: var(--form-color);
    background: var(--form-tint);
    color: var(--form-color);
    font-weight:600;
  }
  .pill-option input{ accent-color: var(--form-color); margin:0; }

  .signature-box{
    display:flex; align-items:center; gap:10px;
    border:1.5px dashed var(--border-strong);
    border-radius:8px;
    padding:12px 14px;
    background: var(--surface-2);
  }
  .signature-box input{ border:none; background:transparent; padding:4px 0; }
  .signature-box .sig-icon{ color: var(--ink-faint); flex-shrink:0; }

  .consent{
    display:flex; gap:12px;
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:16px;
    font-size:12.5px;
    line-height:1.6;
    color: var(--ink-muted);
    margin-bottom:20px;
  }
  .consent input{ margin-top:3px; accent-color: var(--form-color); flex-shrink:0; }
  .consent strong{ color:var(--ink); }

  .actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding-top:6px;
    border-top:1px solid var(--border);
    margin-top:6px;
  }
  .btn{
    font-family:inherit;
    font-size:13.5px;
    font-weight:600;
    padding:11px 22px;
    border-radius:7px;
    cursor:pointer;
    border:1px solid transparent;
  }
  .btn-secondary{
    background:#fff;
    border-color: var(--border-strong);
    color: var(--ink-muted);
  }
  .btn-secondary:hover{ background: var(--surface-2); }
  .btn-primary{
    background: var(--form-color);
    color:#fff;
  }
  .btn-primary:hover{ filter:brightness(1.08); }

  /* Table for multiple transactions (FO-16) */
  .table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
  table.trx-table{
    width:100%;
    border-collapse:collapse;
    font-size:12.5px;
    min-width:920px;
  }
  table.trx-table th{
    background: var(--form-tint);
    color: var(--form-color);
    text-transform:uppercase;
    letter-spacing:.03em;
    font-size:10.5px;
    font-weight:700;
    text-align:left;
    padding:10px 10px;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
  }
  table.trx-table td{
    padding:6px 6px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
  }
  table.trx-table input, table.trx-table select{
    padding:7px 8px;
    font-size:12.5px;
    min-width:100px;
  }
  table.trx-table td.rownum{
    text-align:center;
    color:var(--ink-faint);
    font-family:var(--font-mono);
    font-size:11.5px;
    min-width:28px;
  }
  .row-remove{
    background:none; border:none; cursor:pointer;
    color:#B23A48; padding:6px; border-radius:6px;
  }
  .row-remove:hover{ background:var(--c-ros-tint); }

  .table-toolbar{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:14px;
  }
  .btn-add-row{
    display:inline-flex; align-items:center; gap:6px;
    background: var(--form-tint);
    color: var(--form-color);
    border:1px solid color-mix(in srgb, var(--form-color) 35%, white);
    font-weight:600; font-size:12.5px;
    padding:8px 14px; border-radius:7px; cursor:pointer;
  }
  .btn-add-row:hover{ filter:brightness(0.97); }

  .totals-strip{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:16px;
    margin-top:18px;
    margin-bottom:26px;
  }
  .total-box{
    background: var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    padding:14px 16px;
  }
  .total-box .label{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
  .total-box .value{ font-family: var(--font-mono); font-size:17px; font-weight:600; color:var(--ink); }
  .total-box.alert .value{ color: var(--c-ros); }

  .panel{

    display:none;

    width:100%;

    animation:fade .35s ease;

    }
    
    .panel.active{
    
        display:block;
    
    }
      @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  .toast{
    position:fixed; bottom:26px; right:26px;
    background: var(--primary); color:#fff;
    padding:14px 20px; border-radius:8px;
    box-shadow: var(--shadow);
    font-size:13.5px; font-weight:500;
    display:flex; align-items:center; gap:10px;
    transform: translateY(20px); opacity:0;
    pointer-events:none;
    transition: all .25s ease;
    z-index:50;
  }
  .toast.show{ transform:translateY(0); opacity:1; }

  @media (max-width: 880px){
    .shell{ flex-direction:column; }
    .sidebar{ width:100%; height:auto; position:relative; }
    .nav{ display:flex; overflow-x:auto; padding:10px; gap:4px; }
    .nav-label{ display:none; }
    .nav-item{ flex-shrink:0; width:220px; }
    .main{ padding:22px 16px 40px; }
    .grid, .grid.cols-3{ grid-template-columns: 1fr; }
    .totals-strip{ grid-template-columns: 1fr; }
  }

  :focus-visible{ outline:2px solid var(--primary-light); outline-offset:2px; }