/* Palace Mare — theme override para el frontend legacy de phfe.
   Reskinea las clases Bootstrap/legacy EXISTENTES (btn, panel, modal, table,
   progressbar, alert...) con los tokens Mare, sin renombrarlas: facturacion.js,
   bootbox, jquery-validate y el modal de Bootstrap dependen de esos nombres
   de clase/id tal cual. Requiere mare-tokens.css cargado antes que este archivo. */

html, body {
  font-family: var(--font-base);
  color: var(--fg-default);
}

body {
  background: var(--bg-alternative) !important;
}

p:lang(es-MX), span:lang(es-MX), label:lang(es-MX) {
  font-family: var(--font-base);
}

/* ---------- Navbar / header ---------- */
.navbar {
  background: var(--bg-accent) !important;
  border: none;
  box-shadow: var(--shadow-raised);
}

.navbar-name {
  color: var(--fg-on-accent) !important;
}

.navbar-top-links li a,
.navbar-top-links li .fa {
  color: var(--fg-on-accent) !important;
}

.navbar-top-links li:hover a,
.navbar-top-links li:hover .fa,
.navbar-top-links li a:hover {
  color: var(--color-copper-400) !important;
}

.navbar-top-links li button,
.navbar-top-links li button:focus {
  background: var(--bg-accent-hover);
  color: var(--fg-on-accent);
  border: none;
  border-radius: var(--component-button-radius);
}

.navbar-top-links li button:hover {
  color: var(--fg-on-accent);
  background: var(--bg-accent-active);
}

/* ---------- Contenedores tipo tarjeta ---------- */
.panel,
.panel-default {
  border: 1px solid var(--border-default);
  border-radius: var(--component-container-m-radius);
  box-shadow: var(--shadow-raised);
  background: var(--bg-default);
}

.panel-body {
  color: var(--fg-default);
  font-size: var(--font-body-m-size);
  font-family: var(--font-base);
}

.panel-footer {
  background: transparent;
  border-top: 1px solid var(--border-default);
  color: var(--fg-weak);
  font-size: var(--font-body-xs-size);
}

.page-header {
  font-family: var(--font-brand);
  font-size: var(--font-title-l-size);
  line-height: var(--font-title-l-lh);
  font-weight: var(--font-title-l-weight);
  color: var(--fg-default);
  border-bottom: none;
}

.page-title {
  font-family: var(--font-brand);
  font-size: var(--font-title-m-size);
  font-weight: var(--font-title-m-weight);
  color: var(--fg-default);
}

.page-topic {
  font-family: var(--font-brand);
  font-size: var(--font-title-s-size);
  color: var(--fg-default);
}

/* ---------- Botones ---------- */
.btn {
  font-family: var(--font-base);
  border-radius: var(--component-button-radius);
  transition: background-color 150ms cubic-bezier(0.2,0,0,1);
}

.btn-custom,
.btn-custom:focus {
  background: var(--bg-accent);
  color: var(--fg-on-accent);
  border: none;
}

.btn-custom:hover {
  background: var(--bg-accent-hover);
  color: var(--fg-on-accent);
  border: none;
}

.btn-success,
.btn-success:focus {
  background-color: var(--bg-accent) !important;
  border: 1px solid var(--bg-accent) !important;
  color: var(--fg-on-accent) !important;
}

.btn-success:hover {
  background: var(--bg-accent-hover) !important;
  border-color: var(--bg-accent-hover) !important;
  color: var(--fg-on-accent) !important;
}

.btn-warning,
.btn-warning:focus {
  background-color: var(--bg-highlight) !important;
  border: 1px solid var(--bg-highlight) !important;
  color: var(--fg-on-accent) !important;
}

.btn-warning:hover {
  background-color: var(--color-bronze-600) !important;
  filter: brightness(0.92);
}

.btn-danger,
.btn-danger:focus {
  background-color: var(--bg-danger) !important;
  border: 1px solid var(--bg-danger) !important;
  color: var(--fg-on-danger) !important;
}

.btn-danger:hover {
  background-color: var(--bg-danger-hover) !important;
}

