/* ═══════════════════════════════════════════════════════════
   padron.css — Estilos para el documento Padrón de Vehículo
   Screen: dark preview    |    Print: white, A4 oficial
═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --pv-accent:       #3b82f6;
    --pv-accent-dark:  #1d4ed8;
    --pv-bg:           #0f172a;
    --pv-surface:      #1e293b;
    --pv-surface-2:    #263148;
    --pv-border:       #334155;
    --pv-text:         #e2e8f0;
    --pv-muted:        #94a3b8;
    --pv-green:        #22c55e;
    --pv-red:          #ef4444;
    --pv-amber:        #f59e0b;
    --pv-radius:       10px;
    --pv-shadow:       0 4px 24px rgba(0,0,0,.5);
}

/* ── Reset base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--pv-bg);
    color: var(--pv-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Topbar (solo pantalla) ─────────────────────────────── */
.pv-topbar {
    background: var(--pv-surface);
    border-bottom: 1px solid var(--pv-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.pv-topbar-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pv-topbar-title {
    flex: 1;
    font-weight: 600;
    color: var(--pv-muted);
    font-size: 0.85rem;
    text-align: center;
}
.pv-btn-back {
    background: transparent;
    border: 1px solid var(--pv-border);
    color: var(--pv-muted);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all .2s;
}
.pv-btn-back:hover { background: var(--pv-surface-2); color: var(--pv-text); }

.pv-btn-print {
    background: var(--pv-accent);
    border: none;
    color: #fff;
    padding: 0.4rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: background .2s;
}
.pv-btn-print:hover { background: var(--pv-accent-dark); }

/* ── Estado de carga ────────────────────────────────────── */
.pv-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 60vh;
    color: var(--pv-muted);
    font-size: 1.1rem;
}
.pv-estado i { font-size: 3rem; color: var(--pv-accent); }

/* ── Documento ──────────────────────────────────────────── */
.pv-documento {
    max-width: 900px;
    margin: 2rem auto 4rem;
    background: var(--pv-surface);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
    box-shadow: var(--pv-shadow);
    overflow: hidden;
}

/* ── Cabecera ───────────────────────────────────────────── */
.pv-header {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 2rem 2.5rem 1.5rem;
    background: linear-gradient(135deg, #0f1e38 0%, var(--pv-surface) 100%);
    border-bottom: 2px solid var(--pv-accent);
}
.pv-sello {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(59,130,246,.5));
}
.pv-header-center { text-align: center; }
.pv-issuer-name {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--pv-muted);
    text-transform: uppercase;
}
.pv-issuer-dept {
    font-size: 0.72rem;
    color: var(--pv-muted);
    margin-bottom: .4rem;
}
.pv-doc-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    text-transform: uppercase;
}
.pv-doc-subtitle { font-size: 0.75rem; color: var(--pv-muted); }

.pv-folio-box, .pv-fecha-box {
    text-align: right;
}
.pv-folio-label, .pv-fecha-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pv-muted);
}
.pv-folio-num {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pv-accent);
    font-family: monospace;
    letter-spacing: .05em;
}
.pv-fecha-val {
    display: block;
    font-size: 0.82rem;
    color: var(--pv-text);
    margin-top: .5rem;
}

/* ── Divisor ────────────────────────────────────────────── */
.pv-divider {
    height: 1px;
    background: var(--pv-border);
    margin: 0 2.5rem;
}

/* ── Secciones ──────────────────────────────────────────── */
.pv-seccion { padding: 1.75rem 2.5rem; }

.pv-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pv-accent);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--pv-border);
    padding-bottom: .5rem;
}
.pv-section-title i { font-size: 1rem; }

/* ── Vehículo — Identificación ──────────────────────────── */
.pv-vehiculo-id {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.pv-vehiculo-foto {
    flex-shrink: 0;
    width: 200px;
}
.pv-foto-placeholder {
    width: 200px;
    height: 130px;
    background: var(--pv-surface-2);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--pv-muted);
}
.pv-vehiculo-foto img {
    width: 200px;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--pv-border);
}
.pv-vehiculo-datos { flex: 1; }

/* ── Grids de datos ─────────────────────────────────────── */
.pv-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}
.pv-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
}

