/*
 * EL HUB EN EL CELULAR (paso 10 de MODO_AUTONOMO, fase 4 del plan de Flex).
 *
 * Nuestro, no del kit: el kit no tiene ningún @media (salvo prefers-reduced-motion) y su única
 * pantalla de celular, la 31, es una maqueta de otro flujo. design.css es copia byte a byte del
 * diseño y design-hover.css se genera solo; por eso esto vive aparte. Ver
 * CORRECCIONES_PARA_DESIGN §36.
 *
 * Medido el 2026-10-14 con Chrome a 380 px: la barra lateral (226 px) se comía el 60 % de la
 * pantalla y el tablero quedaba en una franja de ~100 px.
 *
 * Las pantallas usan estilos en línea (así las porta el kit), así que lo que se pisa acá lleva
 * !important. Se pisa lo mínimo, y sólo debajo de 640 px: el escritorio no cambia.
 */

/* El salto de renglón de la barra del pipeline: sólo existe en el celular (checkpoint 12). */
.pipe-salto { display: none; }

/* «Densidad compacta» (Mi cuenta › Preferencias, Objetivo F): las filas de las listas principales,
 * marcadas con `data-fila`, más bajas. Con !important porque el kit escribe el padding inline. */
.hub-compacta [data-fila] { padding-top: 5px !important; padding-bottom: 5px !important; }

/* Fuera del celular, lo que es sólo del celular no existe. Salvo que sea lo único que vino
 * (`pipe-unica`: el servidor dibujó una sola variante del pipeline por la cookie del ancho). */
.hub-barra-celular,
.pipe-celular:not(.pipe-unica),
.ficha-acciones-celular { display: none !important; }