.btn-action,
.btn-action:focus {
  color: var(--fg-accent);
  border: 1px solid var(--border-strong);
  border-radius: var(--component-button-radius);
  background: transparent;
}

.btn-action:hover {
  color: var(--fg-on-accent);
  background: var(--bg-accent);
}

/* ---------- Formularios ---------- */
.form-control,
.group-input-custom .input-custom,
.group-input-custom select.input-custom {
  font-family: var(--font-base);
  border-radius: var(--component-input-radius);
  border: 1px solid var(--border-default);
  color: var(--fg-default);
}

.group-input-custom .input-custom,
.group-input-custom select.input-custom {
  border-radius: 0;
  border-bottom: 1px solid var(--border-default);
}

.form-control:focus,
.group-input-custom .input-custom:focus {
  border-color: var(--border-accent);
  box-shadow: none;
}

.group-input-custom label {
  color: var(--fg-weak);
}

input.error,
select.error,
.group-input-custom .input-custom.error {
  border-color: var(--border-danger) !important;
}

label.error {
  color: var(--fg-danger);
  font-size: var(--font-label-s-size);
  font-weight: var(--font-label-s-weight);
  margin-top: 4px;
}

.input-suggested {
  background-color: var(--bg-accent-weak) !important;
}

/* ---------- Tablas ---------- */
.table > thead > tr > th {
  font-family: var(--font-base);
  font-weight: var(--font-label-s-weight);
  color: var(--fg-weak);
  border-bottom: 1px solid var(--border-default);
}

.table > tbody > tr > td {
  border-top: 1px solid var(--border-default);
  color: var(--fg-default);
}

.table-condensed,
.total {
  background-color: var(--bg-alternative);
}

/* ---------- Alertas / banners ---------- */
.alert-danger {
  background: var(--bg-danger-weak);
  border: 1px solid var(--border-danger);
  color: var(--fg-danger);
  border-radius: var(--radius-lg);
  font-weight: var(--font-label-s-weight);
}

.alert-warning {
  background-color: var(--bg-warning-weak) !important;
  border-color: var(--border-warning) !important;
  color: var(--fg-warning) !important;
  border-radius: var(--radius-lg);
}

/* ---------- Modal ---------- */
.modal-content {
  border-radius: var(--component-dialog-radius);
  border: none;
  box-shadow: var(--shadow-overlay);
}

.modal-header {
  color: var(--fg-default);
  border-bottom: 1px solid var(--border-default);
}

.modal-footer {
  border-top: 1px solid var(--border-default);
}

/* ---------- Progressbar (stepper) ---------- */
.multi_step_form #progressbar li {
  font-family: var(--font-base);
  color: var(--fg-weak);
}

.multi_step_form #progressbar li:before {
  background: var(--bg-alternative);
  color: var(--fg-weak);
}

.multi_step_form #progressbar li:after {
  background: var(--bg-alternative);
}

.multi_step_form #progressbar li.active {
  color: var(--fg-accent);
}

.multi_step_form #progressbar li.active:before,
.multi_step_form #progressbar li.active:after {
  background: var(--bg-accent);
  color: var(--fg-on-accent);
}

.multi_step_form {
  background: var(--bg-alternative);
}

/* El wizard viejo pintaba #form-cfdi blanco de punta a punta; en el diseño
   Mare el blanco es solo de las tarjetas de contenido (mare-card, mare-panel,
   etc.), no del formulario completo -- si no, el texto fuera de la tarjeta
   (titulos, instrucciones) queda "dentro" del mismo fondo blanco. */
.multi_step_form #form-cfdi {
  background: transparent;
}

/* ---------- Descarga / bootbox ---------- */
.bootbox .modal-content {
  border-radius: var(--component-dialog-radius);
}

.fa-loading-icon {
  color: var(--fg-accent);
}

