/* /Layout/MainLayout.razor.rz.scp.css */
@media screen and (max-width: 768px) {
    .hidden[b-pipgsetm4a] {
        display: none;
    }   
}



.page[b-pipgsetm4a] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-pipgsetm4a] {
    flex: 1;
}

.sidebar[b-pipgsetm4a] {
    /* background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); */
}

.top-row[b-pipgsetm4a] {
    /* background-color: #f7f7f7; */
    /* border-bottom: 1px solid #d6d5d5; */
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-pipgsetm4a]  a, .top-row[b-pipgsetm4a]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-pipgsetm4a]  a:hover, .top-row[b-pipgsetm4a]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-pipgsetm4a]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-pipgsetm4a] {
        justify-content: space-between;
    }

    .top-row[b-pipgsetm4a]  a, .top-row[b-pipgsetm4a]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-pipgsetm4a] {
        flex-direction: row;
    }

    .sidebar[b-pipgsetm4a] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-pipgsetm4a] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-pipgsetm4a]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-pipgsetm4a], article[b-pipgsetm4a] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/DialogConfirm.razor.rz.scp.css */
.mud-dialog .mud-dialog-content[b-itv9txbelt] {
  padding: 18px 22px;
}
.mud-dialog .mud-dialog-title h3[b-itv9txbelt] {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}
.mud-dialog .mud-dialog-actions[b-itv9txbelt] {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 719px) {
  .mud-dialog .mud-dialog-actions[b-itv9txbelt] {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .mud-dialog .mud-button[b-itv9txbelt] {
    width: 100%;
  }
}

.mud-dialog .mud-text[b-itv9txbelt] {
  font-size: 0.98rem;
  color: #374151;
}
.mud-dialog .mud-button[Color="Color.Primary"][b-itv9txbelt] {
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  color: #fff;
}
.mud-dialog .mud-button[Color="Color.Secondary"][b-itv9txbelt] {
  background: #f3f4f6;
  color: #374151;
}
@media (max-width: 719px) {
  .mud-dialog .mud-dialog-content[b-itv9txbelt] {
    padding: 14px;
  }
}
/* /Pages/DialogInfo.razor.rz.scp.css */


/* TABLA RESERVA */
/* Estilos generales */
.tabla-contenedor[b-7gnyhovpwk] {
    width: 100%;
    margin: 20px auto;
    overflow-x: auto;
}

/* Estilos de la tabla */
.tabla-reservas[b-7gnyhovpwk] {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.tabla-reservas th[b-7gnyhovpwk],
.tabla-reservas td[b-7gnyhovpwk] {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.tabla-reservas th[b-7gnyhovpwk] {
    background-color: #242C4F;
    color: white;
    font-weight: bold;
}

.tabla-reservas tr:hover[b-7gnyhovpwk] {
    background-color: #f5f5f5;
}

.tabla-reservas tr:nth-child(even)[b-7gnyhovpwk] {
    background-color: #f8f9fa;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .tabla-reservas[b-7gnyhovpwk] {
        font-size: 14px;
    }
    
    .tabla-reservas th[b-7gnyhovpwk],
    .tabla-reservas td[b-7gnyhovpwk] {
        padding: 10px;
    }
}
/* /Pages/ExcepcionesReservasMochilas.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   ExcepcionesReservasMochilas – Mobile-App UI
   ═══════════════════════════════════════════ */

/* ── Container ── */
.app-container[b-p8yn0naeok] {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.app-header[b-p8yn0naeok] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px 8px;
}

.header-icon[b-p8yn0naeok] {
  color: var(--mud-palette-primary);
}

.header-title[b-p8yn0naeok] {
  font-weight: 700 !important;
  line-height: 1.2;
}

.header-sub[b-p8yn0naeok] {
  opacity: 0.7;
}

/* ── Cards genéricas ── */
.app-card[b-p8yn0naeok] {
  border-radius: 16px !important;
  overflow: hidden;
}

.app-card .mud-card-content[b-p8yn0naeok] {
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ── Botones ── */
.btn-row[b-p8yn0naeok] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-action[b-p8yn0naeok] {
  border-radius: 12px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  min-height: 46px;
  font-size: 0.9rem !important;
}

.btn-confirm[b-p8yn0naeok] {
  min-height: 52px;
  font-size: 1rem !important;
}

/* ── Socio card ── */
.socio-header[b-p8yn0naeok] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.socio-avatar[b-p8yn0naeok] {
  width: 64px !important;
  height: 64px !important;
  border: 2px solid var(--mud-palette-primary);
  flex-shrink: 0;
}

.socio-avatar img[b-p8yn0naeok] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.socio-name[b-p8yn0naeok] {
  font-weight: 600 !important;
}

.socio-info[b-p8yn0naeok] {
  min-width: 0;
}

/* ── Section titles ── */
.section-title[b-p8yn0naeok] {
  display: flex;
  align-items: center;
  font-weight: 600 !important;
}

/* ── Items list ── */
.items-list[b-p8yn0naeok] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-chip[b-p8yn0naeok] {
  border-radius: 12px !important;
  background: var(--mud-palette-background) !important;
  border: 1px solid var(--mud-palette-lines-default);
}

.item-chip-body[b-p8yn0naeok] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px !important;
}

/* ── Dialog Excepciones (fullscreen en mobile) ── */
.dialog-title-row[b-p8yn0naeok] {
  display: flex;
  align-items: center;
}

.exc-list[b-p8yn0naeok] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exc-card[b-p8yn0naeok] {
  border-radius: 14px !important;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.exc-card:active[b-p8yn0naeok] {
  box-shadow: 0 0 0 2px var(--mud-palette-primary) !important;
}

.exc-card-body[b-p8yn0naeok] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px !important;
}

.exc-info[b-p8yn0naeok] {
  min-width: 0;
}

.exc-name[b-p8yn0naeok] {
  font-weight: 600 !important;
}

/* ── Empty state ── */
.empty-state[b-p8yn0naeok] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

/* ── QR section ── */
.qr-section[b-p8yn0naeok] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  margin-top: 16px;
  border-top: 1px solid var(--mud-palette-lines-default);
}

.qr-image[b-p8yn0naeok] {
  max-width: 220px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--mud-palette-lines-default);
}

