/* =========================================
PANTALLA INVITADO
========================================= */

.pantalla-invitado {
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
box-sizing: border-box;
}

/* =========================================
CONTENEDOR DE CONSULTA
========================================= */

.invitado-contenedor {
width: 100%;
max-width: 520px;
transform: translateY(-20px);
padding: 32px;
background: #ffffff;
border-radius: 20px;
text-align: center;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09);
box-sizing: border-box;
}

.invitado-logo {
width: 68px;
height: 68px;
margin: 0 auto 16px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 17px;
background: #faf5e9;
font-size: 34px;
}

.invitado-contenedor h1 {
margin: 0 0 10px;
font-size: 26px;
line-height: 1.3;
}

.invitado-descripcion {
margin: 0 0 24px;
color: #68756f;
font-size: 16px;
line-height: 1.5;
}

.campo-cedula {
text-align: left;
}

.campo-cedula label {
display: block;
margin-bottom: 7px;
font-size: 15px;
font-weight: 600;
}

.campo-cedula input {
width: 100%;
min-height: 52px;
padding: 11px 14px;
border: 1px solid #ccd5d0;
border-radius: 9px;
font-size: 17px;
outline: none;
box-sizing: border-box;
}

.campo-cedula input:focus {
border-color: #c18b35;
box-shadow: 0 0 0 3px rgba(193, 139, 53, 0.13);
}

/* =========================================
BOTÓN CONSULTAR
========================================= */

.boton-consultar {
width: 100%;
min-height: 52px;
margin-top: 18px;
border: none;
border-radius: 9px;
background: #c18b35;
color: #ffffff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
}

.boton-consultar:hover {
opacity: 0.92;
transform: translateY(-1px);
}

/* =========================================
BOTÓN VOLVER AL INICIO
========================================= */

.boton-volver {
width: 100%;
margin-top: 10px;
padding: 11px 16px;
border: 1px solid #cbd8d2;
border-radius: 9px;
background: #ffffff;
color: #496158;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease;
}

.boton-volver::before {
content: "←";
margin-right: 8px;
font-size: 17px;
}

.boton-volver:hover {
background: #f1f6f3;
border-color: #9fb7ac;
transform: translateY(-1px);
}

/* =========================================
MENSAJE DE CONSULTA
========================================= */

.mensaje-consulta {
min-height: 24px;
margin-top: 16px;
color: #68756f;
font-size: 14px;
}

/* =========================================
FOOTER
========================================= */

.invitado-footer {
margin-top: 24px;
color: #7a857f;
font-size: 12px;
line-height: 1.5;
}

/* =========================================
REPORTE DEL BENEFICIARIO
========================================= */

.reporte-invitado {
width: 94%;
max-width: 1600px;
margin: 0 auto;
padding: clamp(14px, 2vw, 24px);
background: #ffffff;
border-radius: 14px;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
}

.reporte-encabezado {
text-align: center;
margin-bottom: 12px;
}

.reporte-icono {
width: clamp(40px, 4vw, 48px);
height: clamp(40px, 4vw, 48px);
margin: 0 auto 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: #faf5e9;
font-size: clamp(20px, 2vw, 24px);
}

.reporte-encabezado h1 {
margin: 0;
color: #263c33;
font-size: clamp(18px, 1.8vw, 23px);
line-height: 1.25;
}

.reporte-encabezado p {
margin: 3px 0 0;
color: #75827c;
font-size: clamp(11px, 1vw, 14px);
}

/* =========================================
DATOS
========================================= */

.reporte-datos {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 230px), 1fr)
);
gap: clamp(7px, 0.8vw, 11px);
margin-top: 10px;
}

.dato-reporte {
min-width: 0;
padding: clamp(8px, 0.8vw, 11px);
background: #f7f9f8;
border: 1px solid #e3eae6;
border-radius: 8px;
box-sizing: border-box;
}

.dato-reporte strong {
display: block;
margin-bottom: 3px;
color: #526b60;
font-size: clamp(9px, 0.75vw, 11px);
font-weight: 700;
letter-spacing: 0.3px;
}

.dato-reporte span {
display: block;
color: #263c33;
font-size: clamp(12px, 0.9vw, 14px);
line-height: 1.3;
overflow-wrap: anywhere;
word-break: break-word;
}