/* El wrapper original (common.css) usa position:absolute + top:35% relativo
   al documento, no al viewport: en pasos largos (fs-data/fs-confirm) con la
   pagina scrolleada, quedaba fuera de vista o solo alcanzaba a cubrir el
   primer tramo (se veia como si solo tapara el main). Con position:fixed
   sobre el viewport completo siempre cubre toda la pagina sin depender del
   scroll ni de la altura del contenido.
   No se redeclara "display" aqui: facturacion.js usa jQuery .show()/.hide()
   sobre este mismo selector, y .show() restaura el display por defecto del
   tag (block), no el declarado por la clase CSS (flex) - forzar flex en el
   wrapper rompe el .hide() (queda siempre visible). El centrado del icono
   se hace con position:absolute + transform en .mare-loading-icon, que no
   depende del modo de display del wrapper. */
.fa-loading-icon-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* Loader de marca (igual al motor de reservaciones de Palace Resorts):
   corona estatica al centro con un anillo incompleto que gira alrededor,
   en vez del spinner generico de FontAwesome. */
.mare-loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mare-loading-icon-svg {
  width: 160px;
  height: 160px;
  fill: var(--fg-accent);
}

/* ===================================================================
   Shell tipo "Mare" (sidebar + contenido) — capa nueva, no reemplaza
   nada de lo que ya usa facturacion.js/bootbox/jquery-validate: los
   ids/names funcionales viven igual dentro de .mare-main.
   =================================================================== */
.mare-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
  background: var(--bg-alternative);
}

.mare-sidebar {
  flex: 0 0 260px;
  width: 260px;
  background: var(--bg-default);
  border-right: 1px solid var(--border-default);
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Ancla el sidebar al viewport en vez de estirarse a la altura del
     contenido principal (align-items:stretch en .mare-shell), para que el
     footer no quede visualmente "perdido" muy por debajo del contenido en
     pasos largos (p.ej. datos fiscales) y se pueda ver sin scroll largo. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.mare-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-default);
  font-family: var(--font-brand);
  font-size: var(--font-label-m-size);
  font-weight: 600;
  margin-bottom: 32px;
}

.mare-sidebar-logo img {
  /* Logo Palace Resorts (441x192): ancho fijo para que se vea identico en el
     sidebar del formulario y en el header del landing (index.html). */
  width: 130px;
  max-width: 100%;
  height: auto;
}

.mare-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.mare-sidebar-nav a,
.mare-sidebar-nav button,
.mare-sidebar-nav span.is-active {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  color: var(--fg-weak);
  text-decoration: none;
  font-family: var(--font-base);
  font-size: var(--font-label-s-size);
  font-weight: var(--font-label-s-weight);
  background: transparent;
  border: none;
  cursor: pointer;
}

.mare-sidebar-nav a:hover,
.mare-sidebar-nav button:hover {
  background: var(--bg-hover);
  color: var(--fg-default);
}

.mare-sidebar-nav a.is-active,
.mare-sidebar-nav button.is-active {
  background: var(--bg-accent-weak);
  color: var(--fg-accent);
}

.mare-sidebar-section {
  border-top: 1px solid var(--border-default);
  padding-top: 16px;
  margin-top: 16px;
}

.mare-sidebar-section:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.mare-sidebar-stay-empty {
  color: var(--fg-weak);
  font-size: var(--font-body-s-size);
}

#sidebar-stay-info {
  margin-top: 10px;
}

/* La info de estancia clonada (#sidebar-stay-details) reutiliza .mare-guest-*
   de la tarjeta de "Mi Reservación", pero en 260px de ancho el tamaño de
   titulo (24px) del hotel es excesivo: se reduce y se le da formato de
   tarjeta compacta. */
#sidebar-stay-details .mare-guest-hotel {
  font-size: var(--font-label-m-size);
  line-height: var(--font-label-m-lh);
}

#sidebar-stay-details .mare-guest-info {
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-alternative);
  gap: 4px;
}

#sidebar-stay-details .mare-guest-line {
  font-size: var(--font-body-xs-size);
}

#sidebar-stay-details .mare-guest-line strong {
  color: var(--fg-default);
  font-weight: var(--font-label-s-weight);
}

.mare-sidebar-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mare-sidebar-footer i {
  margin-top: 2px;
  font-size: 14px;
  color: var(--fg-weak);
}

