:root {
    --green: #075E54;
    --green-dark: #054640;
    --accent: #0E8C4F;
    --accent-dark: #0A6E3D;
    --beige: #ECE5DD;
    --white: #FFFFFF;
    --text: #111B21;
    --muted: #8696a0;
    --line: #E9E3DA;
    --line-soft: #F0EBE3;
    --red: #D9534F;
    --avatar: #D7E7DE;
    --shadow: 0 8px 30px rgba(11, 20, 26, .12);
    --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--beige);
}

/* ===== Login / pantallas de invitado ===== */
.login-wrap {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--beige);
    padding: 24px;
}
.login-card {
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 360px;
    padding: 34px 28px 28px;
    text-align: center;
}
.login-logo {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.login-logo b {
    color: var(--white);
    font-size: 34px;
    font-weight: 800;
}
.login-card h1 {
    margin: 2px 0 2px;
    font-size: 22px;
    letter-spacing: -.3px;
}
.login-card .tag-line {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 24px;
}
.field {
    text-align: left;
    margin-bottom: 14px;
}
.field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin: 0 4px 6px;
}
.field .inp {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--beige);
    border-radius: 12px;
    padding: 13px 15px;
    border: 1.5px solid transparent;
    transition: .15s;
}
.field .inp:focus-within {
    border-color: var(--accent);
    background: var(--white);
}
.field .inp svg {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}
.field input {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font);
    font-size: 15px;
    width: 100%;
    color: var(--text);
}
.field input:focus {
    box-shadow: none;
}
.field-error {
    color: var(--red);
    font-size: 11.5px;
    margin: 5px 4px 0;
    text-align: left;
}
.btn-enter {
    width: 100%;
    border: 0;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font);
    font-size: 16px;
    padding: 15px;
    border-radius: 13px;
    cursor: pointer;
    margin-top: 8px;
    transition: .15s;
}
.btn-enter:hover {
    background: var(--accent-dark);
    color: var(--white);
}
.login-foot {
    margin-top: 18px;
    font-size: 11.5px;
    color: var(--muted);
}
.login-foot a {
    color: var(--green);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

/* ===== Layout autenticado (sidebar + topbar) ===== */
.desk-side {
    width: 248px;
    flex-shrink: 0;
    background: var(--green);
    color: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.side-head {
    padding: 22px 20px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 800;
    font-size: 20px;
}
.side-head b {
    font-size: 16px;
    display: block;
    line-height: 1.1;
}
.side-head span {
    font-size: 11px;
    color: #aecdc4;
}
.desk-nav {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.desk-nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border-radius: 10px;
    color: #dceae5;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}
.desk-nav a:hover {
    background: rgba(255, 255, 255, .07);
    color: #dceae5;
}
.desk-nav a.active {
    background: rgba(255, 255, 255, .16);
    color: var(--white);
}
.side-foot {
    padding: 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: 11px;
}
.side-foot .avd {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.side-foot b {
    font-size: 13px;
    display: block;
}
.side-foot button {
    border: 0;
    background: transparent;
    font-size: 11px;
    color: #aecdc4;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
}
.side-foot button:hover {
    text-decoration: underline;
}
.desk-side-offcanvas {
    width: 248px;
    background: var(--green);
    color: var(--white);
    display: flex;
    flex-direction: column;
}
.desk-side-offcanvas .offcanvas-close {
    position: absolute;
    top: 14px;
    right: 14px;
}
.mobile-topbar {
    height: 56px;
    flex-shrink: 0;
    background: var(--green);
    color: var(--white);
    align-items: center;
    gap: 14px;
    padding: 0 16px;
}
.mobile-topbar b {
    font-size: 16px;
}
.mobile-menu-btn {
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mobile-menu-btn svg {
    width: 20px;
    height: 20px;
}
.desk-main {
    flex: 1;
    width: 100%;
    background: var(--beige);
    min-width: 0;
}
.desk-topbar {
    height: 58px;
    flex-shrink: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 26px;
    font-size: 17px;
    font-weight: 700;
}
.desk-content {
    padding: 26px;
}

/* ===== Tarjetas / paneles ===== */
.cards {
    display: grid;
    gap: 14px;
}
.cards.three {
    grid-template-columns: repeat(3, 1fr);
}
.cards.four {
    grid-template-columns: repeat(4, 1fr);
}
.cards.five {
    grid-template-columns: repeat(5, 1fr);
}
.stat {
    background: var(--white);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
}
.stat .lab {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 9px;
}
.stat .val {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
}
.stat.warn .val {
    color: var(--red);
}
.stat .sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 6px;
}
.section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 26px 2px 12px;
}
.panel {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 13px;
}
.panel h3 {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}
.panel h3 .sub {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--muted);
    font-size: 11.5px;
    margin-top: 4px;
}
.tag {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}
.tag.ok {
    color: var(--green-dark);
    border: 1px solid #cfe6da;
}
.tag.late {
    color: var(--red);
    border: 1px solid #f0cfcd;
}

/* ===== Botones reutilizables ===== */
.btn-primary {
    border: 0;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font);
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: .15s;
}
.btn-primary:hover {
    background: var(--accent-dark);
    color: var(--white);
}

/* ===== Lista de clientes ===== */
.list-head {
    padding: 14px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
}
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--beige);
    border-radius: 999px;
    padding: 11px 15px;
}
.search svg {
    width: 17px;
    height: 17px;
    color: var(--muted);
    flex-shrink: 0;
}
.search input {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    width: 100%;
    color: var(--text);
}
.chips {
    display: flex;
    gap: 8px;
    margin-top: 11px;
    flex-wrap: wrap;
}
.chip {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--muted);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.chip.on {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}
.btn-new {
    margin-top: 11px;
    width: 100%;
    border: 0;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font);
    font-size: 14.5px;
    padding: 13px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
}
.btn-new:hover {
    background: var(--accent-dark);
    color: var(--white);
}
.btn-new:disabled {
    background: #e3e8e5;
    color: #a8b3ae;
    cursor: not-allowed;
}
.btn-new svg {
    width: 18px;
    height: 18px;
}
.list-scroll {
    background: var(--white);
    border-radius: 0 0 14px 14px;
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-top: 0;
}
.client {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: 13px;
    padding: 13px 14px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: var(--text);
}
.client:hover {
    border-color: var(--line);
    box-shadow: 0 3px 10px rgba(11, 20, 26, .06);
}
.av {
    border-radius: 50%;
    background: var(--avatar);
    color: var(--green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    font-size: 16px;
}
.client .info {
    flex: 1;
    min-width: 0;
}
.client .info b {
    font-size: 15px;
    display: block;
    font-weight: 600;
    line-height: 1.2;
}
.client .info .debt {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}
.client .info .debt strong {
    color: var(--text);
    font-weight: 600;
}
.chev {
    width: 19px;
    height: 19px;
    color: #cbd3cf;
    flex-shrink: 0;
}
.empty-detail {
    text-align: center;
    color: var(--muted);
    padding: 60px 20px;
    font-size: 14px;
}
.empty-detail svg {
    width: 64px;
    height: 64px;
    opacity: .3;
    margin-bottom: 10px;
}

/* ===== Ficha de cliente ===== */
.ficha-hero {
    background: var(--green);
    color: var(--white);
    padding: 24px 22px;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
.big-av {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 22px;
    flex-shrink: 0;
}
.ficha-hero h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.ficha-hero .meta {
    font-size: 12.5px;
    color: #c7e6dc;
    margin-top: 5px;
}
.ficha-body {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 18px 20px;
}
.kv {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}
.kv:last-child {
    border-bottom: 0;
}
.kv .k {
    color: var(--muted);
}
.kv .v {
    font-weight: 600;
    text-align: right;
}
.kv .v.saldo {
    font-size: 17px;
    font-weight: 800;
}
.kv .v.due {
    color: var(--red);
}
.kv .v.interes {
    color: var(--accent-dark);
}
.panel-multa {
    border: 1px solid #f0cfcd;
    background: #fdf6f6;
}
.panel-multa h3 {
    color: var(--red);
}
.multa-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fceaea;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 12px;
}
.multa-banner .l {
    font-size: 12.5px;
    color: #9a3b38;
    font-weight: 600;
}
.multa-banner .l b {
    display: block;
    font-size: 13.5px;
    color: var(--red);
}
.multa-banner .d {
    font-size: 24px;
    font-weight: 800;
    color: var(--red);
    line-height: 1;
}
.multa-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3dede;
    font-size: 13.5px;
}
.multa-day:last-child {
    border-bottom: 0;
}
.multa-day .dd {
    color: var(--muted);
}
.multa-day .dd b {
    color: var(--text);
    font-weight: 600;
    margin-right: 6px;
}
.multa-day .dm {
    font-weight: 700;
    color: var(--red);
}
.panel-interes-atrasado {
    border: 1px solid #f0d6b0;
    background: #fef9f2;
}
.panel-interes-atrasado h3 {
    color: #b47d3a;
}
.interes-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f3e8d8;
    font-size: 13.5px;
}
.interes-row:last-child {
    border-bottom: 0;
}
.interes-row .il {
    color: var(--muted);
}
.interes-row .il b {
    color: var(--text);
    font-weight: 600;
    margin-right: 6px;
}
.interes-row .im {
    font-weight: 700;
    color: #b47d3a;
}
.actions-main {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.actions-main .btn {
    flex: 1;
    min-width: 120px;
}
.actions-secondary {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
}
.btn {
    border: 0;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-sin-icono {
    background: var(--accent);
    color: var(--white);
    border: 0;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
}
.btn-sin-icono:disabled,
.btn:disabled {
    background: #e3e8e5;
    color: #a8b3ae;
    cursor: not-allowed;
}
.btn-ghost-sm {
    background: var(--white);
    color: var(--green-dark);
    border: 1px solid var(--line);
    padding: 8px 16px;
    font-size: 12.5px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}
.btn-ghost-sm:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.btn-danger-sm {
    background: var(--white);
    color: var(--red);
    border: 1px solid #f0cfcd;
    padding: 8px 16px;
    font-size: 12.5px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
}
.btn-danger-sm:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.note-locked {
    font-size: 12px;
    color: var(--muted);
    margin: -4px 2px 14px;
    line-height: 1.4;
}
.hist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.hist-row:last-child {
    border-bottom: 0;
}
.hist-row .h-l b {
    font-size: 14px;
    font-weight: 600;
    display: block;
}
.hist-row .h-l span {
    font-size: 12px;
    color: var(--muted);
}
.hist-row .h-r {
    text-align: right;
}
.hist-row .h-amt {
    font-weight: 700;
    font-size: 14.5px;
}
.hist-row .h-split {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
}
.hist-row .h-split .int {
    color: var(--accent-dark);
    font-weight: 600;
}
.cedula {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
}
.cedula svg,
.cedula img {
    display: block;
    width: 100%;
    height: auto;
}
.cedula .cap {
    font-size: 11px;
    color: var(--muted);
    padding: 8px 12px;
    background: #fafafa;
    border-top: 1px solid var(--line-soft);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--green-dark);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}
.back-link svg {
    width: 16px;
    height: 16px;
}

/* ===== Formulario de cliente ===== */
.form-container {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}
.form-field {
    margin-bottom: 10px;
}
.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #6b7c86;
    margin: 0 2px 2px;
}
.form-container h3 {
    color: #6b7c86;
}
.form-field .ctrl {
    display: flex;
    align-items: center;
    background: var(--beige);
    border-radius: 10px;
    padding: 11px 14px;
    border: 1.5px solid transparent;
    transition: .15s;
    gap: 8px;
}
.form-field .ctrl:focus-within {
    border-color: var(--accent);
    background: var(--white);
}
.form-field .ctrl .pre {
    font-weight: 700;
    color: var(--muted);
}
.form-field .ctrl svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
}
.form-field input,
.form-field select {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--font);
    font-size: 15px;
    width: 100%;
    color: var(--text);
    font-weight: 600;
}
.freq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.freq-opt {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    background: var(--white);
}
.freq-opt:hover {
    border-color: var(--accent);
}
.freq-opt.on {
    border-color: var(--accent);
    background: #f4faf7;
}
.freq-opt b {
    display: block;
    font-size: 13px;
}
.freq-opt span {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600;
}
.freq-opt input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.35;
}
.switch-row input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--accent);
    margin-top: 1px;
    cursor: pointer;
}
.hidden-box {
    display: none;
    border-left: 3px solid var(--accent);
    padding-left: 14px;
    margin: 2px 0 6px;
}
.hidden-box.show {
    display: block;
}
.form-divider {
    height: 1px;
    background: var(--line);
    margin: 16px 0 4px;
}
.form-note {
    font-size: 11px;
    color: var(--muted);
    margin: 0 2px 5px;
    line-height: 1.3;
}
.btn-save {
    width: 100%;
    border: 0;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font);
    font-size: 15px;
    padding: 13px;
    border-radius: 13px;
    cursor: pointer;
    margin-top: 6px;
}
.btn-save:hover {
    background: var(--accent-dark);
    color: var(--white);
}
.cedula-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.upl-rect-wrap {
    display: block;
    cursor: pointer;
}
.upl-rect {
    width: 100%;
    height: 118px;
    border-radius: 12px;
    border: 2px dashed var(--line);
    background: var(--beige) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
}
.upl-rect.has {
    border-style: solid;
    border-color: var(--green);
}
.upl-rect .ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.upl-rect .ph svg {
    width: 26px;
    height: 26px;
}
.upl-rect .ph small {
    font-size: 11px;
}