.dato-completo {
grid-column: 1 / -1;
}

/* =========================================
BOTÓN NUEVA CONSULTA
MISMO ESTILO DE BOTONES SECUNDARIOS
========================================= */

.boton-nueva-consulta {
display: block;
width: 100%;
max-width: 300px;
margin: 18px auto 0;
padding: 11px 16px;
border: 1px solid #cbd8d2;
border-radius: 9px;
background: #ffffff;
color: #496158;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}

.boton-nueva-consulta::before {
content: "←";
margin-right: 8px;
font-size: 16px;
}

.boton-nueva-consulta:hover {
background: #f1f6f3;
border-color: #9fb7ac;
color: #29463b;
transform: translateY(-1px);
}

/* =========================================
BOTONES DEL REPORTE
========================================= */

.botones-reporte {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 auto 20px;
}

.boton-reporte {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 92px;
height: 38px;
padding: 7px 13px;
box-sizing: border-box;
border: 1px solid #cbd8d2;
border-radius: 8px;
background: #ffffff;
color: #40564d;
font-size: 12px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}

.boton-reporte:hover {
background: #f1f6f3;
border-color: #8fa99d;
transform: translateY(-1px);
}

.boton-reporte:active {
transform: translateY(0);
}

.boton-reporte span {
font-size: 12px;
}

/* =========================================
VOLVER A CONSULTAR DESDE EL REPORTE
========================================= */

.volver-reporte {
width: 100%;
display: flex;
justify-content: center;
margin-top: 22px;
}

.boton-volver-reporte {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 300px;
min-height: 42px;
padding: 10px 18px;
box-sizing: border-box;
border: 1px solid #cbd8d2;
border-radius: 9px;
background: #ffffff;
color: #496158;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}

.boton-volver-reporte::before {
content: "←";
margin-right: 8px;
font-size: 17px;
}

.boton-volver-reporte:hover {
background: #f1f6f3;
border-color: #9fb7ac;
color: #29463b;
transform: translateY(-1px);
}

/* =========================================
ERROR
========================================= */

.resultado-error {
text-align: center;
}

.mensaje-error-consulta {
margin: 18px 0;
padding: 12px 14px;
border: 1px solid #e5c5c8;
border-radius: 8px;
background: #fff6f6;
color: #a12b35;
font-size: 14px;
font-weight: 600;
transition:
opacity 0.5s ease,
transform 0.5s ease;
}

.ocultar-mensaje {
opacity: 0;
transform: translateY(-5px);
}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 600px) {

```
.pantalla-invitado {
    padding: 15px;
}

.invitado-contenedor {
    padding: 26px 20px;
    border-radius: 17px;
    transform: translateY(-10px);
}

.invitado-logo {
    width: 58px;
    height: 58px;
    font-size: 29px;
}

.invitado-contenedor h1 {
    font-size: 23px;
}

.invitado-descripcion {
    font-size: 14px;
    margin-bottom: 20px;
}

.campo-cedula input,
.boton-consultar {
    min-height: 49px;
    font-size: 15px;
}

.reporte-invitado {
    width: 96%;
    padding: 14px;
    border-radius: 11px;
}

.reporte-datos {
    grid-template-columns: 1fr;
    gap: 7px;
}

.dato-completo {
    grid-column: auto;
}

.botones-reporte {
    gap: 6px;
}

.boton-reporte {
    min-width: 0;
    flex: 1 1 calc(33.333% - 6px);
    height: 36px;
    padding: 6px 7px;
}

.boton-reporte span {
    font-size: 10px;
}

.boton-volver-reporte,
.boton-nueva-consulta {
    width: 100%;
    max-width: 280px;
}
```

}

/* =========================================
VOLVER SEPARADO
========================================= */

.volver-separado {
width: 100%;
margin-top: 25px;
}

.volver-separado a {
display: block;
width: 100%;
padding: 11px 16px;
box-sizing: border-box;
border: 1px solid #cbd8d2;
border-radius: 9px;
background: #ffffff;
color: #496158;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}

.volver-separado a::before {
content: "←";
margin-right: 8px;
font-size: 17px;
}

.volver-separado a:hover {
background: #f1f6f3;
border-color: #9fb7ac;
color: #29463b;
transform: translateY(-1px);
}