.mare-sidebar-footer p {
  margin: 0 0 2px;
  font-size: var(--font-body-s-size);
  color: var(--fg-weak);
}

.mare-sidebar-footer a {
  font-size: var(--font-body-s-size);
  font-weight: var(--font-label-s-weight);
  color: var(--fg-accent);
  text-decoration: none;
}

.mare-sidebar-footer a:hover {
  text-decoration: underline;
}

.mare-main {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Fondo blanco de punta a punta, igual que el panel izquierdo: el padding
   vive aqui adentro (no en .mare-main) para que la franja no deje huecos
   grises a los lados. */
.mare-main-header {
  background: var(--bg-default);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 40px;
  flex: 0 0 auto;
}

.mare-main-title {
  font-family: var(--font-brand);
  font-size: var(--font-title-l-size);
  line-height: var(--font-title-l-lh);
  font-weight: var(--font-title-l-weight);
  color: var(--fg-default);
  margin: 0 0 4px 0;
}

.mare-main-subtitle {
  color: var(--fg-weak);
  font-size: var(--font-body-s-size);
  margin: 0;
}

.mare-main-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--fg-weak);
  font-size: var(--font-body-s-size);
  white-space: nowrap;
}

.mare-main-actions a {
  color: var(--fg-weak);
  text-decoration: none;
}

.mare-main-actions a:hover {
  color: var(--fg-accent);
}

.mare-main-actions .mare-lang-current {
  color: var(--fg-default);
  font-weight: var(--font-label-s-weight);
  text-decoration: underline;
}

/* El cuerpo vive sobre el fondo gris de la pagina (var(--bg-alternative)),
   sin borde propio: solo las tarjetas de contenido (mare-card/mare-panel/
   mare-guest-list/etc.) llevan blanco+borde, igual que en el diseño. */
.mare-main-body {
  padding: 24px 40px 32px;
  flex: 1;
}

.mare-main-content {
  background: transparent;
}

.mare-main-content .multi_step_form {
  padding: 0;
}

/* El wizard viejo traia su propio padding de fieldset (0 100px / 0 15px),
   pensado para un layout centrado. En el shell Mare el gutter horizontal
   ya lo da .mare-main-body: ningun fieldset debe sumarle padding propio o
   el contenido "salta" respecto al encabezado y a la busqueda de reserva. */
.mare-main-content .multi_step_form #form-cfdi fieldset {
  padding: 0 !important;
}

/* El wizard viejo centraba #form-cfdi (form.css); el diseño Mare alinea
   titulos/instrucciones/tarjetas a la izquierda en todos los pasos. */
.mare-main-content .multi_step_form #form-cfdi {
  text-align: left;
}

/* Separacion entre la fila de botones Atras/Continuar y el contenido de
   arriba (tarjeta, alertas), y entre los propios botones. */
.mare-main-content .multi_step_form #form-cfdi fieldset p.text-center {
  margin-top: 24px;
}

.mare-main-content .multi_step_form #form-cfdi fieldset p.text-center .mare-btn + .mare-btn {
  margin-left: 12px;
}

/* fs-data (datos fiscales): mismo formato de etiqueta+campo que el card de
   busqueda de reservacion (.mare-field), en vez del viejo floating-label
   Bootstrap (group-input-custom/input-custom). */
#fs-data .mare-field {
  margin: 0 0 16px;
}

#fs-data .mare-field label {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: var(--font-body-xxs-size);
}

#fs-data .mare-data-card {
  margin-top: 0;
}

/* fs-confirm reutiliza el mismo fragmento de tabla que fs-pagos
   (mare-table-cards) pero sin el .mare-panel que lo envuelve alli: le damos
   su propia tarjeta para que no quede sin borde al perder el marco unico
   que antes daba .mare-main-content. */
#fs-confirm .table-responsive {
  border: 1px solid var(--border-default);
  border-radius: var(--component-container-m-radius);
  background: var(--bg-default);
  overflow: hidden;
}

/* "Facturar a": resumen de los datos fiscales capturados en el paso
   anterior (viene de form/cfdi.php, actionID 14). */
