/* V1.00.3 - Rediseño móvil compacto de Seguimiento / Mis Requerimientos */
@media (max-width: 640px) {
  /* Evitar scroll horizontal de página */
  app-ingreso-rq,
  app-ingreso-rq .contenedor-subvista,
  app-ingreso-rq .subvista-content,
  app-traking,
  app-traking > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* Navegación superior: sin carrusel horizontal, compacta en rejilla */
  app-ingreso-rq .nav-subvista {
    position: sticky !important;
    top: 0 !important;
    z-index: 180 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    padding: 5px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
  }

  app-ingreso-rq .nav-subvista > a,
  app-ingreso-rq .nav-subvista > select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 4px 3px !important;
    border-radius: 7px !important;
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  app-ingreso-rq .nav-subvista > select {
    grid-column: span 3 !important;
  }

  app-ingreso-rq .subvista-content {
    padding: 5px !important;
  }

  /* Contenedor principal más limpio */
  app-traking > .container {
    margin: 0 !important;
    padding: 7px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  app-traking > .container > h2 {
    margin: 0 0 7px !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
    font-size: 0.94rem !important;
    line-height: 1.15 !important;
  }

  app-traking > .container > h2::before {
    margin-bottom: 2px !important;
    font-size: 0.56rem !important;
  }

  /* =========================================================
     FILTROS: 2 columnas, controles más bajos y sin espacios muertos
     ========================================================= */
  app-traking > .container > .filtros {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 7px !important;
    padding: 7px !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
  }

  app-traking > .container > .filtros > .filtro-item,
  app-traking > .container > .filtros > .custom-select,
  app-traking > .container > .filtros > .buscador-proyecto,
  app-traking > .container > .filtros > .usuario-select-container,
  app-traking > .container > .filtros > .tabla-toggle,
  app-traking > .container > .filtros > .filtro-item:first-child {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  app-traking > .container > .filtros label {
    display: block !important;
    min-height: 15px !important;
    margin: 0 0 2px !important;
    color: #475569 !important;
    font-size: 0.59rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  app-traking > .container > .filtros input,
  app-traking > .container > .filtros select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
  }

  app-traking > .container > .filtros .tabla-toggle button,
  app-traking > .container > .filtros > .tabla-toggle button,
  app-traking > .container > .filtros button {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border-radius: 8px !important;
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
  }

  app-traking .dropdown,
  app-traking .dropdown-list {
    max-height: 210px !important;
    font-size: 0.72rem !important;
  }

  /* =========================================================
     BOTONES DE VISTAS: 4 accesos en una sola fila + limpiar compacto
     ========================================================= */
  app-traking > .container > .tabla-toggle {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  app-traking > .container > .tabla-toggle > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 4px !important;
    border-radius: 9px !important;
    font-size: 0.59rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  app-traking > .container > .tabla-toggle > .btn-limpiar {
    grid-column: 1 / -1 !important;
    min-height: 31px !important;
    padding: 4px 7px !important;
    font-size: 0.61rem !important;
  }

  app-traking > .container > .tabla-toggle > .paginacion,
  app-traking > .container > .tabla-toggle > .tabla-ordenes,
  app-traking > .container > .tabla-toggle > .tabla-resultados {
    grid-column: 1 / -1 !important;
  }

  /* Paginación pequeña */
  app-traking .paginacion {
    min-height: 38px !important;
    margin: 2px 0 3px !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 9px !important;
  }

  app-traking .paginacion button {
    min-height: 31px !important;
    height: 31px !important;
    padding: 3px 5px !important;
    font-size: 0.61rem !important;
  }

  app-traking .paginacion span {
    font-size: 0.59rem !important;
  }

  /* =========================================================
     MIS ÓRDENES: tarjetas reales, sin encabezado de tabla ni scroll X
     ========================================================= */
  app-traking .tabla-ordenes {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  app-traking .tabla-ordenes > colgroup,
  app-traking .tabla-ordenes > thead {
    display: none !important;
  }

  app-traking .tabla-ordenes > tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Tarjeta principal de cada RQ */
  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    gap: 5px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 7px !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.055) !important;
    cursor: pointer !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Ocultar la flecha vieja y convertir el RQ en cabecera visual */
  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(1) {
    display: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(2) {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    color: #1d4ed8 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(2)::before {
    content: "RQ" !important;
    display: block !important;
    margin-bottom: 1px !important;
    color: #94a3b8 !important;
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(3) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    align-self: center !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(3)::before {
    content: "Proyecto" !important;
    display: block !important;
    margin-bottom: 1px !important;
    color: #94a3b8 !important;
    font-size: 0.51rem !important;
    font-weight: 700 !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(5) {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding: 4px 6px !important;
    border-radius: 999px !important;
    background: #ecfdf3 !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(5)::before {
    display: none !important;
    content: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding-top: 5px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #64748b !important;
    font-size: 0.61rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(4)::before {
    content: "Solicitante: " !important;
    display: inline !important;
    color: #94a3b8 !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(6) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    color: #64748b !important;
    font-size: 0.61rem !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(6)::before {
    content: "Obs.: " !important;
    display: inline !important;
    color: #94a3b8 !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(7),
  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(8) {
    grid-row: 4 !important;
    color: #475569 !important;
    font-size: 0.6rem !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(7) {
    grid-column: 1 / 3 !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(7)::before {
    content: "Creado: " !important;
    display: inline !important;
    color: #94a3b8 !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(8) {
    grid-column: 3 / 4 !important;
    text-align: right !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan])) > td:nth-child(8)::before {
    content: "Items: " !important;
    display: inline !important;
    color: #94a3b8 !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:not(:has(> td[colspan]))::after {
    content: "Ver detalle  ›" !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    margin-top: 2px !important;
    padding-top: 6px !important;
    border-top: 1px solid #eff6ff !important;
    color: #2563eb !important;
    font-size: 0.61rem !important;
    font-weight: 800 !important;
    text-align: right !important;
  }

  /* =========================================================
     DETALLE COMO MODAL / BOTTOM SHEET
     La misma fila activa sirve como cabecera clicable para cerrar.
     ========================================================= */
  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan])) {
    position: fixed !important;
    top: 8dvh !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 3202 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-color: #bfdbfe !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22) !important;
  }

  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan])) > td:nth-child(4),
  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan])) > td:nth-child(6),
  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan])) > td:nth-child(7),
  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan])) > td:nth-child(8) {
    display: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr.activa:not(:has(> td[colspan]))::after {
    content: "✕  Tocar aquí para cerrar" !important;
    grid-column: 1 / -1 !important;
    padding-top: 7px !important;
    color: #475569 !important;
    font-size: 0.61rem !important;
    font-weight: 700 !important;
    text-align: right !important;
  }

  /* Fila que contiene el detalle: backdrop */
  app-traking .tabla-ordenes > tbody > tr:has(> td[colspan]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3200 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(15, 23, 42, 0.58) !important;
    box-shadow: none !important;
  }

  app-traking .tabla-ordenes > tbody > tr:has(> td[colspan]) > td[colspan] {
    position: absolute !important;
    top: calc(8dvh + 117px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #f8fafc !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  app-traking .tabla-ordenes .detalle-orden {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  app-traking .tabla-ordenes .detalle-orden::before {
    content: "Detalle de productos" !important;
    display: block !important;
    margin: 0 0 7px !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }

  app-traking .tabla-ordenes .tabla-detalle-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  app-traking .tabla-ordenes .tabla-detalle {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > colgroup,
  app-traking .tabla-ordenes .tabla-detalle > thead {
    display: none !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody {
    display: block !important;
    width: 100% !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 9px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 9px rgba(15, 23, 42, 0.045) !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.66rem !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td::before {
    color: #94a3b8 !important;
    font-size: 0.49rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(1) {
    grid-column: 1 / -1 !important;
    background: #ffffff !important;
    padding: 2px 0 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
  }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(1)::before { content: "Producto" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(2)::before { content: "Solicitado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(3)::before { content: "Aprobado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(4)::before { content: "Rechazado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(5)::before { content: "Cancelado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(6)::before { content: "Enviado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(7)::before { content: "Comprado" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(8)::before { content: "Pend. compra" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(9)::before { content: "Saldo" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(10)::before { content: "Cumplimiento" !important; }
  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(11)::before { content: "Estado" !important; }

  app-traking .tabla-ordenes .tabla-detalle > tbody > tr > td:nth-child(10) {
    grid-column: 1 / 3 !important;
  }

  app-traking .tabla-ordenes .tabla-detalle .barra {
    width: 100% !important;
    min-width: 0 !important;
    height: 22px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  app-traking .tabla-ordenes .tabla-detalle .progreso {
    min-width: 30px !important;
    height: 22px !important;
    line-height: 22px !important;
    border-radius: 999px !important;
    font-size: 0.58rem !important;
    text-align: center !important;
  }

  app-traking .tabla-ordenes .tabla-detalle .btn-historial-fulfillment {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin-left: 4px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }

  /* El modal de historial debe quedar por encima del detalle de orden */
  app-traking > .modal {
    z-index: 4200 !important;
  }

  app-traking > .modal .modal-content {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    max-height: 92dvh !important;
    margin: 0 6px 6px !important;
    padding: 12px 9px calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px 18px 12px 12px !important;
    overflow-x: hidden !important;
  }

  app-traking > .modal .tracking-container,
  app-traking > .modal .tracking-container.unified {
    max-width: 100% !important;
  }

  /* Las demás tablas pueden deslizarse dentro de su propio contenedor,
     pero nunca deben ensanchar la página completa. */
  app-traking .tabla-resultados {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
  }
}