/* ── Desktop: centrar y limitar ancho ── */
@media (min-width: 641px) {
  .app-container[b-p8yn0naeok] {
    max-width: 520px;
    padding-top: 16px;
  }

  .app-card[b-p8yn0naeok] {
    border-radius: 20px !important;
  }
}
/* /Pages/GrupoFamiliar.razor.rz.scp.css */
.list[b-4gbjbh1yna]{
    /* flex-direction: row; */
    display: flex;
    /* justify-content: space-between; */
    gap: 0.5rem;
}

img[b-4gbjbh1yna] {
    object-fit: cover;
    object-position: top center;
    border-radius:50%;
    width: 50px;
    height: 50px;
  }
  .list-item-group[b-4gbjbh1yna]{
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
    
}




 @media (max-width: 640.98px) {
    [b-4gbjbh1yna] .mdc-list--two-line .mdc-list-item {
        height: 350px;
    }
    
 
    .list[b-4gbjbh1yna]{
        display: flex;
        flex-direction: row;  
        flex-wrap: wrap;
    }
   
    .list-item-group[b-4gbjbh1yna]{
        display: flex;
        justify-content: space-around;
        gap: 0.5rem;
        /* align-items: flex-start; */
    }
}

body[b-4gbjbh1yna] {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}



.lista-item[b-4gbjbh1yna] {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */
    align-items: center;
    /* padding: 10px; */
    border-bottom: 2px solid #ddd;
    position: relative; /* Para posicionar el botón correctamente */
}

.lista-item:last-child[b-4gbjbh1yna] {
    border-bottom: none;
}

.lista-row[b-4gbjbh1yna]{
    display: flex;
    flex-direction: row;
}