.mare-receptor-card {
  margin-bottom: 20px;
}

.mare-receptor-card .mare-section-label {
  padding: 0;
  margin: 0 0 8px;
}

.mare-receptor-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  font-size: var(--font-body-s-size);
  color: var(--fg-default);
}

.mare-receptor-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mare-receptor-row span {
  font-size: var(--font-body-xs-size);
  color: var(--fg-weak);
}

.mare-receptor-row strong {
  color: var(--fg-default);
  font-weight: var(--font-label-s-weight);
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .mare-receptor-data {
    grid-template-columns: 1fr;
  }
}

/* Checkbox de seleccion de pago (fs-pagos): tag + monto quedan a la
   derecha via .mare-txn-status-amount, el checkbox va junto al titulo. */
.mare-txn-select {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.mare-txn-select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--bg-accent);
}

/* Renglon marcado: mismo fondo azul suave del diseño, aplicado a toda la
   fila (no solo al checkbox) para que se note de un vistazo cuales pagos
   estan seleccionados. */
.mare-table-cards.mare-table-transactions > tbody > tr.is-selected {
  background: var(--bg-accent-weak);
}

.mare-status-tag.is-danger {
  background: var(--bg-danger-weak);
  color: var(--fg-danger);
}

/* Aviso que aparece al marcar para seleccion un pago ya facturado (fs-pagos):
   se refacturara con los datos fiscales del siguiente paso. */
.mare-txn-refacture-note {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-warning-weak);
  color: var(--fg-warning);
  font-size: var(--font-body-xs-size);
  border-radius: var(--radius-lg);
}

/* Refacturacion bloqueada: el RFC recien capturado es el mismo que el de
   la factura existente, no se envia esa transaccion al servidor. */
.mare-txn-refacture-note.is-blocked {
  background: var(--bg-danger-weak);
  color: var(--fg-danger);
}

.mare-form-instructions {
  color: var(--fg-weak);
  font-size: var(--font-body-m-size);
  margin: 0 0 20px;
}

.mare-section-label {
  font-size: var(--font-body-xxs-size);
  font-weight: var(--font-label-xs-weight);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fg-weak);
  padding: 18px 20px 0 20px;
}

/* Tablas generadas por PHP (cfdi.reserva.php, view/cfdi.php): se ven como
   listas de tarjetas sin perder la estructura tr/td que usa facturacion.js
   (reinvoice() lee closest('tr').children('td')). */
.mare-table-cards {
  width: 100%;
  border-collapse: collapse;
}

.mare-table-cards > thead {
  display: none;
}

.mare-table-cards > tbody > tr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
  width: auto !important;
}

.mare-table-cards > tbody > tr:first-child {
  border-top: none;
}

.mare-table-cards > tbody > td,
.mare-table-cards > tbody > tr > td {
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  font-family: var(--font-base);
  font-size: var(--font-body-s-size);
  color: var(--fg-default);
}

.mare-table-cards > tbody > tr > td:first-child {
  flex: 1 1 auto;
  font-weight: var(--font-label-s-weight);
}

.mare-table-cards > tbody > tr > td:has(.mare-status-tag) {
  flex: 1 1 100%;
}

/* Transacciones: bloque de info (titulo/fecha) a la izquierda, monto a la
   derecha en la misma linea, y el estado/detalle de factura ocupando el
   ancho completo del registro debajo -- texto siempre a la izquierda, nunca
   centrado. */
.mare-table-cards.mare-table-transactions > tbody > tr {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  row-gap: 10px;
  align-items: start;
}

.mare-table-cards.mare-table-transactions > tbody > tr > td {
  text-align: left;
  flex: none;
  font-weight: normal;
}

.mare-table-cards.mare-table-transactions > tbody > tr > td:nth-child(3) {
  grid-column: 1 / -1;
}

.mare-txn-title {
  font-weight: var(--font-label-s-weight);
  color: var(--fg-default);
}

.mare-txn-subtitle {
  margin-top: 2px;
  color: var(--fg-weak);
  font-size: var(--font-body-xs-size);
}

