/* KAEL Bills V2.0.134 · Inicio del sistema visual unificado */
:root{
  --kb-radius-sm:10px;
  --kb-radius-md:14px;
  --kb-radius-lg:20px;
  --kb-control-h:42px;
  --kb-gap-1:6px;
  --kb-gap-2:10px;
  --kb-gap-3:14px;
  --kb-gap-4:20px;
  --kb-focus:0 0 0 3px rgba(42,130,255,.22);
}

button,input,select,textarea{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .12s ease,opacity .16s ease}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important;box-shadow:var(--kb-focus)!important}
button:not(:disabled):active{transform:translateY(1px)}

/* Acciones de factura: una sola cuadrícula y centro óptico real */
.row-actions{
  grid-template-columns:repeat(5,40px)!important;
  gap:8px!important;
  min-width:232px!important;
}
.row-actions .icon-btn{
  box-sizing:border-box!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
.row-actions .icon-btn svg{margin:auto!important}
.row-actions .copy-month-action{color:#79b7ff!important}
.row-actions .copy-month-action:hover{border-color:#2d8cff!important;background:rgba(45,140,255,.12)!important}
.row-actions .smart-convert-btn:hover,.row-actions .smart-state:hover{background:rgba(255,177,59,.11)!important}
.row-actions .delete-bill-action:hover{background:rgba(255,80,105,.11)!important;border-color:rgba(255,80,105,.58)!important}

/* Diálogos: proporción, ritmo y jerarquía compartida */
dialog{border-radius:var(--kb-radius-lg)!important}
dialog form{padding:22px!important}
.dialog-head{align-items:flex-start!important;margin-bottom:20px!important}
.dialog-head h3{line-height:1.14!important;margin-top:3px!important}
.dialog-head>button{width:38px!important;height:38px!important;min-width:38px!important;border-radius:11px!important;display:grid!important;place-items:center!important}
.form-grid{gap:16px 14px!important}
.form-grid label{gap:7px!important}
.form-grid input,.form-grid select,.form-grid textarea{min-height:42px!important;border-radius:11px!important}
.dialog-actions{gap:10px!important;margin-top:20px!important;padding-top:0!important}
.dialog-actions button{min-height:44px!important;border-radius:12px!important;padding-inline:18px!important}

/* Opciones de creación/copia de meses */
.copy-month-options,.month-create-options{
  display:grid!important;
  gap:10px!important;
  padding:14px!important;
  border:1px solid rgba(105,155,220,.22)!important;
  border-radius:13px!important;
  background:rgba(20,43,73,.48)!important;
}
.copy-month-options .check-row,.month-create-options .check-row{margin:0!important;min-height:24px!important;align-items:flex-start!important}
.copy-month-options small,.month-create-options small{display:block!important;margin-left:30px!important;line-height:1.5!important;color:var(--kb-muted)!important}
.smart-convert-note{margin-top:0!important;line-height:1.5!important}

/* PIN: última fila equilibrada y texto inferior con aire */
.pin-keypad{row-gap:12px!important;column-gap:12px!important}
.pin-keypad button{display:grid!important;place-items:center!important;text-align:center!important}
.pin-keypad .pin-key-back,.pin-keypad .pin-key-ok{font-size:10px!important;line-height:1.1!important;padding:0 8px!important}
.pin-setup-hint{margin-top:26px!important;min-height:22px!important;line-height:1.55!important}
.pin-dots{gap:14px!important;margin:16px auto 20px!important}

/* Texto secundario: mejor lectura sin competir con títulos */
small,.muted,.field-status{line-height:1.45}

@media(max-width:760px){
  dialog form{padding:18px!important}
  .form-grid{gap:14px!important}
  .row-actions{grid-template-columns:repeat(5,38px)!important;min-width:214px!important;gap:6px!important}
  .copy-month-options,.month-create-options{padding:12px!important}
  .pin-setup-hint{margin-top:24px!important;padding-inline:10px!important}
}