.pv-dato {}
.pv-dato-label {
    display: block;
    font-size: 0.68rem;
    color: var(--pv-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px;
}
.pv-dato-val {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pv-text);
}
.pv-placa {
    font-size: 1.2rem !important;
    font-family: monospace;
    letter-spacing: .1em;
    color: var(--pv-accent) !important;
}
.pv-erlc {
    font-family: monospace;
    font-size: 0.82rem !important;
    color: var(--pv-muted) !important;
}

/* ── Estado legal cards ─────────────────────────────────── */
.pv-legal-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--pv-surface-2);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
}
.pv-legal-card.is-ok  { border-color: var(--pv-green); }
.pv-legal-card.is-bad { border-color: var(--pv-red); }
.pv-legal-card.is-warn { border-color: var(--pv-amber); }
.pv-legal-icon { font-size: 1.8rem; }
.pv-legal-card.is-ok  .pv-legal-icon { color: var(--pv-green); }
.pv-legal-card.is-bad .pv-legal-icon { color: var(--pv-red); }
.pv-legal-card.is-warn .pv-legal-icon { color: var(--pv-amber); }
.pv-legal-info { display: flex; flex-direction: column; gap: 2px; }
.pv-legal-info strong { font-size: 0.85rem; }
.pv-legal-info span   { font-size: 0.8rem; color: var(--pv-muted); }
.pv-legal-info small  { font-size: 0.72rem; color: var(--pv-muted); }

