/* =========================================================
   Posada - Estilos generales
   Paleta inspirada en naturaleza: verdes, tierra, madera, crema
   ========================================================= */
:root{
    --verde-oscuro:#2e6b3e;
    --verde-medio:#4c9a5b;
    --verde-claro:#e7f3e9;
    --tierra:#8a5a35;
    --crema:#faf6ef;
    --madera:#6b4226;
    --texto:#2c2c2c;
    --alerta:#c0392b;
    --exito:#1a7a1a;
    --radio:14px;
    --sombra:0 4px 16px rgba(46,107,62,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
    font-family:'Segoe UI', Tahoma, Verdana, sans-serif;
    background:var(--crema);
    color:var(--texto);
    line-height:1.5;
}
a{color:var(--verde-oscuro); text-decoration:none;}
a:hover{text-decoration:underline;}

/* --- Accesibilidad / Modo TAB --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline:3px solid #ff9800;
    outline-offset:2px;
    border-radius:4px;
}
.skip-link{
    position:absolute; left:-999px; top:0; background:var(--verde-oscuro); color:#fff;
    padding:10px 16px; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* --- Header --- */
.app-header{
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(120deg,var(--verde-oscuro),var(--verde-medio));
    color:#fff; padding:12px 20px; flex-wrap:wrap; gap:10px;
    box-shadow:var(--sombra);
}
.brand{display:flex; align-items:center; gap:10px; color:#fff;}
.brand-logo{height:48px; width:48px; object-fit:contain; border-radius:50%; background:#fff; padding:3px;}
.brand-name{font-size:1.2rem; font-weight:700;}
.main-nav{display:flex; gap:14px; flex-wrap:wrap;}
.main-nav a{color:#fff; font-weight:600; padding:6px 10px; border-radius:8px;}
.main-nav a:hover{background:rgba(255,255,255,.18); text-decoration:none;}

/* --- Main / cards --- */
.app-main{max-width:1100px; margin:0 auto; padding:20px;}
.card{
    background:#fff; border-radius:var(--radio); box-shadow:var(--sombra);
    padding:22px; margin-bottom:20px;
}
.hero{
    display:flex; gap:24px; align-items:center; flex-wrap:wrap;
    background:var(--verde-claro); border-radius:var(--radio); padding:26px; margin-bottom:24px;
}
.hero img.logo-grande{ width:140px; height:140px; object-fit:contain; background:#fff; border-radius:50%; padding:10px; box-shadow:var(--sombra);}
.hero .tarifa{font-size:1.8rem; color:var(--verde-oscuro); font-weight:800;}
.hero .tarifa small{display:block; font-size:.95rem; font-weight:400; color:var(--madera);}

/* --- Botones --- */
.btn{
    display:inline-block; background:var(--verde-oscuro); color:#fff; border:none;
    padding:10px 18px; border-radius:8px; cursor:pointer; font-size:1rem; font-weight:600;
}
.btn:hover{background:var(--verde-medio); text-decoration:none;}
.btn-secundario{background:var(--tierra);}
.btn-secundario:hover{background:var(--madera);}
.btn-peligro{background:var(--alerta);}
.btn-peligro:hover{background:#962b20;}
.btn-block{display:block; width:100%; text-align:center;}

/* --- Formularios --- */
label{display:block; font-weight:600; margin:10px 0 4px;}
input[type=text], input[type=tel], input[type=number], input[type=password],
input[type=date], input[type=email], select, textarea{
    width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:8px; font-size:1rem;
}
.form-row{display:flex; gap:14px; flex-wrap:wrap;}
.form-row > div{flex:1; min-width:200px;}
.help-text{font-size:.85rem; color:#666;}

/* --- Tablas --- */
table{width:100%; border-collapse:collapse; background:#fff;}
th, td{padding:10px 12px; border-bottom:1px solid #eee; text-align:left;}
th{background:var(--verde-oscuro); color:#fff;}
tr:hover{background:#f5faf5;}

/* --- Galería --- */
.galeria-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.galeria-grid img{width:100%; height:160px; object-fit:cover; border-radius:10px; box-shadow:var(--sombra);}

/* --- Mapa --- */
#mapa{height:400px; border-radius:var(--radio); box-shadow:var(--sombra);}

/* --- Cédula de fidelidad (formato tarjeta de crédito, 85.6mm x 53.98mm) --- */
.id-card-wrap{ max-width:420px; margin:0 auto; }
.id-card{
    position:relative;
    width:100%;
    aspect-ratio:85.6/53.98;
    background:
        repeating-linear-gradient(115deg, rgba(46,107,62,.035) 0 2px, transparent 2px 6px),
        linear-gradient(135deg,#fdfcf8,#f2f7f0 55%,#eaf3ea);
    border:1.5px solid var(--verde-oscuro);
    border-radius:14px;
    box-shadow:var(--sombra);
    overflow:hidden;
    padding:4.5% 5%;
    box-sizing:border-box;
    font-family:'Segoe UI', Tahoma, sans-serif;
    color:var(--texto);
    display:flex;
    flex-direction:column;
}
.id-card::before{
    /* marca de agua: logo grande y tenue en la esquina */
    content:"";
    position:absolute;
    top:-10%; right:-8%;
    width:65%; aspect-ratio:1/1;
    background-image:var(--logo-watermark, none);
    background-size:contain; background-repeat:no-repeat;
    opacity:.07;
    pointer-events:none;
}
.id-card::after{
    /* franja inferior estilo tarjeta oficial, en tonos de la posada */
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:6px;
    background:linear-gradient(90deg,var(--verde-oscuro) 0 33%, var(--crema) 33% 66%, var(--tierra) 66% 100%);
}
.id-card-header{ display:flex; align-items:center; gap:8px; }
.id-card-header img.id-logo{ width:13%; min-width:26px; flex-shrink:0; border-radius:50%; background:#fff; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.id-card-header .id-titles{ line-height:1.1; }
.id-card-header .id-title{ font-weight:800; color:var(--verde-oscuro); font-size:clamp(11px,3.6vw,15px); letter-spacing:.5px; text-transform:uppercase; }
.id-card-header .id-subtitle{ font-size:clamp(7px,2.1vw,9px); color:var(--madera); font-weight:600; }

.id-card-body{ margin-top:3%; flex:1; display:flex; justify-content:space-between; gap:6px; }
.id-card-fields{ flex:1; min-width:0; }
.id-field-label{ font-size:clamp(6.5px,1.9vw,8px); font-weight:800; color:var(--verde-oscuro); text-transform:uppercase; letter-spacing:.3px; margin-top:5%; }
.id-field-value{ font-size:clamp(9px,2.6vw,12.5px); font-weight:600; color:var(--texto); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.id-field-row{ display:flex; gap:14px; }

.id-category-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:clamp(14px,4.2vw,20px); height:clamp(14px,4.2vw,20px);
    border-radius:50%; background:var(--tierra); color:#fff; font-weight:800;
    font-size:clamp(8px,2.3vw,11px); margin-left:6px;
}

.id-card-qr{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; flex-shrink:0; }
.id-card-qr img{ width:clamp(46px,17vw,74px); height:auto; border-radius:4px; background:#fff; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.15); }

.id-card-footer{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:3%; }
.id-signature{ font-size:clamp(6px,1.7vw,7.5px); color:#777; border-top:1px solid #999; padding-top:2px; width:38%; text-align:center; }
.id-code{ font-weight:800; color:var(--verde-oscuro); font-size:clamp(9px,2.6vw,12px); letter-spacing:.5px; }
.id-webfooter{ text-align:center; font-size:clamp(6px,1.6vw,7px); color:var(--verde-medio); margin-top:2%; }

/* --- Dashboard huésped --- */
.resumen-gastos{display:flex; gap:16px; flex-wrap:wrap;}
.resumen-gastos .caja{flex:1; min-width:160px; background:var(--verde-claro); border-radius:10px; padding:16px; text-align:center;}
.resumen-gastos .caja .valor{font-size:1.4rem; font-weight:800; color:var(--verde-oscuro);}

/* --- Estados --- */
.badge{padding:4px 10px; border-radius:20px; font-size:.8rem; font-weight:700; color:#fff;}
.badge-ok{background:var(--exito);}
.badge-off{background:#999;}
.badge-pend{background:#e0a800;}
.badge-cancel{background:var(--alerta);}

/* --- Captcha --- */
.captcha-box{background:var(--verde-claro); border-radius:8px; padding:10px 14px; display:flex; align-items:center; gap:10px; font-weight:700;}

/* --- Footer --- */
.app-footer{
    text-align:center; padding:20px; background:var(--madera); color:#fff; margin-top:30px;
}
.social-share{display:flex; gap:14px; justify-content:center; margin-top:8px;}
.social-share a{color:#fff; font-weight:700;}

/* --- Calendario disponibilidad --- */
.calendario-dias{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.calendario-dias .dia{padding:10px 4px; text-align:center; border-radius:8px; font-size:.85rem; background:#eee; cursor:pointer;}
.calendario-dias .dia.libre{background:var(--verde-claro); color:var(--verde-oscuro); font-weight:700;}
.calendario-dias .dia.ocupado{background:#f5c6c6; color:var(--alerta); cursor:not-allowed;}
.calendario-dias .dia.seleccionado{background:var(--verde-oscuro); color:#fff;}

/* --- Responsive --- */
@media (max-width: 768px){
    .app-header{flex-direction:column; align-items:flex-start;}
    .main-nav{width:100%; justify-content:space-between;}
    .hero{flex-direction:column; text-align:center;}
    .form-row{flex-direction:column;}
    #mapa{height:280px;}
}