<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solvencia de Condominio - SAC 2026</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
        
        body { 
            font-family: 'Inter', sans-serif; 
            padding: 40px; 
            color: #1e293b; 
            line-height: 1.6;
            background-color: #f1f5f9;
        }
        
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            background: white;
            border: 1px solid #e2e8f0; 
            padding: 80px; 
            border-radius: 40px; 
            position: relative; 
            shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 15px;
            background: linear-gradient(to right, #2563eb, #3b82f6);
        }
        
        .header { 
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px; 
            border-bottom: 1px solid #f1f5f9; 
            padding-bottom: 30px; 
        }
        
        .logo-section {
            text-align: left;
        }

        .logo { 
            font-size: 32px; 
            font-weight: 900; 
            letter-spacing: -1.5px; 
            margin-bottom: 5px; 
            color: #0f172a;
        }
        
        .logo span { color: #2563eb; }
        
        .condo-name { 
            text-transform: uppercase; 
            font-weight: 900; 
            color: #ea580c; 
            font-size: 11px; 
            letter-spacing: 3px; 
        }

        .doc-meta {
            text-align: right;
        }

        .doc-id {
            font-size: 10px;
            font-weight: 900;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .title { 
            text-align: center; 
            font-size: 32px; 
            font-weight: 900; 
            text-transform: uppercase; 
            margin: 60px 0; 
            letter-spacing: 4px; 
            color: #0f172a;
        }
        
        .content { 
            font-size: 17px; 
            text-align: justify; 
            margin-bottom: 80px; 
            color: #334155;
        }

        .content strong {
            color: #0f172a;
            font-weight: 900;
        }
        
        .info-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 30px; 
            margin-bottom: 50px; 
            background: #f8fafc; 
            padding: 30px; 
            border-radius: 25px; 
            border: 1px solid #f1f5f9;
        }
        
        .info-item { 
            font-size: 10px; 
            font-weight: 900; 
            text-transform: uppercase; 
            color: #64748b; 
            margin-bottom: 5px;
            letter-spacing: 1px;
        }
        
        .info-value { 
            font-size: 18px; 
            font-weight: 900; 
            color: #0f172a; 
        }
        
        .signatures { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 60px; 
            margin-top: 120px; 
            text-align: center; 
        }
        
        .sig-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .sig-line { 
            width: 100%;
            border-top: 2px solid #0f172a; 
            padding-top: 15px; 
            font-weight: 900; 
            font-size: 13px; 
            text-transform: uppercase; 
            color: #0f172a;
        }

        .sig-label {
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 5px;
        }
        
        .footer { 
            margin-top: 100px; 
            text-align: center; 
            font-size: 10px; 
            color: #94a3b8; 
            border-top: 1px solid #f1f5f9; 
            padding-top: 30px; 
            font-weight: 500;
        }
        
        .watermark { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%) rotate(-30deg); 
            font-size: 150px; 
            font-weight: 900; 
            color: rgba(37, 99, 235, 0.04); 
            pointer-events: none; 
            white-space: nowrap; 
            z-index: 0;
            text-transform: uppercase;
        }

        .stamp {
            position: absolute;
            bottom: 150px;
            right: 80px;
            width: 120px;
            height: 120px;
            border: 4px double #2563eb;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #2563eb;
            font-size: 10px;
            font-weight: 900;
            transform: rotate(-15deg);
            opacity: 0.2;
            padding: 10px;
            text-transform: uppercase;
        }
        
        @media print { 
            .no-print { display: none; } 
            body { padding: 0; background: white; } 
            .container { border: none; shadow: none; padding: 40px; } 
        }

        .btn-print {
            background: #0f172a; 
            color: white; 
            border: none; 
            padding: 15px 30px; 
            border-radius: 15px; 
            cursor: pointer; 
            font-weight: 900; 
            font-size: 12px; 
            text-transform: uppercase; 
            letter-spacing: 2px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        .btn-print:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            background: #1e293b;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="watermark">SOLVENTE</div>
        <div class="stamp">Certificación Digital<br>SAC 2026</div>
        
        <div class="header">
            <div class="logo-section">
                <div class="logo">SAC <span>2026</span></div>
                <div class="condo-name">CONDOMINIO EL TEJAR</div>
            </div>
            <div class="doc-meta">
                <div class="doc-id">Documento: SOLV-2026-{{PROP_CODE}}</div>
                <div class="doc-id">Verificación: {{VERIF_CODE}}</div>
            </div>
        </div>

        <div class="info-grid">
            <div>
                <div class="info-item">Ciudad y Fecha de Emisión</div>
                <div class="info-value">{{CITY}}, {{DATE}}</div>
            </div>
            <div style="text-align: right;">
                <div class="info-item">Unidad Inmobiliaria</div>
                <div class="info-value">{{PROP_CODE}}</div>
            </div>
        </div>

        <div class="title">Solvencia de Condominio</div>

        <div class="content">
            Por medio de la presente se hace constar que el ciudadano(a) <strong>{{RECIPIENT_NAME}}</strong>, 
            titular de la Cédula de Identidad N° <strong>{{RECIPIENT_ID}}</strong>, se encuentra 
            <strong>SOLVENTE</strong> con sus obligaciones de condominio correspondientes a la Unidad Inmobiliaria N° 
            <strong>{{PROP_CODE}}</strong> ({{PROP_TYPE}} {{PROP_NUMBER}}), 
            hasta el periodo de <strong>{{MONTH}} {{YEAR}}</strong>.
            <br><br>
            Se expide la presente a petición de la parte interesada, en la ciudad de {{CITY}}, a los {{DATE}}.
        </div>

        <div class="signatures">
            <div class="sig-box">
                <div class="sig-line">{{PRESIDENT}}</div>
                <div class="sig-label">Presidente de la Junta</div>
            </div>
            <div class="sig-box">
                <div class="sig-line">{{SECRETARY}}</div>
                <div class="sig-label">Secretario(a) de la Junta</div>
            </div>
        </div>

        <div class="footer">
            Urb. Valle de Oro, C.R. El Tejar, {{CITY}}, Correo: tejarcondominio@gmail.com<br>
            ESTE DOCUMENTO ES UNA CERTIFICACIÓN DIGITAL EMITIDA POR EL SISTEMA DE ADMINISTRACIÓN DE CONDOMINIOS (SAC 2026)
        </div>
    </div>

    <div style="text-align: center; margin-top: 40px;" class="no-print">
        <button onclick="window.print()" class="btn-print">Imprimir Documento Oficial</button>
    </div>
</body>
</html>