/* =========================================================
   KOVRA PASO 40 — FULLSCREEN RESPONSIVE FINAL
   Mantiene el diseño. Corrige uso del viewport, safe-area,
   jerarquía tipográfica y barra inferior en móviles/tablets.
========================================================= */

:root {
    --kovra-screen-pad-x: clamp(10px, 2.4vw, 24px);
    --kovra-screen-pad-top: 8px;
    --kovra-nav-h: 78px;
    --kovra-body-size: 13px;
    --kovra-small-size: 11.5px;
    --kovra-label-size: 12px;
    --kovra-meta-size: 10.5px;
}

html {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    background: #050807;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    width: 100%;
    min-width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0 !important;
    overflow-x: clip !important;
    background:
        radial-gradient(circle at 50% -10%, rgba(54,230,107,.085), transparent 30%),
        #050807;
    font-size: var(--kovra-body-size);
}

/* Usa el viewport completo: sin columnas negras laterales por max-width antiguos. */
.app,
.page,
.access-shell,
.register-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.app,
.page {
    padding-top: max(var(--kovra-screen-pad-top), env(safe-area-inset-top)) !important;
    padding-left: max(var(--kovra-screen-pad-x), env(safe-area-inset-left)) !important;
    padding-right: max(var(--kovra-screen-pad-x), env(safe-area-inset-right)) !important;
}

