/* ─────────────────────────────────────────────────────────────────────────────
   Gafete / carnet de empleado — 5.9cm × 8.6cm (vertical)

   ÚNICA hoja de estilos del gafete: la usan la vista previa (CarnetDialog.razor)
   y la ventana de impresión (printCarnetEmpleado.js). Todas las medidas salen
   de --u (1/100 del ancho de la tarjeta), así que el gafete es el mismo dibujo
   a cualquier tamaño: en pantalla --cn-ancho vale 300px y al imprimir 5.9cm.
   No usar px, pt ni cm sueltos aquí adentro: romperían esa proporción.

   Referencias en cm → u:  1cm = 16.95u   |   1u = 0.059cm ≈ 1.67pt impresos
   Alto de la tarjeta = 145.76u
   ───────────────────────────────────────────────────────────────────────────── */

.cn-card {
    --cn-ancho: 300px;
    --u: calc(var(--cn-ancho) / 100);
    --cn-escala: 1; /* la baja printCarnetEmpleado.ajustarTexto si el texto no cabe */

    position: relative;
    width: var(--cn-ancho);
    height: calc(var(--cn-ancho) * 86 / 59);
    flex: none;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    border-radius: calc(var(--u) * 3.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.cn-card *,
.cn-card *::before,
.cn-card *::after {
    box-sizing: border-box;
}

/* Arte de fondo como <img> (no background-image): se imprime siempre, aunque
   el navegador tenga desactivado "Gráficos de fondo". */
.cn-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
}

/* ── DELANTERA ──
   Tres zonas fijas, amarradas al arte de fondo (% del alto de la tarjeta):
     foto   18.5% → 47.6%   (2cm × 2.5cm, debajo del logo)
     texto  49.5% → 74.5%   (nombre + puesto, centrado en la zona)
     QR     76.1% → 93.5%   (1.5cm, entre el globo y el logo del Parque)
   El texto nunca sale de su zona: se encoge (--cn-escala) y, como último
   recurso, se recorta. */

.cn-foto-wrap {
    position: absolute;
    top: 18.5%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--u) * 33.9);   /* 2cm */
    height: calc(var(--u) * 42.37); /* 2.5cm */
    overflow: hidden;
    border-radius: calc(var(--u) * 1.2);
    box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.3);
    background: #f0f0f0;
}

.cn-foto {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 20%; /* si hay que recortar, se conserva la cabeza */
}

.cn-foto-ph {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cn-texto {
    position: absolute;
    top: 49.5%;
    bottom: 25.5%;
    left: 5%;
    right: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.cn-texto-bloque {
    flex: none;
}

.cn-nombre {
    font-size: calc(var(--u) * 6 * var(--cn-escala)); /* 10pt impresos */
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.cn-puesto {
    margin-top: calc(var(--u) * 1.5 * var(--cn-escala));
    font-size: calc(var(--u) * 5 * var(--cn-escala)); /* 8.4pt impresos */
    font-weight: 400;
    line-height: 1.2;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.cn-qr-wrap {
    position: absolute;
    bottom: 6.5%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--u) * 25.42);  /* 1.5cm */
    height: calc(var(--u) * 25.42);
}

.cn-qr {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    image-rendering: pixelated;
}

/* ── TRASERA ── (el código va entre el texto legal y el logo del Parque) */

.cn-datos-trasera {
    position: absolute;
    top: 73.5%;
    left: 8%;
    right: 8%;
    text-align: center;
}

.cn-etiqueta {
    font-size: calc(var(--u) * 4.8); /* 8pt impresos */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: calc(var(--u) * 0.15);
}