/* ==========================================================================
   ESTILOS PARA LA CÉDULA DE IDENTIDAD - CHILE ROLEPLAY COMMUNITY
   Versión con CSS Grid para un posicionamiento preciso.
   ========================================================================== */

:root {
    /* Define las fuentes para mantener consistencia */
    --font-cedula-sans: 'Helvetica', 'Arial', sans-serif;
    --font-cedula-mono: 'Courier New', monospace;
}

.cedula-container {
    padding: 1rem 0;
    max-width: 600px; /* <--- ¡Cambiado! Ahora es más pequeña */
    margin: 2rem auto; 
    font-family: var(--font-cedula-sans);
}

.cedula {
    background-color: #f0f3f5; /* Color base por si la imagen de fondo falla */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    aspect-ratio: 85.6 / 53.98; /* Proporción oficial de una tarjeta de crédito/ID */
    position: relative;
    overflow: hidden; /* Esconde cualquier cosa que se salga del borde redondeado */
    display: flex;
    flex-direction: column;
}

/* Capa para el fondo con la textura */
.cedula-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('https://i.imgur.com/ipqxZQh.png'); /* URL de una textura sutil de fondo */
    background-size: cover;
    opacity: 0.8;
    z-index: 1;
}

/* Contenedor de todo el contenido para que esté sobre el fondo */
.cedula-content {
    position: relative;
    z-index: 2;
    padding: 3% 4%; /* Usamos porcentajes para que se adapte al tamaño */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- ENCABEZADO --- */
.cedula-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 2%;
    flex-shrink: 0; /* Evita que se encoja */
}
.emblema { height: 3.5vh; max-height: 25px; }
.republica-text {
    flex-grow: 1;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vh; /* Tamaño de fuente relativo a la altura */
    line-height: 1.2;
    color: #003366;
}
.republica-text span {
    font-size: 0.7em;
    font-weight: normal;
    display: block;
}
.cedula-title {
    font-size: 1.2vh;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    color: #333;
}

.cedula-title {
    display: none;
}

/* --- CUERPO PRINCIPAL (CON CSS GRID) --- */
.cedula-body {
    flex-grow: 1;
    display: grid;
    /* Definimos nuestra rejilla: 4 columnas y 3 filas */
    grid-template-columns: 28% 1fr 1fr 12%; /* Foto | Info | Info | Lado Derecho */
    grid-template-rows: auto 1fr auto; /* Info | Espacio flexible | Fila inferior */
    gap: 0% 4%; /* Espacio entre filas y columnas */
    padding-top: 3%;
    
    /* Mapeamos dónde va cada elemento */
    grid-template-areas:
        "photo info info side"
        "photo info info side"
        "run   firma firma side";
}

/* Asignamos cada elemento a su área del grid */
.cedula-photo-main     { grid-area: photo; }
.cedula-info           { grid-area: info; }
.cedula-side-right     { grid-area: side; }
.cedula-run-container  { grid-area: run; }
.cedula-firma-container{ grid-area: firma; }

/* --- ELEMENTOS DEL GRID --- */
.cedula-photo-main {
    width: 100%;
    height: 95%;
    object-fit: cover;
    border-radius: 8px;
    align-self: start; /* Se alinea arriba en su área */
}

.cedula-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas para los datos */
    gap: 3% 5%;
    font-size: 1.5vh;
}
.cedula-info .info-field {
    line-height: 1.2;
}
.cedula-info label {
    display: block;
    font-size: 0.7em;
    color: #555;
    font-weight: bold;
}
.cedula-info span {
    font-weight: 600;
    color: #000;
    font-family: var(--font-cedula-mono);
}

.cedula-run-container {
    align-self: end; /* Se alinea abajo en su área */
}

.cedula-run-container label, .cedula-firma-container label {
    display: block;
    font-size: 1.3vh;
    color: #555;
    font-weight: bold;
}
.cedula-run-container span {
    font-size: 2.1vh;
    font-weight: bold;
    color: #d00;
    font-family: var(--font-cedula-mono);
}

.cedula-firma-container {
    align-self: end; /* Se alinea abajo en su área */
    padding-bottom: 2%;
    border-bottom: 1px solid #ccc;
}
.cedula-firma-container span {
    font-family: 'Brush Script MT', cursive; /* Fuente cursiva para la firma */
    font-size: 2.8vh;
    color: #222;
}

.cedula-side-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.cedula-photo-small {
    width: 80%;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 5%;
}
.numero-documento-vertical {
    writing-mode: vertical-rl; /* Texto vertical */
    transform: rotate(180deg);
    font-family: var(--font-cedula-mono);
    font-size: 1.8vh;
    letter-spacing: 1px;
    color: #888;
}

/* ▼▼▼ REEMPLAZA EL CÓDIGO DEL AVATAR DE ROBLOX POR ESTE ▼▼▼ */

/* Estilos especiales para cuando la foto es un avatar de Roblox */
.cedula-photo-main.roblox-avatar {
    /* Centra la foto verticalmente en su espacio */
    align-self: center;

    /* Nueva línea: Mueve el avatar ligeramente a la izquierda */
    margin-left: -10%; /* <-- Ajusta este valor si necesitas moverlo más o menos */

    /* Mantiene la imagen completa sin recortar */
    object-fit: contain;

    /* Ajusta el tamaño del avatar (puedes cambiar este valor) */
    padding: 18%; 

    /* Elimina el fondo */
    background-color: transparent;
}

.cedula-photo-small.roblox-avatar {
    /* Centra también la foto pequeña */
    align-self: center;

    /* Mueve también la foto pequeña ligeramente a la izquierda (menos agresivo) */
    margin-left: -2%; /* <-- Ajusta si es necesario */

    object-fit: contain;
    padding: 15%;
    background-color: transparent;
}