/* Tablet */
@media (max-width: 1180px) {
  :root {
    --sidebar-width: 92px;
  }

  .brand span,
  .nav-label,
  .help-card,
  .version span {
    display: none;
  }

  .sidebar {
    align-items: center;
    padding-inline: 16px;
  }

  .nav-item {
    width: 56px;
    justify-content: center;
    padding: 0;
  }

  .document-layout {
    grid-template-columns: 1fr;
  }

  .summary-panel {
    position: static;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 1380px) {
  .document-layout {
    grid-template-columns: 1fr;
  }

  .summary-panel {
    position: static;
  }
}

/* Mobile */
@media (max-width: 700px) {
  :root {
    --topbar-height: 0px;
  }

  body {
    background: #f7f9fd;
  }

  .login-page {
    grid-template-columns: 1fr;
  }

  .login-hero {
    min-height: 260px;
    padding: 28px;
  }

  .hero-card {
    padding: 26px;
    border-radius: 28px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-text {
    font-size: 15px;
  }

  .hero-metrics {
    display: none;
  }

  .login-panel {
    padding: 22px;
    align-items: start;
  }

  .login-card {
    margin-top: -32px;
    padding: 28px;
  }

  .shell {
    display: block;
    min-height: 100vh;
    padding-bottom: var(--mobile-nav-height);
  }

  .sidebar,
  .topbar {
    display: none;
  }

  .main {
    display: block;
  }

  .content {
    padding: 0 16px 96px;
  }

  .mobile-header {
    display: block;
    margin: 0 -16px 18px;
    padding: 54px 20px 28px;
    color: #fff;
    background:
      radial-gradient(circle at 85% 10%, rgba(255,255,255,0.20), transparent 30%),
      linear-gradient(135deg, #2563eb 0%, #315cf6 52%, #1d4ed8 100%);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .mobile-header.simple {
    padding-bottom: 22px;
  }

  .mobile-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-header h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.05em;
  }

  .mobile-header p {
    margin: 7px 0 0;
    color: rgba(255,255,255,0.86);
  }

  .mobile-header .avatar {
    width: 52px;
    height: 52px;
  }

  .mobile-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    height: var(--mobile-nav-height);
    background: rgba(255,255,255,0.92);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(18px);
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-tab {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: var(--muted-2);
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-tab span {
    font-size: 22px;
    line-height: 1;
  }

  .mobile-tab.active {
    color: var(--primary);
  }

  .page-head {
    display: none;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .mobile-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }

  .kpi-card {
    min-height: 126px;
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
  }

  .kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: 21px;
  }

  .kpi-card strong {
    font-size: 22px;
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    border-radius: 22px;
  }

  .card-pad {
    padding: 18px;
  }

  .chart-placeholder {
    height: 190px;
  }

  .donut {
    width: 180px;
    height: 180px;
  }

  .donut-inner {
    width: 108px;
    height: 108px;
  }

  .table-wrap {
    display: none;
  }

  .mobile-card-list {
    display: grid;
    gap: 12px;
  }

  .filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .document-layout {
    display: block;
  }

  .summary-panel.desktop-only {
    display: none;
  }

  .mobile-sticky-actions {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    left: 0;
    right: 0;
    bottom: var(--mobile-nav-height);
    padding: 12px 16px;
    background: rgba(255,255,255,0.94);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(16px);
    z-index: 90;
  }

  .line-editor .table-wrap {
    display: block;
  }

  .line-editor .table {
    min-width: 760px;
  }

  .toast-root {
    right: 14px;
    left: 14px;
    top: 16px;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .mobile-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-card {
    padding: 14px;
  }

  .kpi-card strong {
    font-size: 20px;
  }

  .activity-row {
    grid-template-columns: 38px 1fr;
  }

  .activity-row .pill {
    grid-column: 2;
    justify-self: start;
  }
}


@media (max-width: 1180px) {
  .master-layout {
    grid-template-columns: 1fr;
  }

  .master-sidebar {
    position: static;
    max-height: none;
  }

  .master-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .master-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .master-layout {
    display: block;
  }

  .master-sidebar {
    margin-bottom: 16px;
  }

  .master-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .master-tab {
    min-width: 220px;
  }

  .master-head {
    display: grid;
  }

  .master-actions {
    display: grid;
  }

  .master-search {
    min-width: 0;
  }

  .master-form-grid {
    grid-template-columns: 1fr;
  }

  .master-span-2 {
    grid-column: span 1;
  }

  .master-form-actions {
    position: sticky;
    bottom: var(--mobile-nav-height);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    margin: 22px -18px -18px;
    padding: 12px 18px;
  }

  .master-form-actions .btn {
    flex: 1;
  }
}


/* Responsive fix - maestros */
@media (max-width: 1320px) {
  .master-layout {
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  }

  .master-table {
    width: max-content;
    min-width: 100%;
  }

  .master-table th:nth-child(3),
  .master-table td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 1180px) {
  .master-layout {
    grid-template-columns: 1fr;
  }

  .master-sidebar {
    position: static;
    max-height: none;
  }

  .master-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .master-main .table-wrap {
    display: block;
  }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .master-layout {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .master-sidebar.card {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 22px;
    overflow: hidden;
  }

  .master-sidebar .section-title {
    margin-left: 4px;
  }

  .master-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 0 4px 8px;
    margin: 0 -4px;
  }

  .master-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .master-tabs::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
  }

  .master-tab {
    min-width: 172px;
    max-width: 172px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .master-tab > span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .master-tab strong,
  .master-tab small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .master-tab strong {
    font-size: 12px;
  }

  .master-tab small {
    font-size: 10.5px;
  }

  .master-main {
    width: 100%;
    min-width: 0;
  }

  .master-main > .card {
    width: 100%;
    min-width: 0;
  }

  .master-main .table-wrap {
    display: none !important;
  }

  .master-main .mobile-card-list {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  .master-head {
    display: grid;
    gap: 12px;
  }

  .master-actions {
    display: grid;
    width: 100%;
  }

  .master-actions .btn,
  .master-search {
    width: 100%;
    min-width: 0;
  }

  .master-form-grid {
    grid-template-columns: 1fr;
  }

  .master-span-2 {
    grid-column: span 1;
  }

  .master-mobile-card-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .master-mobile-card-head .pill {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }

  .master-mobile-icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }

  .master-mobile-details {
    grid-template-columns: 1fr 1fr;
  }

  .master-mobile-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  .master-mobile-details,
  .master-mobile-actions {
    grid-template-columns: 1fr;
  }

  .master-tab {
    min-width: 158px;
    max-width: 158px;
  }
}


@media (max-width: 1180px) {
  .shell.sidebar-collapsed {
    grid-template-columns: 0 1fr;
  }

  .purchase-line {
    grid-template-columns: minmax(260px, 1fr) 130px 150px !important;
  }

  .purchase-line-subtotal,
  .purchase-line > button {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .desktop-menu-toggle {
    display: none;
  }

  .shell.sidebar-collapsed {
    display: block;
  }

  .purchase-toolbar {
    display: grid;
  }

  .purchase-search {
    max-width: none;
    width: 100%;
  }

  .purchase-lines-head {
    display: grid;
  }

  .purchase-line {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .purchase-line-product {
    min-width: 0;
  }

  .purchase-line-subtotal {
    min-height: 54px;
  }

  .purchase-sticky-actions {
    grid-template-columns: 1fr 1fr;
  }
}


@media (max-width: 1180px) {
  .transfer-line {
    grid-template-columns: minmax(260px, 1fr) 130px 180px;
  }
}

@media (max-width: 700px) {
  .transfer-line {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 1180px) {
  .reevaluation-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .reevaluation-actions {
    position: sticky;
    bottom: var(--mobile-nav-height);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    margin: 22px -18px -18px;
    padding: 12px 18px;
  }

  .reevaluation-actions .btn {
    width: 100%;
  }

  .cost-current-card {
    min-height: 68px;
  }
}


@media (max-width: 1180px) {
  .report-layout {
    grid-template-columns: 1fr;
  }

  .report-sidebar {
    position: static;
    max-height: none;
  }

  .report-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .report-layout {
    display: block;
  }

  .report-sidebar.card {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 22px;
    overflow: hidden;
  }

  .report-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 4px 8px;
    margin: 0 -4px;
  }

  .report-tabs .master-tab {
    min-width: 188px;
    max-width: 188px;
  }

  .report-filters {
    grid-template-columns: 1fr;
  }

  .report-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .report-filter-actions .btn {
    width: 100%;
  }

  .report-charts {
    display: none;
  }

  .report-main .table-wrap {
    display: none !important;
  }

  .report-main .mobile-card-list {
    display: grid;
    gap: 12px;
  }
}

/* Dialogos de maestros */
@media (max-width: 700px) {
  .master-list-card {
    min-height: auto;
  }

  .master-dialog-overlay {
    align-items: end;
    padding: 0;
  }

  .master-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 28px 28px 0 0;
  }

  .master-dialog-top {
    padding: 18px 18px 14px;
  }

  .master-dialog-top h2 {
    font-size: 19px;
  }

  .master-dialog-body {
    padding: 18px;
  }

  .master-dialog .master-form-grid {
    grid-template-columns: 1fr;
  }

  .master-dialog .master-span-2 {
    grid-column: span 1;
  }

  .master-dialog .master-form-actions {
    bottom: 0;
    margin: 22px -18px -18px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  }
}


/* Ajuste responsive final de grids */
@media (max-width: 1320px) {
  .master-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto !important;
  }

  .master-table .table-actions-header,
  .master-table .table-actions-cell {
    min-width: 264px;
  }
}

@media (max-width: 700px) {
  .table tbody tr.grid-row-selected td,
  .table tbody tr:hover td {
    box-shadow: none !important;
  }
}


/* Fix v18 - acciones clickeables y seleccion en maestros */
@media (min-width: 701px) {
  .master-main .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .master-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
  }
}

@media (max-width: 700px) {
  .master-mobile-card[data-master-row-id] {
    cursor: pointer;
  }

  .master-mobile-actions button {
    pointer-events: auto !important;
    position: relative;
    z-index: 8;
  }
}


/* Fix v19 - acciones de maestros en responsive */
@media (max-width: 1320px) {
  .master-table .table-actions-header,
  .master-table .table-actions-cell {
    min-width: 296px !important;
    width: 296px !important;
    max-width: 296px !important;
    overflow: visible !important;
  }
}

@media (max-width: 700px) {
  .master-mobile-card[data-selected="true"],
  .master-mobile-card.grid-row-selected {
    background: #eff6ff !important;
    border-color: rgba(37,99,235,.55) !important;
  }

  .master-mobile-actions,
  .master-mobile-actions * {
    pointer-events: auto !important;
  }
}

/* Fix v20: filtros dentro de dialogos de historiales */
@media (max-width: 700px) {
  .history-filters {
    grid-template-columns: 1fr !important;
  }
}

/* Fix v18: compras con sidebar abierto usan línea compacta en dos filas para evitar desbordes */
@media (min-width: 701px) {
  .shell:not(.sidebar-collapsed) .purchase-line {
    grid-template-columns: minmax(240px, 2fr) minmax(110px, 1fr) minmax(125px, 1fr) minmax(125px, 1fr) minmax(125px, 1fr) 52px !important;
    align-items: stretch;
  }

  .shell:not(.sidebar-collapsed) .purchase-line > * {
    min-width: 0;
  }

  .shell:not(.sidebar-collapsed) .purchase-line-product {
    grid-column: span 2;
  }

  .shell:not(.sidebar-collapsed) .purchase-line-remove {
    grid-column: 6;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 100%;
  }
}

@media (max-width: 640px) {
  .inventory-expiration-table {
    min-width: 620px;
  }

  .inventory-expiration-alert {
    right: -5px;
    top: -5px;
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}