/**
 * Microtec Suite — ajustes SOLO para teléfonos.
 * Incluye horizontal (p. ej. iPhone rotado: ~932×430).
 * Tablet (iPad 768×1024+) y escritorio: sin cambios.
 */
@media (max-width: 767px),
  ((max-width: 932px) and (max-height: 520px)) {
  html,
  body {
    overflow-x: hidden;
  }

  /* ── Landing /inicio ─────────────────────────────────────── */
  .site-header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    padding-top: max(12px, env(safe-area-inset-top));
    text-align: center;
  }

  .site-header .mt-brand {
    justify-content: center;
  }

  .site-header .mt-brand-stack .mt-brand-microtec,
  .site-header .mt-brand-stack .mt-brand-suite {
    font-size: 0.9375rem;
  }

  .nav-links {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    gap: 6px 8px;
    padding: 0 4px 4px;
  }

  .nav-link {
    padding: 8px 12px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .btn-nav {
    padding: 10px 16px;
    font-size: 0.8125rem;
    white-space: nowrap;
    margin-top: 2px;
  }

  .hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── Hub (pantalla inicio tras login) ────────────────────── */
  #view-hub header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #view-hub [role="main"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #view-hub .tw-rounded-2xl.tw-p-8 {
    padding: 1.25rem !important;
  }

  #view-hub .hub-admin-bar.hub-admin-bar--visible {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 1rem;
  }

  #view-hub .hub-admin-bar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  #view-hub .hub-admin-bar__actions button {
    width: 100%;
    justify-content: center;
    padding: 10px 8px !important;
    font-size: 0.8125rem !important;
    gap: 6px !important;
  }

  #view-hub .hub-admin-bar__actions button svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── Taller: marco y contenido ───────────────────────────── */
  #view-taller .taller-shell {
    padding: 8px 6px 10px;
  }

  #view-taller .taller-frame {
    border-radius: 12px;
  }

  #view-taller .main.main--embedded .content {
    padding: 12px 10px;
  }

  /* Sidebar taller: iconos (como POS), no 200px de ancho */
  #view-taller .sidebar.sidebar--embedded {
    width: 52px !important;
  }

  #view-taller .sidebar--embedded .nav-item {
    font-size: 0;
    justify-content: center;
    padding: 10px 4px;
    gap: 0;
  }

  #view-taller .sidebar--embedded .nav-item .nav-icon {
    font-size: 1rem;
  }

  #view-taller .sidebar--embedded .nav-item .nav-badge {
    font-size: 0.5625rem;
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 14px;
    padding: 0 3px;
  }

  #view-taller .sidebar--embedded .sidebar-footer {
    display: none;
  }

  /* Topbar taller: 2 filas, sin encimar iconos */
  .topbar.topbar--shell {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 10px;
    row-gap: 4px;
  }

  .topbar-shell-left {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
  }

  .topbar-end--shell,
  #view-taller .topbar-end--shell {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    justify-self: unset;
    grid-column: unset;
  }

  .topbar-shell-center {
    order: 3;
    flex: 1 1 100%;
    max-width: 100% !important;
    grid-column: unset;
    padding-top: 6px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  #view-taller .topbar--shell .sidebar-top--in-header {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }

  #view-taller .topbar--shell .sidebar-top--in-header .logo-icon-wrap {
    width: auto;
    min-width: 0;
    min-height: 32px;
    max-height: 40px;
    max-width: 44px;
    padding: 0;
    flex-shrink: 0;
  }

  #view-taller .topbar--shell .sidebar-top--in-header .logo-icon-wrap .microtec-platform-logo,
  #view-taller .topbar--shell .sidebar-top--in-header .logo-icon-wrap--has-img .sidebar-logo-img {
    max-height: 36px;
    max-width: 40px;
    width: auto;
    height: auto;
  }

  #view-taller .topbar--shell .sidebar-top--in-header .logo-icon-wrap--has-img .sidebar-logo-frame {
    padding: 2px 3px;
    max-height: 38px;
  }

  #view-taller .topbar--shell .sidebar-top--in-header .logo-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 54px);
  }

  /* Icono plataforma + nombre «Microtec Suite» duplicado → solo icono */
  #view-taller .topbar--shell .sidebar-top--in-header .logo-name:has(.mt-brand-microtec) {
    display: none;
  }

  #view-taller .topbar--shell .sidebar-top--in-header .logo-name {
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    word-break: break-word;
  }

  .taller-header-tagline {
    font-size: 0.6875rem;
    width: 100%;
    text-align: center;
    line-height: 1.35;
    margin-top: 0;
    padding: 0 4px;
  }

  .taller-header-tagline-prefix {
    display: inline;
  }

  .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 4px;
    max-width: 100%;
  }

  .topbar-right .btn.btn-sm {
    padding: 5px 6px !important;
  }

  /* Botones secundarios en teléfono (siguen en menú usuario / config) */
  #btn-notif-escritorio,
  #btn-sonido-topbar,
  #btn-tema,
  #btn-sonido-pos-topbar,
  #btn-tema-pos {
    display: none !important;
  }

  #btn-ir-pos-topbar {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  #chip-urgentes-topbar,
  #chip-stock-pos,
  #chip-cxc-pos {
    max-width: 100%;
    font-size: 0.625rem !important;
    padding: 3px 8px !important;
  }

  #notas-panel {
    position: fixed !important;
    z-index: 14000 !important;
  }

  #notas-panel.notas-panel--open.notas-panel--fullscreen {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  #notas-panel.notas-panel--open:not(.notas-panel--fullscreen) {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: min(72dvh, 520px) !important;
    max-height: min(72dvh, 520px) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.48) !important;
  }

  .notas-panel-hd {
    padding: 14px 16px;
    min-height: 48px;
  }

  .notas-panel-hd__title {
    font-size: 1rem;
  }

  .notas-panel-hd__close {
    font-size: 1.25rem;
    padding: 8px;
  }

  #notas-panel-lista {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .notas-inbox-item {
    padding: 14px 16px;
    align-items: center;
  }

  .notas-inbox-item__preview {
    -webkit-line-clamp: 3;
  }

  body.notas-panel-open .notas-panel-backdrop {
    display: none;
  }

  /* Chat interno dentro de orden (modal) */
  #notas-wrap {
    padding: 8px !important;
    min-height: 0;
  }

  .imsg-stack {
    max-width: min(86vw, 300px) !important;
  }

  .imsg-composer {
    margin-left: 0;
    margin-right: 0;
    padding: 8px;
    gap: 8px;
  }

  .imsg-input {
    font-size: 16px;
    min-height: 42px;
  }

  .imsg-hint {
    font-size: 0.6875rem;
    padding: 0 4px 4px;
  }

  .presencia-panel {
    position: fixed !important;
    z-index: 14000 !important;
  }

  .presencia-panel.presencia-panel--open.presencia-panel--fullscreen {
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .presencia-panel-hd {
    padding: 14px 16px;
    min-height: 48px;
    flex-shrink: 0;
  }

  .presencia-panel-title {
    font-size: 1rem;
  }

  .presencia-close {
    font-size: 1.25rem;
    padding: 8px;
  }

  .presencia-lista {
    max-height: none !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
  }

  .presencia-row {
    padding: 12px 16px;
    border-radius: 0;
    gap: 10px;
    align-items: center;
  }

  .presencia-avatar {
    width: 36px;
    height: 36px;
  }

  .presencia-estado-txt {
    max-width: min(140px, 38vw);
  }

  @media (max-height: 520px) and (max-width: 932px) {
    .presencia-panel-hd {
      padding: 10px 14px;
      min-height: 44px;
    }

    .presencia-row {
      padding: 8px 14px;
    }

    .presencia-avatar {
      width: 32px;
      height: 32px;
      font-size: 0.75rem;
    }

    .presencia-nombre {
      font-size: 0.75rem;
    }

    .presencia-estado-txt {
      max-width: none;
      font-size: 0.625rem;
    }
  }

  /* Dashboard: grid 4 columnas → 2 → 1 */
  #dashboard-zona-taller {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ── POS / Ventas ─────────────────────────────────────────── */
  #view-pos.pos-app-root {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* Cabecera en rejilla: [Taller] [caja] [avatar] / logo abajo */
  #view-pos .pos-app-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back caja avatar"
      "brand brand brand";
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    flex-shrink: 0;
  }

  #view-pos .pos-app-header-left {
    grid-area: back;
    justify-self: start;
    min-width: 0;
  }

  #view-pos .pos-app-header-center {
    grid-area: brand;
    justify-self: center;
    width: 100%;
    max-width: 100% !important;
    padding: 2px 0 0;
    order: unset !important;
  }

  /* Los hijos de acciones participan en la rejilla (sin contenedor flex) */
  #view-pos .pos-app-header-actions {
    display: contents;
  }

  #view-pos #chip-caja-pos {
    grid-area: caja;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-pos .pos-app-header-actions > div:last-child {
    grid-area: avatar;
    justify-self: end;
    flex-shrink: 0;
  }

  #view-pos .pos-app-header-actions > button,
  #view-pos .pos-app-header-actions > div[style*="width:1px"],
  #view-pos #chip-stock-pos,
  #view-pos #chip-cxc-pos,
  #view-pos #presencia-wrap-pos {
    display: none !important;
  }

  #view-pos .pos-app-header-center .sidebar-top--in-header {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  #view-pos .pos-app-header-center .logo-icon-wrap {
    min-height: 22px !important;
    max-height: 28px !important;
  }

  #view-pos .pos-app-header-center .microtec-platform-logo,
  #view-pos .pos-app-header-center .logo-icon-wrap--has-img .sidebar-logo-img {
    max-height: 26px !important;
    max-width: 100px !important;
  }

  #view-pos .pos-app-header-center .logo-name {
    font-size: 0.75rem;
    max-width: min(180px, 42vw);
  }

  .pos-btn-taller {
    font-size: 0.6875rem;
    padding: 6px 10px;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Un solo icono en «Taller» para ganar espacio */
  .pos-btn-taller svg:nth-of-type(2) {
    display: none;
  }

  .pos-btn-taller svg {
    width: 12px;
    height: 12px;
    margin-right: 4px !important;
  }

  #view-pos #chip-caja-pos {
    font-size: 0.625rem;
  }

  #view-pos #pos-user-avatar.pos-user-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.75rem;
  }

  /* Cuerpo: contenido arriba, menú abajo (ya no barra izquierda) */
  #view-pos .pos-frame-body {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  #view-pos .pos-main--embedded {
    flex: 1;
    min-height: 0;
    min-width: 0;
    order: 1;
    overflow: hidden;
  }

  #view-pos .pos-page-scroll {
    height: 100%;
    padding: 10px 10px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-pos .pos-sidebar--embedded {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    flex-shrink: 0;
    flex-direction: column;
    border-right: none !important;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  body:not(.tema-light) #view-pos .pos-sidebar--embedded {
    border-top-color: var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
  }

  #view-pos .pos-sidebar--embedded .sidebar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px;
  }

  #view-pos .pos-sidebar--embedded .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  #view-pos .pos-sidebar--embedded .nav-item {
    flex: 0 0 auto;
    font-size: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 0;
    min-width: 46px;
    min-height: 44px;
    border-radius: 10px;
    position: relative;
  }

  #view-pos .pos-sidebar--embedded .nav-item .nav-icon {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #view-pos .pos-sidebar--embedded .nav-item .nav-icon svg {
    width: 18px;
    height: 18px;
  }

  #view-pos .pos-sidebar--embedded .sidebar-footer {
    display: none !important;
  }

  /* Venta: 1 columna también en horizontal (pos.js deja 2 cols hasta 700px) */
  #view-pos .pos-3col,
  .pos-3col {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 0;
    gap: 12px;
  }

  #view-pos .pos-col-center,
  .pos-col-center {
    max-height: none !important;
    overflow: visible;
    order: 1;
    width: 100%;
    min-width: 0;
  }

  #view-pos .pos-col-right,
  .pos-col-right {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    order: 2;
    width: 100%;
    min-width: 0;
  }

  .pos-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
    gap: 8px !important;
  }

  .pos-list-row {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  .pos-cart-row {
    grid-template-columns: minmax(0, 1fr) auto 60px !important;
    gap: 4px !important;
  }

  .pos-tabs,
  .pos-cats {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .pos-tabs::-webkit-scrollbar,
  .pos-cats::-webkit-scrollbar {
    display: none;
  }

  .pos-search-wrap {
    min-width: 0;
  }

  .pos-panel {
    padding: 12px;
    min-width: 0;
  }

  #view-pos .pos-table,
  .pos-table {
    min-width: 0;
  }

  #view-pos [style*="min-width:680px"],
  #view-pos [style*="min-width: 680px"] {
    min-width: 0 !important;
  }

  #view-pos [style*="grid-template-columns:repeat(4"],
  #view-pos [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #view-pos [style*="grid-template-columns:repeat(3"],
  #view-pos [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Aviso licencia ──────────────────────────────────────── */
  .lic-banner {
    padding: 8px 10px;
    gap: 8px;
  }

  .lic-banner__text {
    min-width: 0;
    font-size: 0.6875rem;
  }

  /* Órdenes (vista tabla / listas): ocultar «Asignado» + fecha larga; dejar solo técnico */
  #page-ordenes .orden-asignado-meta,
  #page-ordenes .orden-asignado-block,
  #view-taller #dash-lista-panel .orden-asignado-meta,
  #dash-urgentes-lista .orden-asignado-meta,
  .modal.modal--flujo-orden .orden-asignado-block,
  .modal.modal--expediente-fluido .orden-asignado-block,
  .modal.modal--orden-expediente-paneles .orden-asignado-block {
    display: none !important;
  }

  /* ── Tablas y modales ────────────────────────────────────── */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    max-width: calc(100vw - 16px);
    margin: 8px;
  }

  .content .page-header,
  .page-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Teléfonos muy estrechos (vertical u horizontal) */
@media (max-width: 400px),
  ((max-width: 932px) and (max-height: 520px)) {
  #dashboard-zona-taller {
    grid-template-columns: 1fr !important;
  }

  .topbar-right > div[style*="width:1px"] {
    display: none;
  }
}