/* ===== Editar / Inactivos / Reactivar ===== */
a.btn-ghost-sm {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-reactivar {
    background: var(--white);
    color: var(--accent);
    border: 1.5px solid var(--accent);
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-reactivar:hover {
    background: #f4faf7;
}

.inactivos-link {
    text-align: center;
    padding-top: 14px;
    font-size: 12px;
}
.inactivos-link a {
    color: var(--muted);
    text-decoration: none;
}
.inactivos-link a:hover {
    color: var(--green-dark);
    text-decoration: underline;
}

/* Banner de cliente inactivo en la ficha */
.banner-inactivo {
    background: #f5f5f3;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.4;
}

/* Chip de inactivos — visualmente diferenciado del resto */
.chip-inactivos {
    border-style: dashed;
    color: #999;
}
.chip-inactivos:hover {
    border-color: var(--muted);
    color: var(--muted);
}
/* Chip "↻ Refrescar" — limpia búsqueda y filtros, siempre visible */
.chip-refrescar {
    border-color: var(--green);
    color: var(--green);
    font-weight: 600;
}
.chip-refrescar:hover {
    background: var(--green);
    color: var(--white);
}

/* Advertencia de deuda en el modal de desactivar */
.warn-deuda {
    background: #fff9ed;
    border: 1px solid #f0c040;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #7a4f00;
    line-height: 1.45;
}
.warn-deuda strong {
    color: #5a3800;
    display: block;
    margin-bottom: 4px;
}

/* Notificación flash de éxito */
.flash-ok {
    background: #f4faf7;
    color: var(--accent-dark);
    border: 1px solid #cfe6da;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ===== Tag "Sin préstamo" ===== */
.tag.none {
    color: var(--muted);
    border: 1px solid var(--line);
}

/* ===== Tarjetas "Préstamos anteriores" en la ficha ===== */
.hist-anterior {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    color: var(--text);
}

.hist-anterior:last-child {
    border-bottom: none;
}

.hist-anterior:hover .ha-monto {
    color: var(--accent-dark);
}

.ha-info {
    flex: 1;
    min-width: 0;
}

.ha-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.ha-tag {
    font-size: 10px;
    padding: 3px 9px;
}

.ha-monto {
    font-size: 15px;
    font-weight: 700;
    transition: color .15s;
}

.ha-freq {
    font-size: 12.5px;
    color: var(--muted);
}

.ha-fechas {
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
}

/* ===== Formulario de pago — tabla de conceptos ===== */

/* Encabezado de columnas */
.pago-tabla-head {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.pago-tabla-head span:nth-child(2),
.pago-tabla-head span:nth-child(3) {
    text-align: right;
    min-width: 90px;
}

/* Fila de un concepto */
.pago-fila {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.pago-fila:last-of-type {
    border-bottom: none;
}
.pago-fila-abono {
    border-bottom: none;
}

/* Nombre del concepto */
.pago-concepto {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.pago-concepto-multa  { color: var(--red); }
.pago-concepto-atr    { color: #b47d3a; }
.pago-nota-concepto {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
}

/* Monto adeudado */
.pago-adeuda {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
    min-width: 80px;
    white-space: nowrap;
}
.pago-adeuda-multa { color: var(--red); }
.pago-adeuda-atr   { color: #b47d3a; }

/* Contenedor del input + prefijo ₡ */
.pago-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 110px;
    max-width: 130px;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.pago-input-wrap .pre {
    padding: 0 6px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    background: none;
}
.pago-input {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    padding: 7px 8px 7px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}
.pago-input:focus {
    outline: none;
}
.pago-input-wrap:focus-within {
    border-color: var(--accent);
}

/* Nota de interés parcial */
.pago-nota-parcial {
    color: #b47d3a;
    font-size: 12px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #fef9f0;
    border-radius: 7px;
    border: 1px solid #e8c97a;
}

/* ===== Formulario de pago ===== */
.pago-adelantado {
    background: #f4faf7;
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--accent-dark);
    font-weight: 500;
    margin-bottom: 14px;
    line-height: 1.5;
}

.pago-adelantado strong {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

a.btn-sin-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.pago-total-panel {
    background: #f4faf7;
    border-color: var(--accent);
}

.pago-total-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pago-currency {
    font-size: 15px;
    color: var(--muted);
    font-weight: 700;
}

.pago-total-num {
    font-size: 34px;
    font-weight: 800;
    color: var(--accent-dark);
    line-height: 1;
    letter-spacing: -.5px;
}

/* ===== Dashboard accionable ===== */

/* Contenedor centrado: se estrecha en pantallas grandes, ocupa todo en móvil */
.dash-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Título "Atrasados" en rojo */
.dash-title--late {
    color: var(--red);
}

/* Badge de conteo junto al título (ej. "Atrasados ●3") */
.dash-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 6px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1;
}

/* Panel con borde rojo suave para la lista de atrasados */
.dash-panel--late {
    border-color: #f0cfcd;
}

/* Fila de lista dentro de un panel (atrasados y por cobrar) */
.dash-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    color: var(--text);
}
.dash-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.dash-row:hover .info b {
    color: var(--accent-dark);
}

/* Info ocupa todo el espacio disponible → empuja el monto hasta la derecha */
.dash-row .info {
    flex: 1;
    min-width: 0;
}

/* Avatar más compacto dentro de las filas del dashboard */
.dash-row .av {
    width: 40px;
    height: 40px;
    font-size: 14px;
    flex-shrink: 0;
}

/* Avatares con tinte según urgencia */
.dash-av-late   { background: #fceaea; color: var(--red); }
.dash-av-cobrar { background: #fff9ed; color: #b47d3a; }

/* Monto alineado a la derecha */
.dash-total {
    text-align: right;
    flex-shrink: 0;
}
.dash-total span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.dash-total small {
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
}
.dash-total--late span   { color: var(--red); }
.dash-total--cobrar span { color: #b47d3a; }

/* Mensaje vacío dentro de panel */
.dash-empty {
    display: block;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

/* Tarjetita de pagos: el valor puede ser texto largo (₡150.000),
   se reduce el tamaño de fuente para que quepa bien */
.stat--pago .val {
    font-size: 20px;
    letter-spacing: -.3px;
}

@media (max-width: 767.98px) {
    .cards.three,
    .cards.four,
    .cards.five {
        grid-template-columns: 1fr;
    }
    .desk-content {
        padding: 16px;
    }
    .desk-topbar {
        padding: 0 16px;
        height: 50px;
        font-size: 15px;
    }
    .ficha-hero {
        padding: 18px 16px;
        flex-wrap: wrap;
    }
    .ficha-body {
        padding: 16px;
    }
    .list-head {
        padding: 12px;
    }
    .list-scroll {
        padding: 12px;
    }
    .actions-main,
    .actions-secondary {
        flex-direction: column;
    }
    .actions-main .btn,
    .actions-main a.btn-sin-icono,
    .actions-secondary button,
    .actions-secondary a.btn-ghost-sm {
        width: 100%;
        text-align: center;
    }
    .multa-banner {
        flex-wrap: wrap;
        gap: 6px;
    }
    .panel {
        padding: 14px;
    }
    .freq-grid {
        gap: 6px;
    }
    .cedula-grid {
        grid-template-columns: 1fr;
    }
    /* Tabla de conceptos del formulario de pago: columna nombre en full width,
       monto y campo de pago en la segunda línea */
    .pago-fila {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .pago-concepto {
        grid-column: 1 / -1;
    }
    .pago-adeuda {
        min-width: unset;
        font-size: 12px;
    }
    .pago-input-wrap {
        min-width: 90px;
    }
    .pago-tabla-head span:nth-child(1) {
        display: none;
    }
}

/* ===== Historial global de pagos (/pagos) ===== */

/* Fila de fecha range en los filtros */
.hist-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.hist-date-input {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    background: var(--input-bg, #fff);
    color: var(--text);
    min-width: 120px;
    flex: 1;
}
.hist-date-sep {
    color: var(--muted);
    font-size: 13px;
    flex-shrink: 0;
}
.hist-btn-filtrar {
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.hist-btn-filtrar:hover { background: var(--accent-dark); }
.hist-btn-limpiar {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    flex-shrink: 0;
}
.hist-btn-limpiar:hover { color: var(--text); border-color: var(--text); }

/* Barra de totales filtrados */
.hist-totales-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 10px 16px 0;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.ht-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 14px;
    gap: 1px;
    flex: 1;
    min-width: 80px;
}
.ht-stat:first-child { padding-left: 0; }
.ht-sep {
    width: 1px;
    height: 32px;
    background: var(--line);
    flex-shrink: 0;
}
.ht-val {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.ht-lbl {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Panel contenedor de la lista */
.gh-panel {
    padding: 0 14px;
    margin-top: 10px;
}

/* Ítem individual de la lista */
.gh-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.gh-item:last-child { border-bottom: none; }

/* Línea superior: fecha + cliente + badge + total */
.gh-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.gh-fecha {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.gh-cliente {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-dark);
    text-decoration: none;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gh-cliente:hover { text-decoration: underline; }
.gh-cliente--vacio { color: var(--muted); }
.gh-total {
    font-weight: 700;
    font-size: 14.5px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* Badge "Saldado" */
.tag-saldo {
    background: #e8f0fe;
    color: #1a56db;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Línea inferior: desglose de conceptos */
.gh-split {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    font-size: 12px;
    color: var(--muted);
    margin-top: 3px;
    padding-left: 0;
}
.gh-split span::before { content: '· '; }
.gh-split span:first-child::before { content: ''; }
.gh-int    { color: var(--accent-dark); font-weight: 600; }
.gh-multa  { color: var(--red); }
.gh-atr    { color: #b47d3a; }
.gh-metodo { color: var(--muted); font-style: italic; }

/* Paginación */
.gh-paginacion {
    padding: 14px 16px 20px;
}
.gh-paginacion .pagination {
    margin: 0;
    gap: 4px;
    flex-wrap: wrap;
}

/* ─── Responsive ─── */
@media (max-width: 520px) {
    .hist-date-row { gap: 4px; }
    .hist-date-input { min-width: 100px; font-size: 12px; }
    .hist-totales-bar { padding: 8px 10px; gap: 0; }
    .ht-stat { padding: 0 8px; min-width: 60px; }
    .ht-val { font-size: 13px; }
    .gh-fecha { display: none; }
    .gh-total { font-size: 13.5px; }
}

/* ===== Flash de error ===== */
.flash-err {
    background: #fff7f7;
    color: var(--red);
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ===== Gestión de usuarios ===== */
.user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}
.user-row:last-child { border-bottom: none; }
.user-info { flex: 1; min-width: 0; }
.user-info b { display: block; font-size: 15px; }
.user-email { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-del-user {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1.5px solid var(--red);
    background: transparent;
    color: var(--red);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.btn-del-user:hover:not(:disabled) { background: var(--red); color: #fff; }
.btn-del-user:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--muted); color: var(--muted); }

/* ═══════════════════════════════════════════════════════
   CLASES FALTANTES / CORRECCIONES BASE
═══════════════════════════════════════════════════════ */

/* Botón primario ancho completo (saldar cuenta) */
.btn-primary-full {
    width: 100%;
    border: 0;
    background: var(--accent);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font);
    font-size: 15px;
    padding: 13px;
    border-radius: 13px;
    cursor: pointer;
    margin-top: 6px;
    transition: filter 0.15s;
}
.btn-primary-full:hover { filter: brightness(0.9); color: var(--white); }

/* Botón con apariencia de enlace (verificación de email en perfil) */
.btn-link {
    border: 0;
    background: transparent;
    color: var(--green);
    font-size: inherit;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.btn-link:hover { color: var(--green-dark); }

/* historial en ficha: .h-l puede encoger sin desbordarse */
.hist-row .h-l { min-width: 0; overflow: hidden; }
.hist-row .h-l span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — stats 2 columnas entre 480 y 767px
═══════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767.98px) {
    .cards.five,
    .cards.four,
    .cards.three {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — ajustes adicionales ≤767px
═══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Dashboard: la línea de deuda puede ser larga */
    .dash-row .info .debt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11.5px;
    }
    /* Stat: reducir fuente para que quepan colones largos en 1 línea */
    .stat .val       { font-size: 22px; }
    .stat--pago .val { font-size: 16px; }
    /* Ficha: nombre largo necesita word-break */
    .ficha-hero h2   { font-size: 17px; word-break: break-word; }
    .big-av          { width: 50px; height: 50px; font-size: 18px; }
    /* Total del pago: fuente más chica */
    .pago-total-num  { font-size: 26px; }
    /* Historial global: quitar margen lateral extra */
    .hist-totales-bar { margin: 10px 0 0; }
    /* Intereses atrasados: monto a la derecha al wrappear */
    .interes-row     { flex-wrap: wrap; }
    .interes-row .im { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — móvil estrecho ≤479px
═══════════════════════════════════════════════════════ */
@media (max-width: 479px) {
    .desk-content    { padding: 10px; }
    .panel           { padding: 11px; }
    .ficha-body      { padding: 11px 12px; }
    .ficha-hero      { padding: 15px 13px; gap: 10px; }
    .kv              { font-size: 13px; gap: 4px 8px; }
    /* el campo de fecha de historial no necesita separador visual */
    .hist-date-sep   { display: none; }
    .hist-date-input { flex: 1 1 130px; }
    /* la línea de chips se puede comprimir más */
    .chip            { font-size: 11.5px; padding: 6px 10px; }
    /* botón "Nuevo usuario" / "Nuevo cliente" */
    .btn-new         { font-size: 13.5px; }
}