/* =====================================================
RESET / BASE
===================================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
  background-color:#f0f0f0 !important;
  background-image:url(../img/background.png) !important;
  background-repeat:repeat !important;
  background-size:28% !important;
  background-blend-mode:multiply !important;
  font-family: sans-serif !important;
}

/* =====================================================
LAYOUT PRINCIPAL
===================================================== */

header {
    padding: 20px !important;
}

/* =====================================================
LAYOUT PRINCIPAL
===================================================== */

html, body{
  height: 100%;
}

.layout{
  display: flex;
  width: 100%;
  min-height: calc(100vh - 90px); /* ajusta 80px si tu header cambia */
}

/* =====================================================
LADO IZQUIERDO
===================================================== */

.lado-izquierdo{
width:45%;
background:#f0f2f5;
padding:20px;
overflow:auto;
z-index: 2;
min-height: 100%;
}

/* TARJETAS */

.card-dni{
width:100%;
background:white;
padding:20px;
border-radius:12px;
margin-bottom:10px;
box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.card-dni h3{
margin-top:0;
margin-bottom: 10px;
font-size:16px;
color:#444;
}

/* GRID */

.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.info-grid span{
display:block;
font-size:11px;
color:#777;
}

.info-grid b{
font-size:clamp(10px,0.9vw,12px);
text-transform:uppercase;
font-weight: 800;
font-family:'Poppins',sans-serif !important;
line-height: 1.2px;
color: #333333;
}

/* =====================================================
LADO DERECHO (DNI)
===================================================== */

.lado-derecho{
width:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
padding:2%;
}

/* =====================================================
DNI
===================================================== */

/* CONTENEDOR */

.dni-container{
display:flex;
justify-content:center;
perspective:1200px;
width:100%;
}

/* DNI */

.dni{
position:relative;
width:clamp(320px,100%,1000px);
aspect-ratio:1.6;
transform-style:preserve-3d;
transition:transform .15s linear;
transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

/* FONDO */

.dni-fondo{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}

/* LADOS */

.dni-anverso,
.dni-back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility:hidden;
}

.dni-back{
transform:rotateY(180deg);
}

/* =====================================================
DNI ANVERSO
===================================================== */

/************************************************/
/****************** HEADER DNI ******************/
/************************************************/

.header-dni{
position:absolute;
top:2%;
left:0;
width:100%;
height:18%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 4%;
box-sizing:border-box;
}

/* ESCUDO */

.escudo-peru{
width:8.5%;
max-width:80px;
}

/* TEXTO CENTRAL */

.header-textos{
text-align:left;
flex:1;
margin-left:2%;
line-height:1.1;
}

/* TITULO */

.titulo{
font-size:clamp(8px,1.2vw,15px);
font-weight:900;
letter-spacing:0.3px;
}

/* SUBTITULO */

.subtitulo{
font-size:clamp(8px,1.2vw,15px);
font-weight:900;
}

/* NUMERO */

.numero{
font-size:clamp(9px,1.5vw,18px);
letter-spacing:0.1em;
font-weight:700;
color:red;
}

/* NUMERO VERIFICADOR */

.numero-verificador{
color:black;
}

/*******************************************/
/****************** DATOS ******************/
/*******************************************/

/* FOTO */

.foto{
position:absolute;
top:23%;
left:4%;
width:25.7%;
height:43.5%;
object-fit:cover;
}

/* NOMBRE */

.titulo-nombre{
position:absolute;
top:22.5%;
left:32%;
font-size:clamp(7.5px,1.1vw,15px);
letter-spacing:0.2px;
}

.nombre{
position:absolute;
top:26.5%;
left:32%;
font-size:clamp(9px,1.1vw,14px);
letter-spacing:0.6px;
text-transform:uppercase;
font-weight:800;
}

/* HOGAR */

.titulo-hogar{
position:absolute;
top:35.5%;
left:32%;
font-size:clamp(7.5px,1.1vw,14px);
letter-spacing:0.2px;
}

.hogar{
position:absolute;
top:40%;
left:32%;
font-size:clamp(9px,1.1vw,14px);
letter-spacing:0.1px;
text-transform:uppercase;
width:42%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-weight:800;
}

/* FECHA NACIMIENTO */

.titulo-fecha-nacimiento{
position:absolute;
top:49.5%;
left:32%;
font-size:clamp(7.5px,1.1vw,14px);
letter-spacing:0.2px;
}

.nacimiento{
position:absolute;
top:53.5%;
left:32%;
font-size:clamp(9px,1.1vw,14px);
letter-spacing:0.2px;
text-transform:uppercase;
font-weight:800;
}

/* SEXO */

.titulo-sexo{
position:absolute;
top:49.5%;
left:52%;
font-size:clamp(7.5px,1.1vw,14px);
letter-spacing:0.2px;
}

.sexo{
position:absolute;
top:53.5%;
left:52%;
font-size:clamp(9px,1.1vw,14px);
letter-spacing:0.1px;
text-transform:uppercase;
font-weight:800;
}

/* ESPECIE */

.titulo-especie{
position:absolute;
top:62.5%;
left:32%;
font-size:clamp(7.5px,1.1vw,14px);
letter-spacing:0.2px;
}

.especie{
position:absolute;
top:66.5%;
left:32%;
font-size:clamp(9px,1.1vw,14px);
font-weight:800;
letter-spacing:0.1px;
text-transform:uppercase;
}

/* RAZA */

.titulo-raza{
position:absolute;
top:62.5%;
left:52%;
font-size:clamp(7.5px,1.1vw,14px);
letter-spacing:0.2px;
}

.raza{
position:absolute;
top:66%;
left:52%;
width:24%;
font-size:clamp(9px,1.1vw,14px);
font-weight:800;
letter-spacing:0.1px;
text-transform:uppercase;
}

/* FECHAS */

.f1,
.f2,
.f3{
position:absolute;
right:6%;
width:17.5%;
font-size:clamp(7px,1vw,12px);
text-align:center;
white-space:nowrap;
}

.f1{top:23.5%;}
.f2{top:36.5%;}
.f3{top:49.5%;}

.fecha{
font-weight:800;
}

/* FOTO MINI */

.foto-mini{
position:absolute;
top:65%;
right:8%;
width:11%;
height:20%;
filter:grayscale(100%);
object-fit:cover;
}

/* FOOTER */

.barcode-box{
position:absolute;
top:80%;
left:4%;
width:45%;
text-align:center;
}

#barcode{
max-width:100%;
height:auto;
display:block;
margin:auto;
}

