/*
|--------------------------------------------------------------------------
| Layout principal: Sidebar + Contenido
|--------------------------------------------------------------------------
| Este layout se utiliza en todas las vistas autenticadas.
| Divide la pantalla en dos columnas:
| - Sidebar fijo a la izquierda
| - Contenido principal a la derecha
*/
.layout {
  display: flex;
  min-height: 100vh;
}

/*
|--------------------------------------------------------------------------
| Sidebar lateral
|--------------------------------------------------------------------------
| Menú de navegación fijo al costado izquierdo.
| Se mantiene visible incluso al hacer scroll.
*/
.sidebar {
  width: 250px;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

/*
|--------------------------------------------------------------------------
| Marca / encabezado del sidebar
|--------------------------------------------------------------------------
| Contiene logo y nombre del sistema.
*/
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/*
|--------------------------------------------------------------------------
| Información de sesión
|--------------------------------------------------------------------------
| Muestra el usuario actualmente logueado.
*/
.user {
  font-size: 13px;
  margin-bottom: 16px;
  color: #333;
}

/* Utilidades de texto */
.muted { opacity: 0.75; }
.small { font-size: 12px; }

/*
|--------------------------------------------------------------------------
| Navegación del sidebar
|--------------------------------------------------------------------------
| Links principales del sistema.
*/
.nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 8px;
  border: 1px solid transparent;
  background: #f4f4f4;
  color: #222;
  font-size: 14px;
}

/* Hover sobre links */
.nav a:hover {
  background: #e9e9e9;
}

/* Item activo del menú */
.nav a.active {
  border-color: #2f7cf6;
  background: #eaf1ff;
  color: #2f7cf6;
  font-weight: 500;
}

/*
|--------------------------------------------------------------------------
| Área de contenido principal
|--------------------------------------------------------------------------
| Panel derecho donde se renderizan formularios y vistas.
| Fondo sólido para asegurar legibilidad sobre imagen de fondo.
*/
.content {
  flex: 1;
  background: #f7f7f7;
  padding: 24px;
}

/*
|--------------------------------------------------------------------------
| Contenedor interno del contenido
|--------------------------------------------------------------------------
| Permite centrar visualmente el contenido dentro del panel derecho
| y mantener simetría entre distintas vistas.
*/
.page-wrap {
  max-width: 980px;
  margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Tarjetas / paneles de contenido
|--------------------------------------------------------------------------
| Usadas en "Mis reservas" y otras vistas similares.
*/
.card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 18px;
}

/*
|--------------------------------------------------------------------------
| Tablas
|--------------------------------------------------------------------------
| Estilo base para tablas de datos.
*/
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

th {
  font-weight: 600;
  color: #333;
}

/*
|--------------------------------------------------------------------------
| Mensajes de estado
|--------------------------------------------------------------------------
| Usados para mensajes de error, vacío o información.
*/
.msg {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f4f4f4;
  display: none;
}

.msg.show {
  display: block;
}
/*
|--------------------------------------------------------------------------
| Ajuste visual: mantener imagen visible fuera del panel de contenido
|--------------------------------------------------------------------------
| - La imagen de fondo está en <body> (style.css).
| - El panel blanco debe ser SOLO el contenido (lo marcado en rojo).
| - El resto debe quedar transparente para que se vea el fondo.
*/

/* 1) El área derecha ya NO tapa la imagen: queda transparente */
.content {
  background: transparent;
  padding: 28px;                 /* separa el panel blanco de los bordes */
}

/* 2) Panel blanco que contiene el contenido real (crece con el contenido) */
.page-wrap {
  max-width: 980px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* 3) Mis reservas: si existe .card adentro, que no “achique” ni duplique panel */
.page-wrap .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}

/* 4) Tabla en Mis reservas: asegurar separación y lectura */
table {
  margin-top: 14px;
}

th, td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
/* -------------------------------------------------
   Boton cerrar sesion  estilo de advertencia suave
   ------------------------------------------------- */

/* Link normal */
.nav a.logout {
  border: 1px solid rgba(0,0,0,0.08);
}

/* Hover: contorno rojo suave */
.nav a.logout:hover {
  border-color: rgba(231, 76, 60, 0.6);
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.15);
  background: rgba(231, 76, 60, 0.05);
}
/* ==========================================================================
   BOTONES DE ACCIÓN EN TABLAS (Mis reservas)
   ========================================================================== */

/*
|---------------------------------------------------------------------------
| Botón Cancelar (Mis reservas)
|---------------------------------------------------------------------------
| El JS renderiza el botón con la clase: .btn-cancelar
| Se mantiene este nombre para no tener que cambiar el JS.
*/
.btn-cancelar {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.14);
  background: #ffffff;
  color: #111827;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition:
    background-color .15s ease,
    transform .1s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