@media (max-width: 640px) {
  /* ── El layout del hub: la barra lateral pasa a ser un panel que se abre con el menú ── */
  .hub-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    z-index: 70;
    width: 270px !important;
    max-width: 86vw;
    transform: translateX(-102%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  .hub-raiz[data-menu="1"] .hub-sidebar { transform: none; }
  .hub-velo { display: none; }
  .hub-raiz[data-menu="1"] .hub-velo {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(19, 19, 22, 0.25);
  }
  .hub-barra-celular {
    display: flex !important;
    align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #ececef;
    background: #ffffff;
    min-height: 44px; box-sizing: border-box;
  }

  /* ── 04 Pipeline: lista por estado con pestañas, en vez del tablero ── */
  .pipe-escritorio:not(.pipe-unica) { display: none !important; }
  /* ⚠ CON EL :not(), igual que la regla de afuera: con menos especificidad perdía, y la primera vez
   * en un celular (sin la cookie del ancho, las dos variantes) la lista no se veía. 2026-10-16. */
  .pipe-celular, .pipe-celular:not(.pipe-unica) { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
  /* La barra (checkpoint 12): el buscador ocupa el renglón, al lado del botón de filtros. El menú de
   * filtros sube desde abajo como un panel, con un velo detrás. */
  .pipe-salto { display: block !important; flex-basis: 100%; height: 0; }
  /* Configuración de la empresa (Objetivo F): sin la columna de secciones, y el formulario en una columna. */
  .emp-secciones { display: none !important; }
  .us-campos { grid-template-columns: minmax(0, 1fr) !important; }
  .pipe-buscador { flex: 1 1 0; min-width: 0; width: auto !important; min-height: 40px; box-sizing: border-box; }
  .pipe-cabecera .tactil[aria-label="Filtros"] { width: 44px !important; height: 40px !important; }
  .pipe-menu-velo { position: fixed; inset: 0; background: rgba(19, 19, 22, 0.32); z-index: 60; }
  .pipe-menu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-height: 82vh !important; border-radius: 18px 18px 0 0 !important; z-index: 61 !important;
    animation: pipe-sube 0.22s cubic-bezier(0.22, 0.8, 0.3, 1); }
  .pipe-menu select, .pipe-menu input:not([type=checkbox]) { min-height: 40px; box-sizing: border-box; }
  @keyframes pipe-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* La bandeja «a mano»: la lista ocupa todo el ancho. */
  .pipe-lista-a-mano { width: 100% !important; border-right: none !important; }
  .pipe-ficha-lado { display: none !important; }

  /* La ficha, a pantalla completa, con la barra de acciones abajo. */
  .pipe-ficha-panel {
    position: fixed !important; inset: 0 !important;
    width: 100% !important; max-width: 100% !important;
    z-index: 60 !important; border-left: none !important;
    padding-bottom: 76px;
  }
  .pipe-ficha-panel .ficha-contenido { padding: 14px 16px 24px !important; }
  .ficha-acciones-celular {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
    gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #ffffff; border-top: 1px solid #ececef;
  }
  /* 44 px: el mínimo táctil que pide la 31 del kit. */
  .tactil { min-height: 44px !important; font-size: 14px !important; }
}

/* Lo que sólo aparece en el celular (el botón «Filtros», la ficha de la bandeja «a mano»). */
.solo-celular { display: none !important; }
@media (max-width: 640px) {
  .solo-celular { display: inline-flex !important; }
  .pipe-ficha-panel.solo-celular { display: block !important; }
}

/* Lo que en el celular sobra: el arrastre (no hay mouse) y el WhatsApp de la cabecera de la
 * ficha (ya está en la barra fija de abajo). */
@media (max-width: 640px) {
  .solo-escritorio { display: none !important; }
  /* La ficha: la etiqueta arriba del valor. En 380 px, una columna de 130 px dejaba el valor en
   * una tira de ~170 px y cada línea en tres renglones. */
  .ficha-campo { flex-direction: column; gap: 1px !important; }
  .ficha-etiqueta { width: auto !important; font-size: 11.5px; }
}

/* El inventario (la 18 traída al CRM): la columna de ubicaciones pasa a un select, y la tabla
 * deja código, tipo, m², estado y «Editar» — descripción y fotos se ven en el editor. */
@media (max-width: 640px) {
  .inv-ubicaciones { display: none !important; }
  .inv-principal { padding: 14px 16px 40px !important; }
  .inv-fila:not(.inv-cabecera) > :nth-child(7) { min-height: 44px; }
}

/* La tabla compacta: en el celular, y en el escritorio con el editor abierto (entre las
 * ubicaciones y el panel no entra la tabla entera). ⚠ Anchos FIJOS: cada fila es su propia
 * grilla, y una columna `auto` se mide distinto en cada una — la cabecera no alineaba. */
.inv-compacta .inv-fila {
  grid-template-columns: 40px minmax(72px, 1fr) 44px 88px 48px !important;
  min-width: 0 !important; padding: 10px 12px !important;
}
.inv-compacta .inv-fila > :nth-child(4), .inv-compacta .inv-fila > :nth-child(5) { display: none !important; }
@media (max-width: 640px) {
  .inv-fila {
    grid-template-columns: 40px minmax(72px, 1fr) 44px 88px 48px !important;
    min-width: 0 !important; padding: 10px 12px !important;
  }
  .inv-fila > :nth-child(4), .inv-fila > :nth-child(5) { display: none !important; }
}

/* El 04 y el 20 rehechos desde el kit (Objetivo C, paso 3). Debajo de 640 px: el padding de 28 px
 * del kit se comería la pantalla, la grilla de dos columnas del 20 pasa a una, y el peek del kit
 * (392 px) ocupa el ancho. */
@media (max-width: 640px) {
  .pipe-pagina { padding: 14px 16px 24px !important; }
  .pipe-cabecera { padding: 0 !important; flex-wrap: wrap; }
  .pipe-filtros { padding: 0 0 12px !important; }
  .neg-pagina { padding: 14px 16px 40px !important; }
  .neg-grilla { grid-template-columns: minmax(0, 1fr) !important; }
  .fc-grilla { grid-template-columns: minmax(0, 1fr) !important; }
  /* La 23: la lista de segmentos arriba, corta, y cada condición en dos renglones. */
  .seg-raiz { flex-direction: column; }
  .seg-lista { width: auto !important; max-height: 200px; border-right: none !important; border-bottom: 1px solid #ececef; }
  .seg-cond { flex-wrap: wrap; }
  .seg-acciones { margin-left: 0 !important; flex-wrap: wrap; }
  .seg-cond select, .seg-cond input { width: auto !important; flex: 1 1 40% !important; }
  /* Los botones de cierre y WhatsApp: en 380 px no entran en una fila. */
  .neg-acciones { margin-left: 0 !important; flex-wrap: wrap; }
}

/* La 25, «Leyendo»: la barra que va y viene mientras la IA lee (nuestra; el kit no tiene carga indeterminada). */
@keyframes imp-ir { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.imp-cargando { animation: imp-ir 1.3s ease-in-out infinite alternate; }
@media (max-width: 640px) {
  .imp-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

/* «En construcción» (Objetivo D §2.3): el destello de arriba a la derecha gira despacio, y la 2×2 pasa a
 * una columna en el celular. */
@keyframes ec-gira { to { transform: rotate(360deg); } }
.ec-gira { animation: ec-gira 6s linear infinite; }
@media (max-width: 640px) {
  .ec-capacidades { grid-template-columns: minmax(0, 1fr) !important; }
}