/* =====================================================
DNI REVERSO
===================================================== */

/* CONSTANCIAS */

.constancias{
position:absolute;
top:5%;
left:4%;
width:70%;
height:28%;
display:grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows:repeat(2,1fr);
border:1px solid #3A5F8A;
}

.constancias button {
    position: relative;
    overflow: hidden;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4%;
    font-size:clamp(6px,0.95vw,10px);
    border:1px solid #3A5F8A;
    background:transparent;
    cursor:pointer;
    line-height:1.1;
}

.sticker-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
}

.constancias button span,
.constancias button {
    position: relative;
    z-index: 1;
}

.constancias button:hover{
  transform:scale(0.9);
}

/* HUELLA */

.huella-box{
position:absolute;
top:4%;
right:4%;
width:18%;
display:flex;
align-items:center;
justify-content:center;
}

.huella{
width:100%;
background:white;
}

.huella-texto{
position:absolute;
right:-13%;
writing-mode:vertical-rl;
font-size:clamp(6px,0.9vw,11px);
}

/* UBICACION */

.dep{
position:absolute;
top:35%;
left:4%;
font-size:clamp(7.5px,1vw,12px);
letter-spacing:0.1px;
}

.dep-val{
position:absolute;
top:39%;
left:4%;
font-size:clamp(7.5px,1.1vw,14px);
font-weight:800;
text-transform: uppercase;
}

.prov{
position:absolute;
top:35%;
left:34%;
font-size:clamp(7.5px,1vw,12px);
letter-spacing:0.1px;
}

.prov-val{
position:absolute;
top:39%;
left:34%;
font-size:clamp(8px,1.1vw,14px);
font-weight:800;
text-transform: uppercase;
}

.dist{
position:absolute;
top:35%;
left:57%;
font-size:clamp(7.5px,1vw,12px);
letter-spacing:0.1px;
}

.dist-val{
position:absolute;
top:39%;
left:57%;
font-size:clamp(7.5px,1.1vw,14px);
font-weight:800;
text-transform: uppercase;
}

/* DIRECCION */

.direccion{
position:absolute;
top:46.5%;
left:4%;
font-size:clamp(7.5px,1vw,12px);
}

.direccion-val{
position:absolute;
top:50.5%;
left:4%;
font-size:clamp(7.5px,1.1vw,14px);
font-weight:800;
text-transform: uppercase;
}