.mare-txn-amount-col {
  text-align: right !important;
}

.mare-txn-amount {
  font-weight: var(--font-label-m-weight);
  color: var(--fg-default);
}

/* Pago disponible (aun no facturado): tag + monto en el mismo renglon,
   igual al diseño -- el detalle de factura ya facturada sigue ocupando
   todo el ancho de la fila (ver td:nth-child(3)). */
.mare-txn-status-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 560px) {
  .mare-table-cards.mare-table-transactions > tbody > tr {
    grid-template-columns: 1fr;
  }

  .mare-table-cards.mare-table-transactions > tbody > tr > td:nth-child(2),
  .mare-table-cards.mare-table-transactions > tbody > tr > td:nth-child(3) {
    grid-column: 1;
  }

  .mare-table-cards.mare-table-transactions > tbody > tr > td.mare-txn-amount-col {
    text-align: left !important;
  }
}

/* Ficha del huesped/reservacion: bloque de texto simple (hotel, fechas,
   reserva, titular) en vez de tabla -- una tarjeta por reservacion. */
.mare-guest-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--component-container-m-radius);
  background: var(--bg-default);
  overflow: hidden;
}

.mare-guest-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-default);
}

.mare-guest-card:first-child {
  border-top: none;
}

.mare-guest-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mare-guest-hotel {
  font-family: var(--font-brand);
  font-size: var(--font-title-s-size);
  font-weight: var(--font-title-s-weight);
  color: var(--fg-default);
}

.mare-guest-line {
  font-size: var(--font-body-s-size);
  color: var(--fg-weak);
}

/* Panel de pagos (paso "Pagos"): tarjeta con encabezado (etiqueta + conteo)
   y el listado de transacciones dentro, sin doble padding. */
.mare-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--component-container-m-radius);
  background: var(--bg-default);
  overflow: hidden;
}

.mare-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.mare-panel-count {
  font-size: var(--font-body-xs-size);
  color: var(--fg-weak);
  white-space: nowrap;
}

/* Tags de estado (sin facturar / facturado) dentro de las celdas. */
.mare-status-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-body-xxs-size);
  font-weight: var(--font-label-xs-weight);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: var(--component-tag-radius);
  padding: 3px 10px;
  background: var(--bg-neutral-weak);
  color: var(--fg-weak);
}

.mare-status-tag.is-invoiced,
.mare-status-tag.is-available {
  background: var(--bg-positive-weak);
  color: var(--fg-positive);
}

/* Detalle de timbrado (fecha/RFC/nombre/UUID) del pago. */
.mare-invoice-detail {
  font-size: var(--font-body-xs-size);
  color: var(--fg-weak);
  line-height: 1.5;
}

.mare-invoice-detail strong {
  color: var(--fg-default);
}

/* Enlace de descarga del CFDI, debajo del detalle de timbrado (no boton). */
.mare-invoice-download-link {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--font-body-xs-size);
  font-weight: var(--font-label-s-weight);
  color: var(--fg-accent);
  text-decoration: underline;
}

.mare-invoice-download-link:hover {
  color: var(--fg-accent);
  text-decoration: none;
}

.mare-invoice-download-link.is-loading {
  pointer-events: none;
  opacity: 0.6;
  text-decoration: none;
}

/* Variante de alerta no incluida en mare-components.css: mensajes de exito
   inline (sustituyen los bootbox.alert que ya no se usan). */
.mare-alert-positive {
  background: var(--bg-positive-weak);
  color: var(--fg-positive);
  font-weight: var(--font-label-s-weight);
  justify-content: space-between;
}

/* Variante warning, tampoco incluida en mare-components.css (solo trae
   info/danger): mismos avisos inline sin fondo blanco+borde de Bootstrap. */
.mare-alert-warning {
  background: var(--bg-warning-weak);
  color: var(--fg-warning);
  font-weight: var(--font-label-s-weight);
}

/* Separacion del aviso respecto al campo/tarjeta de arriba y a los botones
   de abajo -- sin esto el fondo del alert queda pegado al boton. */
