/* Los iconos superiores mantienen un objetivo táctil accesible también en escritorio. */
.icon-link {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

.user-menu a,
.user-menu button {
  min-height: 44px;
}

.user-menu button[hidden] { display: none; }
.user-menu-icon { display: none; }

/* Escala tipográfica compartida por Recepción, Garaje, Limpieza y Mantenimiento. */
:root {
  --dashboard-counter-size: 30px;
  --dashboard-quick-counter-size: 30px;
  --operational-card-title-size: 18px;
  --operational-card-meta-size: 13px;
  --operational-label-size: 12px;
  --parking-number-size: 26px;
}

.metrics strong { font-size: var(--dashboard-counter-size); }
.quick-sections strong { font-size: var(--dashboard-quick-counter-size); }
.parking-card .parking-number { font-size: var(--parking-number-size); }
.apartment-card h3,
.cleaning-card h3,
.incident-card h3 { font-size: var(--operational-card-title-size); }
.apt-number,
.task-assignee,
.task-notes,
.worker,
.review-note,
.done-note,
.incident-card p,
.incident-meta,
.operational-label,
.arrival-label,
.block-label,
.occupied-label,
.parking-card small { font-size: var(--operational-card-meta-size); }
.apartment-card .status-label,
.priority-chip,
.clean-state,
.state-chip { font-size: var(--operational-label-size); }

/* El nombre y el estado ocupan filas propias incluso con zoom o texto largo. */
.apartment-card-summary {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
}

.apartment-card-summary h3 {
  width: 100%;
  min-height: 1.3em;
  margin: 0;
  line-height: 1.3;
}

.apartment-card-summary .status-label {
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los formularios desplegables de una reserva usan una fila propia. */
.stay-actions { align-items: flex-start; }
.stay-actions > details[open] {
  flex-basis: 100%;
  width: 100%;
}
.stay-actions > details[open] .inline-action-form {
  width: 100%;
  max-width: 100%;
}

/* Navegación compacta: cubre sin huecos todo el intervalo móvil y tablet. */
@media (max-width: 1000px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    min-height: 72px;
    padding: 4px 4px env(safe-area-inset-bottom);
    overflow-x: auto;
    overflow-y: hidden;
    contain: layout inline-size;
    background: var(--paper, #fff);
    border-top: 1px solid var(--line);
  }

  .mobile-nav a {
    display: flex;
    flex: 1 0 72px;
    min-width: 72px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
  }

  .mobile-nav a.active {
    color: var(--brand);
    background: var(--brand-soft);
  }

  .mobile-nav span { font-size: 20px; }
  .live-status { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .button, button, input, select { min-height: 48px; }
  textarea { min-height: 96px; }
}

/* Tarjetas y formularios táctiles. */
.bulk-assignment { margin-bottom: 18px; }
.bulk-assignment summary { cursor: pointer; font-weight: 800; }
.bulk-assignment ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; list-style: none; padding: 0; }
.bulk-assignment label { min-height: 44px; justify-content: center; }
.task-assignee, .task-notes { margin: 10px 18px 0; color: var(--muted); font-size: 13px; }
.task-notes { padding: 10px; border-radius: 9px; background: var(--canvas); white-space: pre-line; }
.preparation-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.preparation-tags span, .preparations > span { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--brand-soft); font-size: 12px; font-weight: 750; }
.thumb-actions { display: grid; gap: 10px; margin-top: 20px; }
.arrival-large { color: var(--blue); font-size: 20px; font-weight: 850; }
.cleaning-card .card-actions { display: grid; gap: 8px; }
.connection-banner, .update-banner { position: sticky; top: 78px; z-index: 18; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; font-weight: 750; }
.connection-banner { color: #7b291f; background: #fff0ed; border: 1px solid #efc4bd; }
.update-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #edf6ff; border: 1px solid #bdd8ee; }
.install-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #b9d9d3; border-radius: 14px; background: var(--brand-soft); }
.install-banner > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.install-banner span, .install-banner p { margin: 0; color: var(--muted); font-size: 13px; }
.install-banner-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.update-banner[hidden], .connection-banner[hidden], .install-banner[hidden], #pwa-install-help[hidden] { display: none; }
.system-banner-stack { display: contents; }

/* El acceso se centra respecto al viewport y los avisos PWA se apilan sin solaparse. */
.login-page {
  position: relative;
  display: block;
  min-height: 100dvh;
  padding: 20px;
}
.login-stage {
  display: grid;
  width: 100%;
  min-height: calc(100dvh - 40px);
  place-items: center;
}
.login-card {
  width: min(520px, 100%);
}
.login-page > .system-banner-stack {
  position: fixed;
  z-index: 18;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  gap: 10px;
  width: min(760px, calc(100vw - 32px));
  margin: 0;
  transform: translateX(-50%);
}
.login-page > .system-banner-stack > .connection-banner,
.login-page > .system-banner-stack > .update-banner,
.login-page > .system-banner-stack > .install-banner {
  position: static;
  width: 100%;
  margin: 0;
}
.is-offline form[method="post"] { opacity: .65; }
.photo-preview { display: grid; gap: 10px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.photo-preview[hidden] { display: none; }
.photo-preview img { width: min(100%, 360px); max-height: 280px; object-fit: contain; border-radius: 10px; }
.photo-preview > div { display: flex; flex-wrap: wrap; gap: 8px; }

.incident-quick-actions {
  margin: 12px 0 18px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}
.incident-quick-actions h3 { margin: 0 0 9px; font-size: 14px; }
.incident-quick-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
.incident-quick-actions form { flex: 1 1 130px; }
.incident-quick-actions .button { width: 100%; min-height: 44px; }
.incident-quick-actions small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.photo-progress { margin: 0; color: var(--brand); font-weight: 800; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.device-row > div { display: flex; flex-direction: column; gap: 4px; }
.device-row small { color: var(--muted); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}
.pagination .button { min-height: 44px; }

/* Teléfonos: lectura lineal y acciones separadas. */
@media (max-width: 520px) {
  :root {
    --dashboard-counter-size: 26px;
    --dashboard-quick-counter-size: 26px;
    --parking-number-size: 24px;
  }

  .topbar { gap: 6px; }
  .brand { min-width: 0; flex: 1; }
  .brand-copy { display: none; }
  .top-actions { flex: 0 0 auto; gap: 2px; }
  .user-menu summary { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; }
  .user-menu-name { display: none; }
  .user-menu-icon { display: inline; font-size: 22px; }
  .apartment-grid, .task-grid { grid-template-columns: 1fr; }
  .apartment-grid { grid-auto-rows: 230px; }
  .apartment-card { height: 230px; min-height: 230px; }
  .stay-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .stay-actions .button, .stay-actions details { width: 100%; }
  .stay-actions summary { width: 100%; }
  .stay-actions > details[open] { grid-column: 1 / -1; }
  .inline-action-form { width: min(88vw, 330px); }
  .cleaning-card { min-width: 0; }
  .cleaning-card > header { padding: 16px 14px 8px; }
  .task-assignee, .task-notes { margin-right: 14px; margin-left: 14px; }
  .card-actions { padding-right: 14px; padding-left: 14px; }
  .install-banner { align-items: stretch; flex-direction: column; }
  .install-banner-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .login-page { padding: 12px; }
  .login-stage { min-height: calc(100dvh - 24px); }
  .login-page > .system-banner-stack {
    top: max(10px, env(safe-area-inset-top));
    width: calc(100vw - 20px);
  }
  .pagination { justify-content: space-between; gap: 8px; }
  .pagination .button { flex: 1; padding-right: 10px; padding-left: 10px; }
}

@media (max-height: 720px) {
  .login-stage {
    align-items: start;
    padding-top: 150px;
  }
}

/* Tablets: dos columnas estables y planificación alineada. */
@media (min-width: 521px) and (max-width: 1000px) {
  .apartment-grid, .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apartment-grid { grid-auto-rows: 230px; }
  .apartment-card { height: 230px; min-height: 230px; }
  .detail-layout { grid-template-columns: 1fr; }
}

/* Escritorio: la barra inferior nunca compite con la navegación principal. */
@media (min-width: 1001px) {
  .mobile-nav { display: none; }
}