/* Overrides y estilos propios de AccessPass School */
/* Ejemplo: ajustar altura del header o márgenes personalizados */

/* --- Sidebar brand (logo y texto) --- */
/* Apilar imagen y texto en 2 filas para mejorar autoajuste del logo */
.sidebar-brand .brand-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

/* Fix: AdminLTE calcula sidebar-wrapper height como calc(100vh - 3.5rem)
   pero nuestro brand apilado es más alto (~110px). Usamos flex para que
   sidebar-wrapper llene el espacio restante dinámicamente. */
.app-sidebar {
  display: flex !important;
  flex-direction: column;
}

.app-sidebar .sidebar-wrapper {
  flex: 1 1 0% !important;
  height: auto !important;
  min-height: 0;
  overflow-y: auto;
}

/* Ajuste para sidebar colapsado (mini variant): volver a horizontal y centrar icono */
.sidebar-collapse .sidebar-brand .brand-link,
.sidebar-mini.sidebar-collapse .sidebar-brand .brand-link {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.sidebar-collapse .sidebar-brand .brand-text,
.sidebar-mini.sidebar-collapse .sidebar-brand .brand-text {
  display: none !important;
}

/* Importante: .brand-image es clase de AdminLTE, expandimos selectores para máxima especificidad */
.app-sidebar .brand-image,
.sidebar-brand .brand-image,
.app-wrapper .brand-image {
  display: block !important;
  max-height: 32px !important;
  /* altura máxima en sidebar (apilado) */
  height: auto !important;
  /* anula height: 48px explícito de AdminLTE */
  width: auto !important;
  /* mantiene proporción */
  max-width: calc(100% - 10px);
  /* evita desbordes horizontales */
  object-fit: contain !important;
  /* asegura no deformar */
  object-position: left center;
  margin-left: 5px;
}

.sidebar-brand .brand-text {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.1;
}

/* --- Previsualización de logo en Branding --- */
.branding-logo-preview {
  min-height: 80px;
  padding: 15px;
}

.branding-logo-preview img {
  max-height: 48px !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px;
  object-fit: contain !important;
  display: block;
}


/* --- Admin: Áreas y Lugares --- */
.place-card {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  transition: box-shadow .15s ease, border-color .15s ease;
  min-height: 56px;
}

.place-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .12);
}

.place-card .badge {
  font-size: .65rem;
  padding: .25em .4em;
}

.place-actions {
  opacity: 0;
  transition: opacity .15s ease;
  gap: .25rem !important;
}

.place-card:hover .place-actions,
.place-card:focus-within .place-actions,
#placesPanel.editing .place-actions {
  opacity: 1;
}

.place-actions form {
  display: inline;
}

.place-actions .btn {
  padding: .2rem .35rem;
  line-height: 1;
}

.place-actions .btn-outline-secondary {
  border-color: rgba(0, 0, 0, .15);
  color: rgba(0, 0, 0, .65);
}

.place-actions .btn-outline-secondary:hover {
  border-color: rgba(0, 0, 0, .35);
  color: rgba(0, 0, 0, .85);
}

.place-actions .btn-outline-warning {
  border-color: rgba(255, 193, 7, .45);
  color: #b58100;
}

.place-actions .btn-outline-warning:hover {
  border-color: rgba(255, 193, 7, .75);
  color: #7a5500;
}

.place-actions .btn-outline-success {
  border-color: rgba(25, 135, 84, .45);
  color: #1a7f57;
}

.place-actions .btn-outline-success:hover {
  border-color: rgba(25, 135, 84, .7);
  color: #105c3e;
}

.place-actions .btn-outline-danger {
  border-color: rgba(220, 53, 69, .35);
  color: #a61b2b;
}

.place-actions .btn-outline-danger:hover {
  border-color: rgba(220, 53, 69, .75);
  color: #7a1020;
}


/* --- Admin: Grados y Secciones --- */
.grades-table th,
.grades-table td {
  vertical-align: middle;
}

.grades-table .badge {
  font-size: .75rem;
}

.grades-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.grades-actions .btn {
  padding: .25rem .45rem;
  line-height: 1;
}