.multi_step_form .mare-alert {
  margin: 16px 0;
}

/* .mare-alert trae su propio display:flex (mare-components.css, cargado
   despues de common.css) y le gana en cascada a .panel-error{display:none}
   aunque .panel-error venga despues en el HTML: sin este selector mas
   especifico, los avisos .mare-alert.panel-error quedan visibles vacios
   desde el primer render en vez de solo aparecer cuando hay un mensaje. */
.mare-alert.panel-error {
  display: none;
}

/* Buscador de reservacion: vive fuera de #form-cfdi (no puede anidarse en
   otro <form>). Se muestra como tarjeta propia dentro de #reserva-locate-panel. */
.mare-reserva-search {
  margin-bottom: 20px;
  text-align: left;
}

.mare-reserva-search .mare-overline {
  margin: 0 0 16px;
}

.mare-reserva-search .mare-field {
  margin-bottom: 16px;
}

.mare-reserva-search-notice {
  margin: 0 0 20px;
  color: var(--fg-weak);
  font-size: var(--font-body-s-size);
}

.mare-reserva-search-actions {
  margin-top: 4px;
}

/* Boton de idioma en el encabezado principal: enlace de texto simple, sin
   el look de boton Bootstrap que traia #btnSetLang en el navbar legacy. */
.mare-lang-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-weak);
  font-size: var(--font-body-s-size);
  font-family: var(--font-base);
  cursor: pointer;
  text-decoration: underline;
}

.mare-lang-toggle:hover {
  color: var(--fg-accent);
}

/* Barra de pie de pagina fuera del shell, igual que en el prototipo Mare. */
.mare-page-footer {
  text-align: center;
  padding: 16px 20px;
  color: var(--fg-weak);
  font-size: var(--font-body-xs-size);
  background: var(--bg-default);
  border-top: 1px solid var(--border-default);
}

/* "Su estancia" en el sidebar: alterna entre el aviso vacio y el resumen
   una vez que se localiza/agrega una reservacion. */
#sidebar-stay-info .hidden {
  display: none !important;
}

/* Stepper vertical del sidebar: el <ul id="progressbar"> es el mismo que
   usa facturacion.js (indices/clase "active"), pero aqui vive fuera de
   .multi_step_form -- se reescribe por completo para verse como una lista
   vertical numerada en vez del stepper horizontal con iconos. */
.mare-sidebar-progress #progressbar {
  counter-reset: mare-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mare-sidebar-progress #progressbar li {
  counter-increment: mare-step;
  display: flex;
  align-items: center;
  gap: 12px;
  position: static;
  float: none;
  width: auto;
  font-family: var(--font-base);
  font-size: var(--font-body-s-size);
  color: var(--fg-weak);
}

.mare-sidebar-progress #progressbar li:before {
  content: counter(mare-step);
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11px/1 var(--font-base);
  background: var(--bg-default);
  color: var(--fg-weak);
  border: 1px solid var(--border-default);
  margin: -2px 0 0 0;
}

.mare-sidebar-progress #progressbar li:after {
  content: none;
}

.mare-sidebar-progress #progressbar li.active {
  color: var(--fg-default);
  font-weight: var(--font-label-s-weight);
}

.mare-sidebar-progress #progressbar li.active:before {
  background: var(--bg-accent);
  color: var(--fg-on-accent);
  border-color: var(--bg-accent);
}

/* ===================================================================
   Pantalla de bienvenida (index.html): mismos tokens/componentes que el
   wizard pero sin sidebar (es la pantalla previa a "Mi reservacion"). El
   texto y el boton viven directamente sobre el fondo gris, sin tarjeta.
   =================================================================== */
.mare-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-alternative);
}

.mare-landing-header {
  background: var(--bg-default);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
}

.mare-landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.mare-landing-main .mare-main-title {
  margin-bottom: 12px;
}

.mare-landing-main .mare-main-subtitle {
  max-width: 480px;
  margin: 0 auto 8px;
}

.mare-landing-actions {
  margin-top: 24px;
}

.mare-landing-main .mare-alert {
  margin-top: 24px;
  max-width: 480px;
}