/*
|---------------------------------------------------------------------------
| Hover: estilo de advertencia (similar a "Cerrar sesión")
|---------------------------------------------------------------------------
| Mantiene consistencia visual: al pasar el mouse se vuelve rojo suave.
*/
.btn-cancelar:hover {
  background: #fdecea;
  border-color: rgba(231, 76, 60, 0.55);
  box-shadow: 0 6px 14px rgba(231, 76, 60, 0.12);
  transform: translateY(-1px);
}

/* Click */
.btn-cancelar:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(231, 76, 60, 0.10);
}

/*
|---------------------------------------------------------------------------
| Disabled: se ve claramente bloqueado
|---------------------------------------------------------------------------
| Para reservas pasadas (o mientras se procesa la cancelación).
*/
.btn-cancelar:disabled,
.btn-cancelar[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
  background: #f3f4f6;
  border-color: rgba(0,0,0,0.10);
  box-shadow: none;
  transform: none;
}

/*
|---------------------------------------------------------------------------
| Columna Acción (tabla)
|---------------------------------------------------------------------------
| Se centra y se deja un ancho fijo para que no se vea “apretado”.
*/
th.acciones, td.acciones {
  text-align: center;
  white-space: nowrap;
  width: 140px;
}
/* Filas: hover suave para lectura */
tbody tr:hover {
  background: rgba(47, 124, 246, 0.05);
}
/* -----------------------------------
   Botón primario (login / acción principal)
   ----------------------------------- */
.page-wrap .btn-primary,
.page-wrap .btn-primary:visited {
  display: inline-block;
  width: 100%;
  padding: 10px 20px;

  background: #3498db;
  color: #ffffff;
  text-align: center;
  text-decoration: none;

  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.page-wrap .btn-primary:hover {
  background: #2980b9;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(52,152,219,0.35);
}

.page-wrap .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(52,152,219,0.25);
}
/* Submenú dentro del sidebar (Mis reservas) */
.submenu {
  margin-top: 6px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.submenu a {
  background: #f8f8f8;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
}
/* ============================
   Submenú Mis reservas
   ============================ */

.submenu {
  margin-left: 12px;          /* indentación */
  padding-left: 8px;
  border-left: 2px solid rgba(47,124,246,0.25);
  margin-top: 6px;
}

.submenu a {
  background: transparent;
  font-size: 13px;
  padding: 8px 10px;
}

/* Hover del submenú */
.submenu a:hover {
  background: rgba(47,124,246,0.08);
}

/* Activo dentro del submenú */
.submenu a.active {
  background: rgba(47,124,246,0.15);
  border-color: transparent;
}
/*
|---------------------------------------------------------------------------
| Submenú "Mis reservas" (animación despliegue)
|---------------------------------------------------------------------------
| Se anima solo cuando el submenú existe en el DOM.
| No requiere JavaScript.
*/
.submenu {
  margin-left: 8px;
  margin-top: 6px;

  overflow: hidden;

  /* Estado visible */
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);

  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

/*
|---------------------------------------------------------------------------
| Enlaces del submenú
|---------------------------------------------------------------------------
*/
.submenu a {
  display: block;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 13px;
  border-radius: 8px;
  background: #f7f7f7;
  text-decoration: none;
  color: #333;
}

.submenu a:hover {
  background: #ececec;
}

/*
|---------------------------------------------------------------------------
| Submenú oculto (cuando no se renderiza)
|---------------------------------------------------------------------------
| Nota:
| El PHP ya controla cuándo existe el submenú.
| Esta clase se usa solo para animación inicial.
*/
.submenu.hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}
/* ==========================================================================
   QR: Botón + Modal
   ========================================================================== */

.btn-qr {
  appearance: none;
  border: none;
  background: #3498db;
  color: #fff;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn-qr:hover {
  background: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(52,152,219,0.25);
}

.btn-qr:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(52,152,219,0.20);
}

.qr-expirado {
  opacity: 0.6;
  font-size: 13px;
}

.qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.qr-modal.show {
  display: flex;
}

.qr-card {
  background: #fff;
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  padding: 16px;
}

.qr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.qr-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

.qr-close:hover {
  opacity: 1;
}

.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 14px;
  min-height: 220px;
}

.qr-links {
  margin-top: 12px;
}
/* ==========================================================================
   MODAL QR (Mis reservas)
   ========================================================================== */

.qr-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* cuando el modal está abierto */
.qr-modal.show{
  display: flex;
}


.qr-card{
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

.qr-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}

.qr-close{
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.qr-box{
  background: #f6f7f8;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 260px;
  margin-bottom: 12px;
}
.qr-card{
  animation: qrPop 0.18s ease-out;
}

@keyframes qrPop{
  from{
    transform: scale(0.96);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}
#qrContratoLink{
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
}