@media (max-width: 575.98px) {

  .grades-table th,
  .grades-table td {
    padding: .4rem .5rem;
  }

  .grades-table .badge {
    font-size: .68rem;
  }

  .grades-actions {
    gap: .25rem;
  }

  .grades-actions .btn {
    padding: .22rem .4rem;
  }
}

/* --- Operación: Caseta de Lugares > Tandas en curso --- */
.caseta-grid td,
.caseta-grid th {
  vertical-align: top;
}

.caseta-grid .cell {
  padding: .6rem .5rem;
  text-align: left;
}

.caseta-grid .cell .title {
  font-weight: 600;
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caseta-grid .cell .meta {
  margin-top: .15rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.caseta-grid .cell .actions {
  margin-top: .35rem;
  display: flex;
  justify-content: flex-start;
  gap: .35rem;
  flex-wrap: wrap;
}

.caseta-grid .cell .actions .btn {
  padding: .22rem .45rem;
  line-height: 1.1;
}

.caseta-grid {
  table-layout: fixed;
  width: 100%;
}

.caseta-grid th,
.caseta-grid td {
  word-break: break-word;
}

@media (max-width: 991.98px) {
  .caseta-grid .cell {
    padding: .5rem .45rem;
  }

  .caseta-grid .cell .title {
    font-size: .92rem;
  }

  .caseta-grid .cell .meta {
    font-size: .82rem;
    gap: .3rem;
  }

  .caseta-grid .cell .meta .text-truncate {
    white-space: normal;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Sticky primera columna en pantallas pequeñas */
@media (max-width: 575.98px) {

  .caseta-grid thead th:first-child,
  .caseta-grid tbody th:first-child,
  .caseta-grid tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--bs-body-bg);
    z-index: 2;
  }

  .caseta-grid .cell {
    padding: .5rem .4rem;
  }

  .caseta-grid .cell .title {
    font-size: .9rem;
  }

  .caseta-grid .cell .meta {
    font-size: .76rem;
  }

  .caseta-grid .cell .actions {
    flex-direction: column;
    gap: .25rem;
  }

  .caseta-grid .cell .actions .btn {
    padding: .18rem .35rem;
    font-size: .75rem;
  }
}

/* --- Layout Caseta (navbar y contenedores) --- */
.caseta-layout .caseta-navbar {
  background: linear-gradient(135deg, rgba(var(--pm-caseta-accent-rgb, 13, 110, 253), 0.95), rgba(33, 43, 54, 0.92));
}

.caseta-navbar-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.caseta-logo {
  max-height: 44px;
  height: auto;
  width: auto;
  object-fit: contain;
}

.caseta-brand {
  letter-spacing: 0.01em;
  font-weight: 600;
}

.caseta-navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.caseta-navbar-actions .btn span {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .caseta-navbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* --- Owner layout --- */
.owner-layout .owner-navbar-stack {
  gap: 1rem;
}

.owner-layout .owner-navbar-info {
  text-align: left;
}

.owner-layout .owner-navbar-links .nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: .4rem .75rem;
}

.owner-layout .owner-navbar-links .nav-link i {
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .owner-layout .owner-navbar-stack {
    align-items: stretch;
  }

  .owner-layout .owner-navbar-links {
    width: 100%;
  }

  .owner-layout .owner-navbar-links .nav-link {
    width: 100%;
    border-radius: .35rem;
  }
}

@media (max-width: 767.98px) {
  .owner-layout main.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .owner-layout .card-body>.table-responsive {
    margin-bottom: 1rem;
  }

  .owner-layout table.table form.d-flex {
    flex-wrap: wrap;
    gap: .5rem;
  }

  .owner-layout table.table form.d-flex input[type="text"] {
    min-width: 140px;
    flex: 1 1 140px;
  }

  .owner-layout table.table form.d-flex button,
  .owner-layout table.table form.d-inline button {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .caseta-navbar-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .caseta-navbar-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .caseta-navbar-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Parent Portal: Responsive Adjustments --- */
.qr-responsive {
  max-width: 100%;
}

.qr-responsive canvas,
.qr-responsive img {
  max-width: 100%;
  height: auto !important;
  /* Mantener relación de aspecto */
}

@media (max-width: 767.98px) {

  /* En móviles, las tarjetas de métricas en 2 columnas se ven mejor con texto más pequeño */
  .display-6 {
    font-size: 2rem;
  }
}

/* --- Sticky Navbar en Móvil (todos los layouts) --- */
@media (max-width: 991.98px) {
  /* Portal de padres, panel admin y módulo caseta (usan .app-header) */
  .app-header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  
  /* Panel Owner (usa .navbar) */
  .owner-layout .navbar {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  
  /* Ajustar wrapper para compensar navbar sticky */
  .app-wrapper {
    padding-top: 0;
  }
}

/* --- Responsive width utilities (Bootstrap 5 no las incluye) --- */
@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}
@media (min-width: 1200px) {
  .w-xl-auto { width: auto !important; }
}

/* Base mobile tweaks */
@media (max-width: 575.98px) {
  .gap-2-mobile {
    gap: 0.5rem !important;
  }

  .w-100-mobile {
    width: 100% !important;
  }
}

/* ========================================================
   Landing Page — Responsive
   ======================================================== */

/* --- Hero: reducir padding en móvil --- */
@media (max-width: 767.98px) {
  .pmu-hero {
    padding: 2.5rem 0 2rem !important;
  }
  .pmu-hero .display-5 {
    font-size: 1.6rem;
  }
  .pmu-hero .btn-lg {
    font-size: .9rem;
    padding: .5rem .9rem;
  }
}

/* --- Secciones: reducir padding vertical en móvil --- */
@media (max-width: 767.98px) {
  .pmu-section {
    padding: 2rem 0 !important;
  }
}

/* --- Botones CTA: flex-wrap en móvil para evitar overflow --- */
.pmu-cta-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

@media (max-width: 575.98px) {
  .pmu-cta-buttons {
    flex-direction: column;
  }
  .pmu-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Hero botones: stack en móvil --- */
@media (max-width: 575.98px) {
  .pmu-hero-actions {
    flex-direction: column;
  }
  .pmu-hero-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* --- Navbar landing: mejorar colapsada en móvil --- */
@media (max-width: 991.98px) {
  .pmu-landing-nav .navbar-collapse {
    padding: .75rem 0;
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: .5rem;
  }
  .pmu-landing-nav .navbar-nav {
    gap: .25rem;
  }
  .pmu-landing-nav .navbar-nav .nav-link {
    padding: .5rem .75rem;
    border-radius: .375rem;
  }
  .pmu-landing-nav .navbar-nav .nav-link:hover {
    background: rgba(13,110,253,.06);
  }
  .pmu-landing-nav .d-flex.gap-2 {
    margin-top: .5rem;
    width: 100%;
  }
  .pmu-landing-nav .d-flex.gap-2 .btn {
    width: 100%;
    text-align: center;
  }
}

/* --- Cards de beneficios/planes: mejor spacing en móvil --- */
@media (max-width: 575.98px) {
  .pmu-card {
    padding: 1rem !important;
  }
}

/* --- Sección Ingresar: botones Admin/Tutor full-width en móvil --- */
@media (max-width: 767.98px) {
  #ingresar .col-md-2 {
    display: flex !important;
    flex-direction: column;
    gap: .5rem;
  }
  #ingresar .col-md-2 .btn {
    width: 100%;
  }
}

/* --- Footer: mejor en móvil --- */
@media (max-width: 575.98px) {
  .pmu-footer {
    text-align: center;
  }
  .pmu-footer .container {
    flex-direction: column !important;
    gap: .75rem;
  }
}

/* --- Planes: cards iguales en móvil stack --- */
@media (max-width: 767.98px) {
  #planes .row > [class*="col-"] {
    margin-bottom: .5rem;
  }
}

/* --- Desktop: hero card max-width para que no sea demasiado ancho --- */
@media (min-width: 992px) {
  .pmu-hero .pmu-card {
    max-width: 480px;
    margin-left: auto;
  }
}