/* =============================================================================
   Escuela PIB 2 - Certificados
   ============================================================================= */

.certificado-tarjeta {
    border: 2px solid var(--color-oliva);
    background: linear-gradient(135deg, var(--color-crema) 0%, var(--color-superficie) 100%);
    padding: var(--espacio-6);
}
.tarjeta--certificado {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
}
.tarjeta--certificado .tarjeta__titulo {
    margin: 0;
    color: var(--color-marron-profundo);
}
.tarjeta--certificado .tarjeta__meta {
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.tarjeta--certificado code {
    background: var(--color-beige);
    padding: 2px 6px;
    border-radius: var(--radio-sm);
    font-size: var(--tamano-texto-xs);
}
.tarjeta--certificado-valido {
    border: 2px solid #2f7a3f;
    background: linear-gradient(135deg, #e8f5e9 0%, var(--color-superficie) 100%);
    padding: var(--espacio-4);
}
.tarjeta--certificado-valido .tarjeta__encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: #1b5e20;
    margin-bottom: var(--espacio-3);
}
.tarjeta--certificado-valido h2 {
    margin: 0;
    color: #1b5e20;
}
.tarjeta--certificado-invalido {
    border: 2px solid #c0392b;
    background: linear-gradient(135deg, #fce8e6 0%, var(--color-superficie) 100%);
    padding: var(--espacio-4);
}
.tarjeta--certificado-invalido .tarjeta__encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: #b71c1c;
    margin-bottom: var(--espacio-3);
}
.tarjeta--certificado-invalido h2 {
    margin: 0;
    color: #b71c1c;
}
.badge--emitido { background: #c8e6c9; color: #1b5e20; }
.badge--revocado { background: #ffcdd2; color: #b71c1c; }
.badge--vencido { background: var(--color-beige); color: var(--color-texto-secundario); }

/* =============================================================================
   Impresion del certificado
   ============================================================================= */

.certificado-imprimir {
    background: #f5f0e6;
    margin: 0;
    padding: var(--espacio-4);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.certificado {
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 1.414 / 1; /* A4 landscape */
    background: #fffdf7;
    color: #2a2010;
    font-family: 'Georgia', 'Times New Roman', serif;
    padding: 40px;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    border: 8px double #5b4a2f;
    position: relative;
}

.certificado__marco {
    border: 2px solid #5b4a2f;
    padding: 36px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.certificado__encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    border-bottom: 1px solid #5b4a2f;
    padding-bottom: var(--espacio-3);
}

.certificado__logo {
    width: 64px;
    height: 64px;
    background: #5b4a2f;
    color: #fffdf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    border-radius: 50%;
    font-family: 'Helvetica', sans-serif;
}

.certificado__titulo {
    margin: 0;
    font-size: 28px;
    color: #5b4a2f;
    font-weight: 700;
    letter-spacing: 1px;
}

.certificado__subtitulo {
    margin: 4px 0 0;
    color: #7a6a4f;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.certificado__cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--espacio-5) 0;
}

.certificado__otorgado-a {
    font-size: 18px;
    color: #5b4a2f;
    margin: 0 0 var(--espacio-3);
    font-style: italic;
}

.certificado__nombre {
    font-size: 48px;
    color: #2a2010;
    margin: 0 0 var(--espacio-3);
    font-weight: 700;
    border-bottom: 2px solid #c0a878;
    padding-bottom: var(--espacio-2);
    min-width: 60%;
}

.certificado__por {
    font-size: 16px;
    color: #5b4a2f;
    margin: var(--espacio-3) 0 var(--espacio-2);
}

.certificado__curso {
    font-size: 32px;
    color: #5b4a2f;
    margin: 0 0 var(--espacio-3);
    font-weight: 600;
    font-style: italic;
}

.certificado__detalle {
    font-size: 14px;
    color: #7a6a4f;
    margin: 4px 0;
}

.certificado__pie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-4);
    align-items: end;
    border-top: 1px solid #5b4a2f;
    padding-top: var(--espacio-3);
}

.certificado__firma {
    text-align: center;
    color: #5b4a2f;
    font-size: 13px;
}

.certificado__firma hr {
    border: 0;
    border-top: 1px solid #5b4a2f;
    margin: 0 0 var(--espacio-1);
    width: 220px;
}

.certificado__codigo {
    text-align: right;
    color: #5b4a2f;
    font-size: 12px;
}

.certificado__codigo p {
    margin: 2px 0;
}

.certificado__codigo code {
    background: #f5f0e6;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.certificado__fecha {
    margin-top: var(--espacio-1) !important;
    font-style: italic;
    color: #7a6a4f;
}

.certificado__acciones-impresion {
    margin-top: var(--espacio-4);
    display: flex;
    gap: var(--espacio-2);
}

@media print {
    body {
        background: #fff;
        margin: 0;
        padding: 0;
    }
    .certificado {
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        border: 8px double #5b4a2f;
    }
    .certificado__acciones-impresion {
        display: none;
    }
}

@page {
    size: A4 landscape;
    margin: 1cm;
}