/* El contenido empieza inmediatamente debajo de cámara/notch, no en el centro de un espacio vacío. */
.access-shell,
.register-shell {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

.access-shell .brand-panel {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
    padding-top: 2px;
}

.access-shell .kovra-logo-login {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

.register-shell .register-header {
    margin-top: 0 !important;
}

/* En tablets el login usa el ancho en vez de dejar dos franjas vacías. */
@media (min-width: 700px) {
    .access-shell {
        display: grid !important;
        grid-template-columns: minmax(230px, .72fr) minmax(420px, 1.28fr);
        gap: clamp(22px, 4vw, 48px);
        align-items: start;
        padding-left: max(24px, env(safe-area-inset-left)) !important;
        padding-right: max(24px, env(safe-area-inset-right)) !important;
        padding-top: max(24px, env(safe-area-inset-top)) !important;
    }

    .access-shell .brand-panel {
        text-align: left;
        padding-top: 14px;
    }

    .access-shell .kovra-logo-login {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .access-shell .brand-panel p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .login-card {
        align-self: start;
    }
}

/* Pantallas con navegación fija: no duplicar 100dvh + barra. */
body:has(.bottom-nav) {
    min-height: 100dvh !important;
    padding-bottom: calc(var(--kovra-nav-h) + env(safe-area-inset-bottom)) !important;
}

body:has(.bottom-nav) > .app,
body:has(.bottom-nav) > main.app {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 10px !important;
}

/* Barra inferior de ancho real del dispositivo. */
.bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(var(--kovra-nav-h) + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    align-items: center !important;
    padding-top: 7px !important;
    padding-bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    border-radius: 0 !important;
}

.nav-button {
    min-width: 0;
    min-height: 48px !important;
    justify-content: center !important;
    gap: 3px !important;
}

.nav-button > span:last-child,
.nav-button small {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    font-weight: 650;
}

.nav-icon {
    font-size: 23px !important;
    line-height: 1 !important;
}

/* El FAB central queda centrado dentro de su columna; ya no flota demasiado arriba. */
.add-button {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 auto !important;
    align-self: center !important;
    translate: none !important;
    font-size: 32px !important;
    line-height: 1 !important;
}

.add-button:not(.open) {
    transform: none !important;
}

.add-button.open {
    transform: rotate(45deg) !important;
}

.quick-menu {
    bottom: calc(var(--kovra-nav-h) + 9px + env(safe-area-inset-bottom)) !important;
    width: min(calc(100% - 20px), 560px) !important;
}

.quick-menu button {
    min-height: 46px !important;
    font-size: 12.5px !important;
}

/* Jerarquía tipográfica consistente: compacta, pero no microscópica. */
small,
.brand-panel p,
.card-heading p,
.info-card p,
.security-note,
.schedule-note,
.calculation-note,
.loan-note-card p,
.warning-card p,
.voucher-footer p {
    font-size: var(--kovra-small-size) !important;
    line-height: 1.4 !important;
}

.eyebrow,
.topbar-title > span,
.section-heading > div > span,
.card-heading > span,
.brand-panel > span,
.register-header span,
.rules-title,
.loan-note-card > span {
    font-size: var(--kovra-meta-size) !important;
    line-height: 1.25 !important;
}

.field > span,
.note-field > span,
.late-fee-field > span,
.date-range label > span,
.form-card label > span {
    font-size: var(--kovra-label-size) !important;
}

.status,
.status-chip,
.count-badge,
.risk-badge,
.verified-chip,
.score-badge,
.code-chip,
.section-chip,
.private-chip,
.impact,
.page-chip,
.secure-chip,
.backup-badge,
.restore-badge,
.preview-version,
.account-chip,
.saved-chip,
.late-fee-preview-chip,
.estimate-chip,
.schedule-count,
.closed-chip {
    font-size: 10.5px !important;
}

.settings-item strong,
.collection-name-row strong,
.client-note-head strong,
.receipt-history-head strong,
.actions-card strong,
.loan-client strong,
.movement-client strong,
.closure-title strong {
    font-size: 13px !important;
}

.settings-item small,
.collection-meta,
.receipt-history-meta,
.client-note-footer,
.actions-card small,
.loan-client span,
.loan-due,
.movement-footer,
.portfolio-strip span,
.exposure-strip span,
.loan-finance span,
.movement-breakdown span,
.closure-breakdown span,
.aging-card span,
.aging-card small {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

.loan-finance strong,
.movement-breakdown strong,
.closure-breakdown strong,
.portfolio-strip strong,
.exposure-strip strong {
    font-size: 12px !important;
}

.section-header h2,
.section-heading h2 {
    font-size: 16px !important;
}

.summary-card p {
    font-size: 12px !important;
}

.summary-card h3 {
    font-size: clamp(19px, 5vw, 26px) !important;
}

.summary-card span,
.client-info span,
.payment-info span {
    font-size: 11px !important;
}

.client-info strong,
.payment-info strong {
    font-size: 13px !important;
}

/* iPhone/Safari: 16px evita auto-zoom al enfocar. */
@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        transform: none !important;
    }
}

/* Evita que componentes grid/flex provoquen anchura fantasma. */
.app *,
.page *,
.access-shell *,
.register-shell * {
    min-width: 0;
}

img,
canvas,
svg,
video {
    max-width: 100%;
}

/* Voucher en pantalla usa el ancho del dispositivo; la captura HD mantiene 1200px. */
.page .voucher:not(.capture-quality),
.page .compact-voucher:not(.capture-quality) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Comprobantes/documentos no crean esquinas negras por wrappers limitados. */
.receipt-shell,
.receipt-page,
.plan-page,
.backup-shell {
    max-width: none !important;
}

@media (max-width: 520px) {
    :root {
        --kovra-screen-pad-x: 9px;
    }

    .app,
    .page {
        padding-left: max(9px, env(safe-area-inset-left)) !important;
        padding-right: max(9px, env(safe-area-inset-right)) !important;
    }
}

@media (max-width: 360px) {
    .nav-button > span:last-child,
    .nav-button small {
        font-size: 10.75px !important;
    }

    .nav-icon {
        font-size: 22px !important;
    }
}

/* Último piso tipográfico: ningún texto funcional desnudo queda microscópico. */
.app span:not(.nav-icon):not(.card-icon):not(.quick-icon):not(.warning-icon):not(.empty-dashboard-icon),
.page span:not(.nav-icon):not(.card-icon):not(.quick-icon):not(.warning-icon),
.access-shell span,
.register-shell span {
    font-size: max(10.5px, 1em) !important;
}

.app p,
.app small,
.page p,
.page small,
.access-shell p,
.access-shell small,
.register-shell p,
.register-shell small {
    font-size: max(11px, 1em) !important;
}

.filter,
.live-chip,
.audit-chip,
.score-label,
.level-badge,
.agenda-total,
.company-label,
.installment-number-chip,
.small-value {
    font-size: 10.5px !important;
}

.history-empty,
.recommendation-card p,
.score-note,
.audit-note {
    font-size: 11px !important;
}

/* Valores y acciones financieras: presencia normal de app. */
#detailPeriodInterestDue,
#detailPeriodInterestPaid,
#detailPeriodInterestPending,
#detailPrincipalDue,
#detailPrincipalPaid,
#detailPrincipalPending,
#detailInstallmentState,
#detailLateFeePending,
#detailLateFeeDays,
#currentInstallmentNumber,
#currentInstallmentDue,
#periodInterestProgress,
#periodPrincipalProgress,
#installmentPendingTotal,
#installmentState {
    font-size: 11.5px !important;
}

#registerPaymentButton,
.logout-hero-button,
#copyLenderIdButton,
.quick-amounts button,
.share-button strong,
.print-button strong {
    font-size: 11.5px !important;
}

.section-empty,
.late-fee-note,
.formula-note,
.scheduled-payment-note,
#selectedBackupName,
.backup-help strong,
.preview-receipt em {
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.account-hero b,
.account-status b,
.settings-hero b {
    font-size: 10.5px !important;
}

#logoutButton,
#estimatedInstallmentCount,
.scheduled-payment-block .scheduled-payment-note,
#previewFooter,
.backup-guide strong {
    font-size: 11px !important;
}


/* Navegación inactiva visible sin competir con el verde activo. */
.nav-button:not(.active) { color:#8b948f !important; }

.safety-card strong,
.days-input b,
.auto-switch b,
#previewFooter {
    font-size: 11px !important;
}