/* OBS */

.obs{
position:absolute;
top:62%;
left:4%;
width:60%;
font-size:clamp(7.5px,1vw,12px);
line-height:1.2;
}

/* PDF417 */

.pdf417-box{
position:absolute;
bottom:0%;
left:4%;
width:70%;
height:29%;
background:white;
}

/* TEXTO VERTICAL */

.dni-donly{
position:absolute;
bottom:3%;
left:74.5%;
writing-mode:vertical-rl;
font-size:clamp(6.5px,1vw,13px);
text-align:center;
font-weight:800;
}

/* AZTEC */

.aztec-box{
position:absolute;
bottom:12%;
right:0%;
width:18%;
height:28%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:4%;
box-sizing:border-box;
gap:7%;
}

.aztec-info{
width:100%;
writing-mode:vertical-rl;
transform:rotate(180deg);
display:flex;
align-items:center;
justify-content:center;
font-size:clamp(7.5px,0.8vw,11px);
font-weight:800;
letter-spacing:0.5px;
}

/* CODIGOS */

#aztec{
width:100%;
height:auto;
}

#pdf417{
width:100%;
height:100%;
}

/* =====================================================
BTN GIRAR
===================================================== */

.btn-girar{
position:fixed;
bottom:30px;
right:30px;
width:45px;
height:45px;
border-radius:50%;
border:none;
background:white;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
cursor:pointer;
transition:.25s;
z-index:1000;
}

.btn-girar:hover{
transform:scale(1.1);
}

/* =====================================================
BTN DESCARGAR
===================================================== */

.btn-descargar{
position:fixed;
bottom:30px;
right:90px;
width:45px;
height:45px;
border-radius:50%;
border:none;
background:white;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
cursor:pointer;
transition:.25s;
z-index:1000;
}

.btn-descargar:hover{
transform:scale(1.1);
}

/* =========================================
   OVERLAY CARGA DESCARGA DNI
========================================= */

.overlay-carga{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;

    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
}

/* ACTIVO */
.overlay-carga.activo{
    opacity: 1;
    visibility: visible;
}

/* BOX */
.loader-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* TEXTO */
.loader-box p{
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .5px;
}

/* SPINNER */
.loader{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,.2);
    border-top-color: #2196f3;
    animation: girar .8s linear infinite;
}

/* ANIMACION */
@keyframes girar{
    to{
        transform: rotate(360deg);
    }
}

/* =====================================================
MEDIA QUERIES
===================================================== */

/* layout responsive */

@media (max-width:650px){

.layout{
flex-direction:column;
}

.lado-izquierdo{
width:100%;
order:2;
padding:5px;
}

.lado-derecho{
order:1;
width:100%;
padding:0%;
}

.dni{
zoom:150%;
}
}

@media (max-width:550px){
.dni{
zoom:130%;
}
}

@media (max-width:430px){

.dni{
zoom:110.5%;
}

.lado-izquierdo{
width:100%;
order:2;
padding:5px;
}

.card-dni{
padding:10px;
}

.lado-derecho{
padding-bottom:10px;
}
}

/* DNI responsive */



@media (min-width:500px){

.f1,
.f2,
.f3{
font-weight:700;
}

}

@media (max-width:350px){

.nombre,
.hogar,
.nacimiento,
.sexo,
.especie,
.raza{
zoom:90%;
}
}

@media (max-width: 700px) {
  .layout {
    margin-top: -10px;
  }
}

/* reverso responsive */

@media (max-width:450px){

.lado-derecho{
padding:0px;
}

.lado-izquierdo{
zoom:90%;
padding:0px;
margin:0 auto;
}

.card-dni{
padding:15px;
width:85%;
margin:10px auto;
}

.obs{
top:63% !important;
}

.aztec-box{
bottom:12%;
width:21%;
height:31%;
right:0%;
}
}

@media (max-width:390px){

.lado-derecho{
width:100% !important;
padding:0px;
}

.lado-izquierdo{
zoom:85%;
margin:0 auto;
min-height: calc(100vh - 90px); /* ajusta 80px si tu header cambia */
}

.card-dni{
padding:15px;
width:90%;
margin:10px auto;
}

.obs{
top:61% !important;
}

.aztec-box{
bottom:14%;
}

.dni{
zoom:100% !important;
}

}

@media (max-width: 370px) {
    .lado-derecho {
        margin-top: -10px !important;
    }
}