.foto[b-4gbjbh1yna] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.nombre[b-4gbjbh1yna] {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
}

.edad[b-4gbjbh1yna] {
    flex: 1;
    font-size: 14px;
    color: #555;
}

.opciones[b-4gbjbh1yna] {
    flex: 1;
    padding: 8px;
    /* font-size: 14px; */
    /* border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff; */
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); */
    /* background-repeat: no-repeat;
    background-position: right 8px center; */
    padding-right: 30px;
}

.boton-fila[b-4gbjbh1yna] {
    width: 100%; /* Ocupa toda la fila */
    margin-top: 10px; /* Espacio entre los controles y el botón */
    padding: 10px;
    font-size: 16px;
    /* color: #fff;
    background-color: #007bff; */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton-fila:hover[b-4gbjbh1yna] {
    /* background-color: #0056b3; */
}

.boton-fila:focus[b-4gbjbh1yna] {
    outline: none; /* Elimina el contorno al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra suave al enfocar */
}



.grid-container[b-4gbjbh1yna] {
    display: grid;
    grid-template-rows: 1fr 1fr; /* 2 columnas */
    grid-template-rows: auto; /* Altura automática */
    gap: 0.0rem; /* Espacio entre elementos */
    width: 100%;
    max-width: 400px;
    min-height: 200px; /* Altura mínima para visualización */
    /* background-color: #f0f0f0; */
}

/* Primera columna (dividida en 2 filas) */
.columna-izquierda[b-4gbjbh1yna] {
    display: grid;
    grid-template-rows: 1fr 1fr; /* 2 filas de igual altura */
    gap: 0.0rem;
   
}


/* Estilos para móvil (menos de 768px) */
@media screen and (max-width: 768px) {
    .grid-container[b-4gbjbh1yna] {
        grid-template-columns: 1fr; /* 1 columna (todo apilado) */
        grid-template-rows: 1fr 1fr ; /* 3 filas independientes */
    }

    .columna-izquierda[b-4gbjbh1yna] {
        display: contents; /* Elimina el sub-grid para que las filas sean parte del grid principal */
    }

    /* Asegura que todos los elementos sean hijos directos del grid-container */
    .fila-superior[b-4gbjbh1yna],
    .fila-inferior[b-4gbjbh1yna],
    .columna-derecha[b-4gbjbh1yna] {
        min-height: 50px; /* Ajusta según necesites */
        height: min-content;
        padding: 0.1rem;
    }
}  


/* Elementos de la primera columna */
.fila-superior[b-4gbjbh1yna] {
    /* background-color: #f0f0f0; */
    /* display: flex;
    flex-direction: column; */
    gap: 0.5rem;
    padding: 0.5rem;
    /* border: 1px solid #ddd; */
}

.fila-inferior[b-4gbjbh1yna] {
    /* background-color: #f8f8f8; */
    padding: 0.5rem;
    /* border: 1px solid #ddd; */
}

/* Segunda columna */
.columna-derecha[b-4gbjbh1yna] {
    /* background-color: #e0e0e0; */
    padding: 0.5rem;
    border: 1px dotted #ddd;
}
/* /Pages/Reservas.razor.rz.scp.css */
.user-validate[b-plzkir1wst] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    /*width: 100%;*/
    max-width: 500px;
}

 .mud-button-filled[b-plzkir1wst]{
    /* background-color: var(--mud-palette-action-default-hover); */
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-appbar-text)
}
.mud-card-content[b-plzkir1wst] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 1rem;
}

.reserva-content[b-plzkir1wst] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
}

