/* ================================================================
   BAJAJ - TODOMOTOS | Portal Cliente CSS — Rediseño Completo
   Mobile-first, app-like en móvil, premium en desktop
   ================================================================ */

:root {
    --azul:        #1A4FAB;
    --azul-dark:   #0D2E6E;
    --azul-light:  #EBF0FB;
    --verde:       #16A34A;
    --rojo:        #B91C1C;
    --amarillo:    #D97706;
    --texto:       #1E293B;
    --texto-soft:  #64748B;
    --borde:       #E2E8F0;
    --portal-bg:   #F1F5F9;
    --card-shadow: 0 4px 20px rgba(13,46,110,.08);
    --radius:      14px;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--portal-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────── */
.portal-header {
    background: linear-gradient(135deg, var(--azul-dark) 0%, #1a3f8a 100%);
    box-shadow: 0 2px 16px rgba(0,0,0,.2);
    position: sticky; top: 0; z-index: 100;
}
.portal-header-inner {
    display: flex; align-items: center; gap: 16px;
    max-width: 1100px; margin: 0 auto;
    padding: 12px 24px;
}
.portal-logo { text-decoration:none; display:flex; align-items:center; }
.portal-logo img { max-height:36px; }
.portal-logo-text { color:#fff; font-size:20px; font-weight:800; letter-spacing:.5px; }

/* Desktop nav */
.portal-nav-desktop { display:flex; gap:4px; margin-left:24px; }
.portal-nav-link {
    color: rgba(255,255,255,.7); text-decoration:none;
    padding: 8px 16px; border-radius: 8px; font-size:13px; font-weight:500;
    transition: all .2s;
}
.portal-nav-link:hover, .portal-nav-link.active {
    background: rgba(255,255,255,.15); color:#fff;
}

/* Desktop user */
.portal-user-desktop { display:flex; align-items:center; gap:10px; margin-left:auto; }
.portal-user-name { color:rgba(255,255,255,.8); font-size:13px; }
.portal-btn-salir {
    background: rgba(255,255,255,.12); color:#fff;
    border:1px solid rgba(255,255,255,.2); border-radius:8px;
    padding: 6px 14px; font-size:13px; text-decoration:none;
    transition: background .2s;
}
.portal-btn-salir:hover { background: rgba(255,255,255,.25); }

/* Mobile user avatar */
.portal-user-mobile { display:none; margin-left:auto; }
.portal-user-avatar {
    width:36px; height:36px; border-radius:50%;
    background: rgba(255,255,255,.2); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:16px;
}

/* ── Flash ──────────────────────────────────────────────── */
.portal-flash {
    padding: 14px 20px; font-size:14px;
    border-left: 4px solid; display:flex; align-items:center;
    justify-content:space-between; gap:12px;
}
.portal-flash-success { background:#DCFCE7; border-color:#22C55E; color:#166534; }
.portal-flash-error   { background:#FEE2E2; border-color:#EF4444; color:#991B1B; }
.portal-flash-warning { background:#FEF9C3; border-color:#EAB308; color:#854D0E; }
.portal-flash-info    { background:#DBEAFE; border-color:#3B82F6; color:#1E40AF; }
.flash-close {
    background:none; border:none; cursor:pointer;
    font-size:20px; line-height:1; opacity:.6; color:inherit;
}

/* ── Main ───────────────────────────────────────────────── */
.portal-main { padding: 28px 0 40px; min-height: calc(100vh - 180px); }
.portal-container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* ── Page titles ────────────────────────────────────────── */
.portal-page-title { font-size:20px; font-weight:700; color:var(--azul-dark); margin-bottom:4px; }
.portal-page-subtitle { color:var(--texto-soft); font-size:13px; margin-bottom:20px; }
.portal-section-title { font-size:16px; font-weight:700; color:var(--azul-dark); margin-bottom:16px; }

/* ── Welcome ────────────────────────────────────────────── */
.portal-welcome {
    display: flex; align-items: center; justify-content:space-between;
    margin-bottom: 24px; gap:16px; flex-wrap:wrap;
}
.portal-welcome h2 { font-size:22px; font-weight:700; color:var(--azul-dark); }
.portal-welcome p  { color:var(--texto-soft); font-size:13px; margin-top:2px; }

.portal-btn-download {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--azul); color:#fff; border-radius:10px;
    padding:10px 20px; font-size:14px; font-weight:600;
    text-decoration:none; transition: all .2s;
}
.portal-btn-download:hover { background:var(--azul-dark); transform:translateY(-1px); }

/* ── Alerts ─────────────────────────────────────────────── */
.portal-alert {
    display: flex; align-items:flex-start; gap:12px;
    padding: 14px 18px; border-radius: var(--radius);
    margin-bottom: 16px; border-left: 4px solid;
}
.portal-alert-warning { background:#FEF9C3; border-color:#EAB308; color:#92400E; }
.portal-alert-danger  { background:#FEE2E2; border-color:#EF4444; color:#991B1B; }
.portal-alert-info    { background:#DBEAFE; border-color:#3B82F6; color:#1E40AF; }
.alert-icon { font-size:20px; flex-shrink:0; }
.alert-sub { font-size:13px; }

/* ── Crédito Cards ──────────────────────────────────────── */
.creditos-grid { display:grid; grid-template-columns:1fr; gap:20px; }

.credito-card {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 24px; border:1px solid var(--borde);
    transition: transform .2s, box-shadow .2s;
}
.credito-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(13,46,110,.12); }
.credito-card--atrasado { border-left:4px solid var(--rojo); }

.credito-card-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:16px; gap:12px;
}
.credito-card-moto { font-size:28px; margin-bottom:4px; }
.credito-card-title { font-size:16px; font-weight:700; color:var(--azul-dark); }
.credito-card-subtitle { font-size:12px; color:var(--texto-soft); margin-top:2px; }

/* Progress */
.progress-section { margin-bottom:16px; }
.progress-label {
    display:flex; justify-content:space-between;
    font-size:12px; color:var(--texto-soft); margin-bottom:6px;
}
.progress-label-saldo { margin-top:8px; font-size:13px; }
.progress-pct { font-weight:700; color:var(--azul); }
.progress-bar {
    height:8px; background:var(--borde); border-radius:999px; overflow:hidden;
}
.progress-fill {
    height:100%; background:linear-gradient(90deg, var(--azul), #3B82F6);
    border-radius:999px; transition:width .6s ease;
}
.saldo-valor { font-weight:700; }
.saldo-rojo { color:var(--rojo); }
.saldo-verde { color:var(--verde); }

/* Stats */
.credito-stats {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:12px; margin:16px 0;
    background:var(--portal-bg); border-radius:10px; padding:14px;
}
.credito-stat { text-align:center; }
.stat-value { font-size:16px; font-weight:700; color:var(--azul-dark); }
.stat-label { font-size:11px; color:var(--texto-soft); margin-top:2px; }

/* Proxima cuota */
.proxima-cuota {
    display:flex; align-items:center; gap:10px;
    background:var(--azul-light); border-radius:10px; padding:12px 16px;
    font-size:13px; color:var(--azul-dark); margin-bottom:16px;
}
.proxima-vencida { background:#FEE2E2; color:var(--rojo); }
.proxima-icon { font-size:18px; }
.proxima-label { color:var(--texto-soft); margin-right:4px; }
.proxima-tag-vencida {
    background:var(--rojo); color:#fff; padding:2px 8px;
    border-radius:4px; font-size:11px; font-weight:700; margin-left:8px;
}
.proxima-tag-pronto {
    background:var(--amarillo); color:#fff; padding:2px 8px;
    border-radius:4px; font-size:11px; font-weight:700; margin-left:8px;
}

/* Actions */
.credito-acciones { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* ── Pagos list ─────────────────────────────────────────── */
.pagos-list { display:flex; flex-direction:column; gap:12px; }
.pago-card {
    background:#fff; border-radius:var(--radius);
    box-shadow:var(--card-shadow); padding:18px 20px;
    border:1px solid var(--borde);
}
.pago-card--rechazado { border-left:4px solid var(--rojo); }
.pago-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pago-monto    { font-size:20px; font-weight:700; color:var(--azul-dark); }
.pago-detalle  { font-size:13px; color:var(--texto-soft); margin-top:2px; }
.pago-fecha    { font-size:12px; color:var(--texto-soft); margin-top:2px; }
.pago-ref      { font-size:12px; color:var(--texto-soft); margin-top:8px; }
.pago-ref code { background:var(--portal-bg); padding:2px 6px; border-radius:4px; font-size:12px; }
.pago-rechazo  {
    font-size:13px; color:var(--rojo); background:#FEE2E2;
    padding:10px 14px; border-radius:8px; margin-top:10px;
}
.pago-recibo { margin-top:10px; }

/* ── Badges ─────────────────────────────────────────────── */
.portal-badge {
    display:inline-block; padding:4px 12px; border-radius:999px;
    font-size:12px; font-weight:600; white-space:nowrap;
}
.badge-green  { background:#DCFCE7; color:#166534; }
.badge-yellow { background:#FEF9C3; color:#854D0E; }
.badge-red    { background:#FEE2E2; color:#991B1B; }
.badge-gray   { background:#F1F5F9; color:#475569; }
.badge-blue   { background:#DBEAFE; color:#1E40AF; }

/* ── Botones ────────────────────────────────────────────── */
.portal-btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--azul); color:#fff;
    border:none; border-radius:10px; padding:12px 22px;
    font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
    transition: all .2s; min-height:44px;
}
.portal-btn-primary:hover { background:var(--azul-dark); transform:translateY(-1px); }

.portal-btn-large { padding:14px 28px; font-size:15px; width:100%; }

.portal-btn-outline {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:transparent; border:1.5px solid var(--azul); color:var(--azul);
    border-radius:10px; padding:10px 20px;
    font-size:14px; font-weight:600; text-decoration:none;
    transition: all .2s; min-height:44px;
}
.portal-btn-outline:hover { background:var(--azul); color:#fff; }

.portal-btn-small { padding:6px 14px; font-size:12px; min-height:36px; }

.portal-btn-cancel {
    display:block; text-align:center; margin-top:12px;
    color:var(--texto-soft); text-decoration:none; font-size:14px; padding:10px;
}
.portal-btn-cancel:hover { color:var(--azul); }

.portal-back {
    display:inline-flex; align-items:center; gap:4px;
    color:var(--texto-soft); text-decoration:none;
    font-size:13px; margin-bottom:16px; padding:6px 0;
}
.portal-back:hover { color:var(--azul); }

/* ── Info card (pagar) ──────────────────────────────────── */
.portal-info-card {
    background:#fff; border-radius:var(--radius);
    box-shadow:var(--card-shadow); padding:20px;
    border:1px solid var(--borde);
}
.portal-info-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; border-bottom:1px solid var(--borde); font-size:14px;
}
.portal-info-row:last-child { border-bottom:none; }
.portal-info-row--mora { color:var(--rojo); }
.portal-info-row--total { font-size:15px; }
.pagar-resumen-titulo { font-weight:700; color:var(--azul-dark); margin-bottom:8px; font-size:14px; }
.pagar-total { font-size:20px; color:var(--azul-dark); }
.pagar-container { max-width:520px; margin:0 auto; }
.pagar-resumen { margin-bottom:24px; }
.pagar-cuentas { margin-bottom:24px; }
.pagar-cuentas-data { font-family:inherit; white-space:pre-wrap; margin-top:6px; font-size:13px; }
.pagar-submit { margin-top:8px; }

/* ── Forms ──────────────────────────────────────────────── */
.form-group   { margin-bottom:18px; }
.form-label   { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--texto); }
.form-control {
    width:100%; padding:12px 14px; font-size:14px;
    border:1.5px solid var(--borde); border-radius:10px;
    background:#fff; color:var(--texto); outline:none;
    transition: border-color .2s, box-shadow .2s;
    font-family:inherit;
}
.form-control-lg { padding:14px 16px; font-size:16px; }
.form-control:focus { border-color:var(--azul); box-shadow:0 0 0 3px rgba(26,79,171,.1); }
.form-hint { font-size:12px; color:var(--texto-soft); margin-top:6px; }
.form-required { color:var(--rojo); font-size:12px; font-weight:600; }
.form-optional { color:var(--texto-soft); font-size:12px; }

/* File upload */
.form-file-wrapper { position:relative; }
.form-file-input { position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; top:0; left:0; }
.form-file-label {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:20px; border:2px dashed var(--borde); border-radius:12px;
    cursor:pointer; transition: all .2s; text-align:center;
    color:var(--texto-soft); font-size:14px;
}
.form-file-label:hover { border-color:var(--azul); background:var(--azul-light); }
.form-file-label--selected { border-color:var(--verde); background:#DCFCE7; color:var(--verde); }
.form-file-icon { font-size:24px; }
.form-file-preview { margin-top:12px; text-align:center; }
.form-file-preview img { max-width:100%; max-height:200px; border-radius:8px; border:1px solid var(--borde); }

/* ── Cronograma ─────────────────────────────────────────── */
.credito-detalle-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.crono-resumen {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    background:#fff; border-radius:var(--radius); padding:20px;
    box-shadow:var(--card-shadow); border:1px solid var(--borde);
    margin-bottom:24px;
}
.crono-resumen-label { font-size:12px; color:var(--texto-soft); display:block; margin-bottom:4px; }
.crono-resumen-value { font-size:15px; font-weight:700; color:var(--azul-dark); }
.crono-progress { display:flex; align-items:center; gap:8px; }
.crono-progress .progress-bar { flex:1; }
.crono-pct { font-size:13px; font-weight:700; color:var(--azul); }

/* Desktop table */
.crono-tabla-wrapper {
    background:#fff; border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--card-shadow); border:1px solid var(--borde);
}
.crono-tabla { width:100%; border-collapse:collapse; font-size:14px; }
.crono-tabla th {
    background:var(--azul-dark); color:#fff; padding:12px 16px;
    text-align:left; font-weight:600; font-size:13px;
}
.crono-tabla td { padding:12px 16px; border-bottom:1px solid var(--borde); }
.crono-row.estado-pagada { background:#f0fdf4; }
.crono-row.estado-vencida { background:#fef2f2; }
.crono-row--proxima { background:var(--azul-light) !important; font-weight:600; }
.crono-estado {
    display:inline-block; padding:3px 10px; border-radius:999px;
    font-size:12px; font-weight:600;
}
.crono-estado.estado-pagada   { background:#DCFCE7; color:#166534; }
.crono-estado.estado-vencida   { background:#FEE2E2; color:#991B1B; }
.crono-estado.estado-parcial   { background:#FEF9C3; color:#854D0E; }
.crono-estado.estado-pendiente { background:#F1F5F9; color:#475569; }
.crono-estado.estado-revision  { background:#FFF7ED; color:#C2410C; border:1px solid #FDBA74; }
.crono-pagada-check { color:var(--verde); font-weight:700; font-size:18px; }
.crono-monto { font-weight:600; }

/* Desktop/Mobile toggle */
.crono-mobile-only { display:none; }
.crono-desktop-only { display:block; }
.crono-card-mobile {
    background:#fff; border-radius:12px; padding:16px;
    box-shadow:var(--card-shadow); border:1px solid var(--borde);
    margin-bottom:10px;
}
.crono-card-mobile.estado-pagada { border-left:4px solid var(--verde); }
.crono-card-mobile.estado-vencida { border-left:4px solid var(--rojo); }
.crono-card-mobile.estado-parcial { border-left:4px solid var(--amarillo); }
.crono-card-mobile-top {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
}
.crono-card-mobile-num { font-weight:700; color:var(--azul-dark); font-size:15px; }
.crono-card-mobile-row {
    display:flex; justify-content:space-between; padding:6px 0;
    font-size:13px; color:var(--texto-soft);
}
.crono-card-mobile-row strong { color:var(--texto); }
.crono-card-mobile-btn { width:100%; margin-top:12px; }

/* ── Empty state ────────────────────────────────────────── */
.portal-empty {
    text-align:center; padding:48px 20px; color:var(--texto-soft);
    background:#fff; border-radius:var(--radius); box-shadow:var(--card-shadow);
}
.portal-empty h3 { color:var(--azul-dark); font-size:18px; margin-bottom:8px; }
.portal-empty p { font-size:14px; }
.empty-icon { font-size:48px; margin-bottom:12px; }

/* ── Footer ─────────────────────────────────────────────── */
.portal-footer {
    background:#fff; border-top:1px solid var(--borde);
    text-align:center; padding:16px 24px;
    font-size:12px; color:var(--texto-soft);
    display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
.portal-whatsapp { color:#16A34A; font-weight:600; text-decoration:none; }
.portal-whatsapp:hover { text-decoration:underline; }

/* ── Bottom Navigation (Mobile) ─────────────────────────── */
.portal-bottom-nav {
    display:none; /* shown on mobile */
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:#fff; border-top:1px solid var(--borde);
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    text-decoration:none; color:var(--texto-soft);
    font-size:10px; font-weight:500; padding:6px 4px;
    transition: color .2s; flex:1;
}
.bottom-nav-item.active { color:var(--azul); }
.bottom-nav-icon { font-size:22px; line-height:1; }
.bottom-nav-label { font-size:10px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width:768px) {
    .crono-resumen { grid-template-columns:repeat(2,1fr); }
    .credito-detalle-header { flex-direction:column; }
}

/* Mobile */
@media (max-width:640px) {
    body { padding-bottom:72px; } /* space for bottom nav */

    /* Header */
    .portal-header-inner { padding:10px 16px; }
    .portal-nav-desktop { display:none; }
    .portal-user-desktop { display:none; }
    .portal-user-mobile { display:block; }

    /* Main */
    .portal-main { padding:20px 0 32px; }
    .portal-container { padding:0 14px; }

    /* Welcome */
    .portal-welcome { flex-direction:column; align-items:flex-start; }
    .portal-welcome h2 { font-size:20px; }
    .portal-btn-download { width:100%; justify-content:center; }

    /* Cards */
    .credito-card { padding:18px 16px; }
    .credito-stats { grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; }
    .stat-value { font-size:15px; }
    .credito-acciones { flex-direction:column; }
    .credito-acciones .portal-btn-primary,
    .credito-acciones .portal-btn-outline { width:100%; text-align:center; }

    /* Cronograma */
    .crono-resumen { grid-template-columns:1fr 1fr; gap:10px; padding:16px; }
    .crono-desktop-only { display:none; }
    .crono-mobile-only { display:block; }

    /* Pagos */
    .pago-card-top { flex-direction:column; align-items:flex-start; }

    /* Footer - hide on mobile, bottom nav replaces it */
    .portal-footer { display:none; }

    /* Bottom nav - show on mobile */
    .portal-bottom-nav { display:flex; }

    /* Forms */
    .form-control-lg { font-size:16px; } /* prevents iOS zoom */

    /* Page titles */
    .portal-page-title { font-size:18px; }
}

/* Small phones */
@media (max-width:380px) {
    .portal-container { padding:0 10px; }
    .credito-card { padding:14px 12px; }
    .credito-stats { gap:6px; }
    .stat-value { font-size:14px; }
}