/* Fase 9.3 — CSS verbatim de los bloques de estilo de Pages/HotelManager/Modales/ModalConstanciaHospedaje.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @ y capas D-51. */
.vc-overlay { position: fixed; inset: 0; background: rgba(15,36,56,.55); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal-2) /* D-51 (era 1060): constancia sobre el check-out */; padding: 1rem; }
.vc-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.vc-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; background: var(--hot-noche, #0F2438); color: #fff; }
.vc-head i { color: #6fdc9a; font-size: 1.15rem; }
.vc-head h2 { margin: 0; font-size: 1rem; flex: 1; }
.vc-close { cursor: pointer; opacity: .8; }
.vc-close:hover { opacity: 1; }

.vc-body { padding: 1.1rem 1.25rem; }
.vc-hint { text-align: center; font-size: .78rem; color: var(--hot-muted, #5C6D77); margin: 0 0 .9rem; }

.vc-ticket-frame { background: #F5F7F6; border: 1px dashed var(--hot-border, #D8E0E3); border-radius: 10px; padding: .5rem; }
.vc-receipt { background: #fff; border-radius: 6px; padding: 1rem 1.1rem; font-size: .82rem; color: var(--hot-ink, #1F2E27); }
.vc-receipt hr { border: none; border-top: 1px dashed var(--hot-border, #D8E0E3); margin: .7rem 0; }
.vc-logo { text-align: center; margin-bottom: .5rem; }
.vc-logo img { max-height: 48px; }
.vc-empresa { text-align: center; line-height: 1.4; }
.vc-razon { font-weight: 700; }
.vc-titulo { text-align: center; font-weight: 800; font-size: .95rem; margin-top: .6rem; letter-spacing: .02em; }
.vc-titulo-sub { text-align: center; font-size: .7rem; color: var(--hot-muted, #5C6D77); margin-bottom: .3rem; }
.vc-section-title { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--hot-petroleo, #1B5E63); margin: .5rem 0 .3rem; }
.vc-row { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; }
.vc-op-box { background: #F5F7F6; border-radius: 8px; padding: .5rem .7rem; }
.vc-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: .95rem; border-top: 1.5px solid var(--hot-ink, #1F2E27); margin-top: .5rem; padding-top: .5rem; }
.vc-footer-note { text-align: center; font-size: .72rem; color: var(--hot-muted, #5C6D77); margin-top: .8rem; }

.vc-envio-box { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.vc-envio-box label { font-size: .82rem; font-weight: 600; color: var(--hot-ink, #1F2E27); }
.vc-input { border: 1.5px solid var(--hot-border, #D8E0E3); border-radius: 8px; padding: .5rem .65rem; font-size: .9rem; }
.vc-input:focus { outline: none; border-color: var(--hot-petroleo, #1B5E63); }
.vc-error { color: #b5533c; font-size: .82rem; }
.vc-ok { color: #1B5E63; font-size: .82rem; font-weight: 600; }
.vc-btn-confirmar {
    border: none; border-radius: 9px; background: var(--hot-petroleo, #1B5E63); color: #fff;
    font-weight: 600; font-size: .88rem; padding: .55rem 1rem; cursor: pointer;
}
.vc-btn-confirmar:disabled { opacity: .6; cursor: not-allowed; }

.vc-actions { display: flex; gap: .5rem; padding: 0 1.25rem 1rem; flex-wrap: wrap; }
.vc-btn {
    flex: 1; min-width: 110px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: none; border-radius: 9px; padding: .55rem .7rem; font-size: .82rem; font-weight: 600; color: #fff; cursor: pointer;
}
.vc-btn-print { background: var(--hot-noche, #0F2438); }
.vc-btn-wa { background: #25D366; }
.vc-btn-mail { background: var(--hot-petroleo, #1B5E63); }
.vc-foot { padding: 0 1.25rem 1.1rem; }
.vc-btn-cerrar {
    width: 100%; border: 1.5px solid var(--hot-border, #D8E0E3); background: #fff; color: var(--hot-ink, #1F2E27);
    border-radius: 9px; padding: .55rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.vc-btn-cerrar:hover { border-color: var(--hot-petroleo, #1B5E63); }

@media print {
    body * { visibility: hidden; }
    #vc-receipt, #vc-receipt * { visibility: visible; }
    #vc-receipt { position: fixed; inset: 0 auto auto 0; width: 100%; }
}