.lista-container[b-plzkir1wst] {
    width: 100%;
    min-width: 400px;
    /* margin: 20px auto;
    padding: 10px; */
    /* background-color: #9c4545af; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 @media screen and (max-width: 640.98px)
 /* @media only screen and (min-width: 360px) and (max-width: 768px)  */
 {
    .lista-container[b-plzkir1wst] {
        /* min-width: auto; */
        width: fit-content;
        /* width: 300px;   */
    }
    .reserva-content[b-plzkir1wst] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: fit-content;
    }

    .user-validate[b-plzkir1wst] {
        /* display: flex;
        
        gap: 0.5rem;
        */
        justify-content: flex-start;
        padding: 0rem;
        width: fit-content;
    
    }

    .mud-card[b-plzkir1wst] {
        width: fit-content;
        flex-grow: 0;
    }

    .mud-card-content[b-plzkir1wst] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
        width: fit-content;
    }
    

}
/* /Pages/Vouchers.razor.rz.scp.css */
:host[b-vj2cizdefl] {
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.reserva-main[b-vj2cizdefl] {
  --primary: #0d47a1;
  --accent: #1976d2;
  --accent-2: #42a5f5;
  --ink: #0f172a;
  --muted: #64748b;
  padding: 18px;
  max-width: 1080px;
  margin: 10px auto;
  color: var(--ink);
  background: #ffffff;
}

.voucher-hero[b-vj2cizdefl] {
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 65%, #e3f2fd 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.voucher-title[b-vj2cizdefl] {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.hero-alert[b-vj2cizdefl] {
  margin-top: 8px;
}

.reserva-main[b-vj2cizdefl] (.hero-alert.mud-alert) {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
}

.reserva-main[b-vj2cizdefl] (.hero-alert .mud-alert-message) {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
  color: #fff;
  font-weight: 600;
}

.voucher-filter-card[b-vj2cizdefl] {
  border-radius: 14px;
  overflow: hidden;
}

.user-validate[b-vj2cizdefl] {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.event-selection[b-vj2cizdefl] {
  margin-top: 10px;
}

.reserva-content[b-vj2cizdefl] {
  margin-top: 14px;
}

.loading-bar[b-vj2cizdefl] {
  border-radius: 10px;
}

.socio-image[b-vj2cizdefl] {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #ffffff;
  margin: 8px;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(2, 6, 23, 0.09);
  border: 2px solid rgba(255, 255, 255, 0);
}

/* Ensure MudCardMedia inside socio-card also stays small on desktop */
.reserva-main[b-vj2cizdefl] (.socio-card .mud-card-media) {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 8px 12px 8px 6px;
  flex-shrink: 0;
}
/* Cleanup: removed duplicate/malformed rules that prevented the browser from parsing
   the socio-card media sizing. The mobile override below still applies for small viewports. */

.reserva-main[b-vj2cizdefl] (.benef-avatar.mud-avatar) {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(13, 71, 161, 0.18);
  box-shadow: 0 3px 10px rgba(2, 6, 23, 0.12);
}

.status-chip[b-vj2cizdefl] {
  max-width: 100%;
}

/* Mud internals */
.reserva-main[b-vj2cizdefl] (.mud-card) {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.reserva-main[b-vj2cizdefl] (.mud-expansion-panel) {
  border-radius: 12px;
}

.reserva-main[b-vj2cizdefl] (.mud-table-wrapper) {
  overflow-x: auto;
}

.reserva-main[b-vj2cizdefl] (.mud-table) {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.reserva-main[b-vj2cizdefl] (.mud-table-head) {
  background: linear-gradient(
    90deg,
    rgba(109, 40, 217, 0.08),
    rgba(14, 165, 233, 0.08)
  );
}

.reserva-main[b-vj2cizdefl] (.mud-table-row:hover) {
  background: rgba(14, 165, 233, 0.05);
}

.benef-grid[b-vj2cizdefl] {
  margin-top: 6px;
}

.benef-card[b-vj2cizdefl] {
  height: 100%;
}

.benef-head[b-vj2cizdefl] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.benef-avatar-wrapper[b-vj2cizdefl] {
  margin-right: 2px;
  flex-shrink: 0;
}

.benef-avatar-img[b-vj2cizdefl] {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  object-fit: cover;
  object-position: top center;
  border: 2px solid rgba(13, 71, 161, 0.18);
  box-shadow: 0 3px 10px rgba(2, 6, 23, 0.12);
}

.benef-meta[b-vj2cizdefl] {
  min-width: 0;
}

.benef-name[b-vj2cizdefl] {
  font-weight: 700;
  line-height: 1.2;
}

.benef-age[b-vj2cizdefl] {
  color: #475569;
}

.benef-actions[b-vj2cizdefl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.benef-controls[b-vj2cizdefl] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.benef-qr-box[b-vj2cizdefl] {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benef-qr-box .mud-image-root img[b-vj2cizdefl] {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.reserva-main[b-vj2cizdefl] (.mud-chip) {
  border-radius: 999px;
  font-weight: 700;
  max-width: 100%;
}

.reserva-main[b-vj2cizdefl] (.status-chip .mud-chip-content) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reserva-main[b-vj2cizdefl] (.status-chip.mud-chip-size-small) {
  max-width: 210px;
}

.reserva-main[b-vj2cizdefl] (.status-chip.mud-chip-color-success) {
  background: linear-gradient(90deg, #dcfce7, #bbf7d0);
  color: #14532d;
}

.reserva-main[b-vj2cizdefl] (.status-chip.mud-chip-color-default) {
  background: linear-gradient(90deg, #f1f5f9, #ffffff);
  color: #475569;
}

.reserva-main[b-vj2cizdefl] (.mud-button-root) {
  border-radius: 10px;
  text-transform: none;
  font-weight: 700;
}

.action-btn[b-vj2cizdefl],
.emit-btn[b-vj2cizdefl] {
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.action-btn:hover[b-vj2cizdefl],
.emit-btn:hover[b-vj2cizdefl] {
  transform: translateY(-1px);
}

/* Responsive */
@media (min-width: 760px) {
  .user-validate[b-vj2cizdefl] {
    flex-direction: row;
    align-items: center;
  }

  .dni-input[b-vj2cizdefl] {
    flex: 1;
  }

  .action-btn[b-vj2cizdefl] {
    min-width: 140px;
  }

  .emit-btn[b-vj2cizdefl] {
    min-width: 150px;
  }
}

/* ====== MOBILE APP EXPERIENCE ====== */
@media (max-width: 759px) {
  /* --- App canvas: light grey bg, edge-to-edge, safe areas --- */
  .reserva-main[b-vj2cizdefl] {
    padding: 0 0 env(safe-area-inset-bottom, 24px) 0;
    margin: 0;
    background: #f2f2f7;
    min-height: 100dvh;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Sticky app-bar hero --- */
  .voucher-hero[b-vj2cizdefl] {
    position: sticky;
    top: 0;
    z-index: 100;
    border-radius: 0;
    padding: 14px 16px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    margin-bottom: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
  }

  .voucher-title[b-vj2cizdefl] {
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.5px;
  }

  .hero-alert[b-vj2cizdefl] {
    margin-top: 6px;
  }

  .reserva-main[b-vj2cizdefl] (.hero-alert.mud-alert) {
    border-radius: 10px;
    padding: 6px 10px;
  }

  .reserva-main[b-vj2cizdefl] (.hero-alert .mud-alert-message) {
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
  }

  /* --- Hide desktop spacer on mobile --- */
  .section-gap[b-vj2cizdefl] {
    height: 0;
  }

  /* --- Filter card: floating card overlap --- */
  .voucher-filter-card[b-vj2cizdefl] {
    margin: 12px 12px 0;
    position: relative;
    z-index: 5;
  }

  .reserva-main[b-vj2cizdefl] (.voucher-filter-card.mud-card) {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: none;
  }

  .reserva-main[b-vj2cizdefl] (.voucher-filter-card .mud-card-content) {
    padding: 14px;
  }

  .user-validate[b-vj2cizdefl] {
    gap: 8px;
  }

  /* --- Touch-friendly pill buttons --- */
  .action-btn[b-vj2cizdefl],
  .emit-btn[b-vj2cizdefl] {
    width: 100%;
    min-height: 46px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  .reserva-main[b-vj2cizdefl] (.action-btn.mud-button-root),
  .reserva-main[b-vj2cizdefl] (.emit-btn.mud-button-root) {
    border-radius: 14px;
    min-height: 46px;
  }

  /* --- Loading bar --- */
  .loading-bar[b-vj2cizdefl] {
    margin: 0 12px;
    border-radius: 8px;
  }

  /* --- Content wrapper --- */
  .reserva-content[b-vj2cizdefl] {
    padding: 12px 12px 0;
    margin-top: 0;
  }

  /* --- Expansion panels: clean section cards --- */
  .reserva-main[b-vj2cizdefl] (.mud-expansion-panels) {
    margin-bottom: 10px;
  }

  .reserva-main[b-vj2cizdefl] (.mud-expansion-panel) {
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    margin-bottom: 10px;
    background: #ffffff;
  }

  .reserva-main[b-vj2cizdefl] (.mud-expand-panel-header) {
    min-height: 44px;
    padding: 4px 14px;
    font-weight: 700;
    font-size: 0.88rem;
  }

  .reserva-main[b-vj2cizdefl] (.mud-expansion-panel-content) {
    padding: 0 8px 10px;
  }

  /* --- Socio card: horizontal profile (app contact style) --- */
  .reserva-main[b-vj2cizdefl] (.socio-card.mud-card) {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .reserva-main[b-vj2cizdefl] (.socio-card .mud-card-media) {
    width: 56px !important;
    min-width: 56px;
    height: 56px !important;
    border-radius: 50%;
    margin: 10px 0 10px 6px;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: top center !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.13);
    border: 2.5px solid #ffffff;
  }

  .reserva-main[b-vj2cizdefl] (.socio-card .mud-card-content) {
    padding: 10px 14px;
    flex: 1;
    text-align: left;
  }

  .reserva-main[b-vj2cizdefl] (.socio-card .mud-card-content h4) {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 2px;
    font-weight: 600;
  }

  .reserva-main[b-vj2cizdefl] (.socio-card .mud-card-content h3) {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    line-height: 1.3;
  }

  /* --- Beneficiary cards --- */
  .benef-grid[b-vj2cizdefl] {
    margin-top: 4px;
  }

  .reserva-main[b-vj2cizdefl] (.benef-card.mud-card) {
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    background: #ffffff;
  }

  .benef-head[b-vj2cizdefl] {
    gap: 10px;
    margin-bottom: 8px;
  }

  .benef-avatar-wrapper[b-vj2cizdefl] {
    flex-shrink: 0;
  }

  .benef-avatar-img[b-vj2cizdefl] {
    width: 50px;
    height: 50px;
  }

  .benef-name[b-vj2cizdefl] {
    font-size: 0.88rem;
  }

  .benef-age[b-vj2cizdefl] {
    font-size: 0.78rem;
  }

  .benef-actions[b-vj2cizdefl] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 2px;
  }

  /* --- Status chips: full-width, centered --- */
  .reserva-main[b-vj2cizdefl] (.status-chip) {
    width: 100%;
    justify-content: center;
  }

  .reserva-main[b-vj2cizdefl] (.status-chip .mud-chip-content) {
    text-align: center;
  }

  .reserva-main[b-vj2cizdefl] (.status-chip.mud-chip-size-small) {
    max-width: 100%;
  }

  /* --- Generic card mobile override --- */
  .reserva-main[b-vj2cizdefl] (.mud-card) {
    border-radius: 16px;
    border: none;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  }

  /* --- Alerts --- */
  .reserva-main[b-vj2cizdefl] (.mud-alert) {
    border-radius: 12px;
    font-size: 0.82rem;
  }

  /* --- Inputs: larger touch targets --- */
  .reserva-main[b-vj2cizdefl] (.mud-select .mud-input-slot) {
    min-height: 44px;
  }

  /* --- Disable hover lift on touch --- */
  .action-btn:hover[b-vj2cizdefl],
  .emit-btn:hover[b-vj2cizdefl] {
    transform: none;
    box-shadow: none;
  }
}