/* ── Propietario + Firma ─────────────────────────────────── */
.pv-propietario-sec {
    display: flex;
    gap: 2rem;
    align-items: flex-end;
}
.pv-prop-info { flex: 1; }
.pv-firma-area {
    flex-shrink: 0;
    width: 180px;
    text-align: center;
}
.pv-firma-img-wrap {
    height: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 4px;
}
.pv-firma-img-wrap img {
    max-height: 70px;
    max-width: 170px;
    object-fit: contain;
    filter: invert(1) brightness(2);
}
.pv-firma-line {
    border-top: 1px solid var(--pv-muted);
    padding-top: 4px;
    font-size: 0.78rem;
    color: var(--pv-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-firma-caption {
    display: block;
    font-size: 0.65rem;
    color: var(--pv-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}

/* ── Pie de página ──────────────────────────────────────── */
.pv-footer {
    background: #0a1628;
    border-top: 2px solid var(--pv-accent);
    padding: 1.5rem 2.5rem;
    text-align: center;
}
.pv-footer-stamps {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.pv-stamp {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pv-stamp-ok  {
    background: rgba(34,197,94,.12);
    border: 1px solid var(--pv-green);
    color: var(--pv-green);
}
.pv-stamp-ok i { font-size: 1rem; }
.pv-stamp-id  {
    background: rgba(59,130,246,.08);
    border: 1px solid var(--pv-accent);
    color: var(--pv-accent);
    font-family: monospace;
}
.pv-footer-legal {
    font-size: 0.7rem;
    color: var(--pv-muted);
    max-width: 700px;
    margin: 0 auto .5rem;
    line-height: 1.5;
}
.pv-footer-date {
    font-size: 0.68rem;
    color: #4a5568;
}

/* ── Historial de propietarios ──────────────────────────── */
.pv-historial-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.pv-historial-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--pv-surface-2);
    border: 1px solid var(--pv-border);
    border-radius: 8px;
}
.pv-historial-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59,130,246,.12);
    border: 1px solid var(--pv-accent);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: var(--pv-accent);
    flex-shrink: 0;
}
.pv-historial-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pv-historial-info strong { font-size: .88rem; }
.pv-historial-rut {
    font-size: .73rem;
    font-family: monospace;
    color: var(--pv-muted);
}
.pv-historial-fechas {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}
.pv-historial-fechas span {
    font-size: .72rem;
    color: var(--pv-muted);
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
}
.pv-historial-fechas i { font-size: .85rem; }

/* ══════════════════════════════════════════
   ESTILOS MUNICIPALIDAD.HTML — modal-padron
══════════════════════════════════════════ */
.padron-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 340px;
    overflow-y: auto;
}
.padron-vehicle-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1rem;
    border: 1px solid var(--mc-border, #334155);
    border-radius: 8px;
    cursor: pointer;
    transition: all .18s;
    background: var(--mc-surface-2, #1e293b);
}
.padron-vehicle-item:hover { border-color: #3b82f6; background: rgba(59,130,246,.07); }
.padron-vehicle-item.is-selected { border-color: #3b82f6; background: rgba(59,130,246,.14); }
.padron-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}
.padron-thumb-placeholder {
    width: 56px;
    height: 40px;
    background: #263148;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.padron-vehicle-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.padron-vehicle-info strong { font-size: .9rem; color: #e2e8f0; }
.padron-placa {
    font-size: .78rem;
    font-family: monospace;
    letter-spacing: .06em;
    color: #3b82f6;
}
.padron-anio {
    font-size: .72rem;
    color: #94a3b8;
}
.padron-item-check {
    font-size: 1.4rem;
    color: transparent;
    transition: color .18s;
}
.padron-vehicle-item.is-selected .padron-item-check { color: #22c55e; }
.padron-loading, .padron-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    color: #94a3b8;
    font-size: .85rem;
}
.padron-empty i { font-size: 2rem; }

/* ═══════════════════════════════════════════════════════════
   PRINT STYLES — A4 oficial
═══════════════════════════════════════════════════════════ */
@media print {
    :root {
        --pv-bg: #fff;
        --pv-surface: #fff;
        --pv-surface-2: #f8fafc;
        --pv-border: #cbd5e1;
        --pv-text: #0f172a;
        --pv-muted: #64748b;
        --pv-accent: #1d4ed8;
        --pv-green: #16a34a;
        --pv-red: #dc2626;
        --pv-amber: #d97706;
    }

    @page {
        size: A4;
        margin: 10mm 12mm;
    }

    body {
        background: #fff !important;
        color: #0f172a !important;
    }

    .no-print { display: none !important; }

    .pv-documento {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
    }

    .pv-header {
        background: #f1f5f9 !important;
        border-bottom: 2px solid #1d4ed8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pv-footer {
        background: #f1f5f9 !important;
        border-top: 2px solid #1d4ed8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pv-stamp-ok {
        background: rgba(22,163,74,.1) !important;
        border-color: #16a34a !important;
        color: #16a34a !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pv-stamp-id {
        background: rgba(29,78,216,.07) !important;
        border-color: #1d4ed8 !important;
        color: #1d4ed8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pv-legal-card {
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .pv-legal-card.is-ok  { border-color: #16a34a !important; }
    .pv-legal-card.is-bad { border-color: #dc2626 !important; }
    .pv-legal-card.is-warn { border-color: #d97706 !important; }

    .pv-placa { color: #1d4ed8 !important; }
    .pv-folio-num { color: #1d4ed8 !important; }
    .pv-section-title { color: #1d4ed8 !important; border-color: #cbd5e1 !important; }

    .pv-firma-img-wrap img { filter: none !important; }

    .pv-historial-row {
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .pv-historial-num {
        background: rgba(29,78,216,.07) !important;
        border-color: #1d4ed8 !important;
        color: #1d4ed8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Marca de agua */
    .pv-documento::after {
        content: 'OVERLINE STUDIOS';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-35deg);
        font-size: 5rem;
        font-weight: 900;
        color: rgba(29,78,216,.06);
        letter-spacing: .2em;
        white-space: nowrap;
        pointer-events: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .pv-watermark img { opacity: .02; }
    .pv-site-footer { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   MEJORAS — Estado de carga, watermark, footer del sitio,
   responsive
═══════════════════════════════════════════════════════════ */

/* ── Estado de carga mejorado ───────────────────────────── */
.pv-estado-loading {
    gap: .75rem !important;
}
.pv-loader-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(59,130,246,.08);
    border: 2px solid rgba(59,130,246,.2);
}
.pv-loader-icon i {
    font-size: 2.5rem;
    color: var(--pv-accent) !important;
}
.pv-estado-msg {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pv-text);
}
.pv-estado-hint {
    font-size: .78rem;
    color: #64748b;
    letter-spacing: .02em;
}

/* ── Marca de agua decorativa ───────────────────────────── */
.pv-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}
.pv-watermark img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    opacity: .04;
}
.pv-documento {
    position: relative;
    overflow: hidden;
}
.pv-documento > header,
.pv-documento > section,
.pv-documento > footer,
.pv-documento > .pv-divider,
.pv-documento > div {
    position: relative;
    z-index: 1;
}

/* ── Header — gradiente sutil ───────────────────────────── */
.pv-header {
    background: linear-gradient(135deg, #0f1e38 0%, var(--pv-surface) 100%);
}
.pv-doc-subtitle {
    font-style: italic;
}

/* ── Foto vehículo — hover ──────────────────────────────── */
.pv-vehiculo-foto img,
.pv-foto-placeholder {
    transition: border-color .2s;
}
.pv-vehiculo-foto img:hover {
    border-color: var(--pv-accent);
}

/* ── Legal cards — hover ────────────────────────────────── */
.pv-legal-card {
    transition: border-color .2s, box-shadow .2s;
}
.pv-legal-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Historial rows — hover ─────────────────────────────── */
.pv-historial-row {
    transition: border-color .2s, background .2s;
}
.pv-historial-row:hover {
    border-color: var(--pv-accent);
    background: rgba(59,130,246,.06);
}

/* ── Footer del sitio ───────────────────────────────────── */
.pv-site-footer {
    background: linear-gradient(180deg, #0a1628 0%, #060e1a 100%);
    border-top: 1px solid #1e293b;
    padding: 1.5rem 0 1.25rem;
    text-align: center;
    position: relative;
}
.pv-site-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}
.pv-site-footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.pv-site-footer-links a {
    font-size: .78rem;
    color: #64748b;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .2s;
}
.pv-site-footer-links a:hover {
    color: var(--pv-accent);
}
.pv-site-footer-links a i {
    font-size: .95rem;
}
.pv-site-footer-note {
    font-size: .68rem;
    color: #475569;
    line-height: 1.5;
}
.pv-site-footer-note strong {
    color: #94a3b8;
    font-weight: 600;
}
.pv-site-footer-watermark {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.pv-site-footer-watermark img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    opacity: .12;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .pv-topbar-inner {
        padding: .6rem 1rem;
    }
    .pv-topbar-title {
        font-size: .75rem;
    }

    .pv-header {
        grid-template-columns: 1fr;
        gap: .75rem;
        padding: 1.25rem 1.25rem 1rem !important;
        text-align: center;
    }
    .pv-header-left {
        display: flex;
        justify-content: center;
    }
    .pv-sello {
        width: 52px;
        height: 52px;
    }
    .pv-header-right {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
    }
    .pv-folio-box, .pv-fecha-box {
        text-align: center;
    }
    .pv-doc-title {
        font-size: 1.15rem;
    }

    .pv-seccion {
        padding: 1.25rem 1.25rem !important;
    }
    .pv-divider {
        margin: 0 1.25rem !important;
    }

    .pv-vehiculo-id {
        flex-direction: column;
        gap: 1rem;
    }
    .pv-vehiculo-foto {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .pv-vehiculo-foto img,
    .pv-foto-placeholder {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 200/130;
    }

    .pv-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
    }
    .pv-grid-3 {
        grid-template-columns: 1fr 1fr;
        gap: .75rem 1rem;
    }

    .pv-propietario-sec {
        flex-direction: column;
        gap: 1.25rem;
    }
    .pv-firma-area {
        width: 100%;
        text-align: center;
    }

    .pv-footer {
        padding: 1rem 1.25rem !important;
    }
    .pv-footer-stamps {
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }

    .pv-watermark img {
        width: 180px;
        height: 180px;
    }

    .pv-site-footer-links { gap: .75rem; }
    .pv-site-footer-watermark { display: none; }
}

@media (max-width: 480px) {
    .pv-grid-2,
    .pv-grid-3 {
        grid-template-columns: 1fr;
    }
    .pv-doc-title {
        font-size: 1rem;
    }
    .pv-historial-row {
        grid-template-columns: 28px 1fr;
        gap: .5rem;
    }
    .pv-historial-fechas {
        grid-column: 1 / -1;
        text-align: left;
    }
    .pv-historial-fechas span {
        justify-content: flex-start;
    }
}