/* Rotulo corto de pestana: oculto por defecto (escritorio usa el nombre largo).
   Unica regla fuera de la media query, a proposito: mantiene todo lo movil aqui. */
.nav-btn .nt-s { display: none; }

@media (max-width: 600px) {
  /* Jose 2026-07-25: "Panel de Control" y "Control Ejecutivo" no caben en 82px y
     salian cortados -> en movil se muestra el rotulo corto (Dashboard / C. Ejecutivo). */
  .nav-btn .nt { display: none; }
  .nav-btn .nt-s { display: inline; }

  /* Mantiene el shell a ancho completo y neutraliza el hueco del sidebar lateral. */
  #app {
    width: 100%;
    height: 100dvh;
  }

  #main,
  #app.sb-collapsed #main {
    width: 100%;
    min-width: 0;
  }

  /* Convierte el sidebar en una barra inferior fija que respeta la zona segura de iOS. */
  #sidebar,
  #sidebar.collapsed {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    min-width: 0;
    height: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: 0;
    border-top: 1px solid var(--g8);
    flex-direction: row;
    opacity: 1;
    overflow: hidden;
    pointer-events: auto;
    transition: none;
    z-index: 200;
  }

  /* Retira de la barra movil los elementos auxiliares y el control de colapso. */
  #sb-toggle,
  .sb-logo,
  .sb-footer,
  .sb-section,
  #qp-list {
    display: none;
  }

  /* Presenta las secciones como pestanas tactiles con desplazamiento horizontal. */
  .sb-nav {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    padding: 4px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sb-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-btn {
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    min-height: 56px;
    padding: 5px 4px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-radius: var(--r8);
    font-size: 10.5px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-btn .ni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 0;
    flex: 0 0 18px;
  }

  .nav-btn .nb {
    position: absolute;
    top: 3px;
    right: 5px;
    margin-left: 0;
  }

  .nav-btn.active {
    box-shadow: inset 0 0 0 1px #1F2937;
  }

  /* Reserva el alto de la barra inferior y contiene cualquier desborde lateral. */
  #content {
    width: 100%;
    max-width: 100%;
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .view {
    max-width: 100%;
    padding: 10px 8px;
    overflow-x: hidden;
  }

  /* Compacta cabeceras y mantiene sus acciones accesibles en una sola fila desplazable. */
  .act-bar {
    gap: 8px;
    margin-bottom: 12px;
  }

  /* LICITGO-MOVIL-NUEVA-TAREA-CORTADA-20260816 (Jose, captura del iPhone):
     esto era una fila DESLIZABLE (`nowrap` + `overflow-x:auto`) pero con la barra de
     scroll oculta (`scrollbar-width:none`), asi que nada indicaba que hubiera mas a la
     derecha: "+ Nueva Tarea" aparecia CORTADO por el borde y parecia roto. Y es
     precisamente el boton mas usado de la pantalla.
     Ahora los botones envuelven: caben todos, no se oculta ninguno y no hace falta
     descubrir un gesto. Cuesta una fila de alto en el movil de Jose; los operarios no
     ven esta pantalla (solo entran a ITs). */
  .act-bar-right {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 8px;
    overflow-x: visible;
  }

  /* Sin esto los botones se comprimen hasta partir el texto en vez de saltar de linea. */
  .act-bar-right > .btn {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* Reduce huecos y fuerza columnas estables sin ensanchar la pagina. */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .proj-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .grid-2,
  .dash-detail-grid,
  #view-dashboard .dash-detail-grid {
    gap: 8px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .toolbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Aumenta la densidad de tarjetas y paneles sin cambiar colores ni tipografia. */
  .card,
  .kpi,
  .pcard,
  .budget-bar-card {
    border-radius: var(--r12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }

  .cp,
  .kpi,
  #view-dashboard .cp,
  #view-dashboard .kpi,
  .budget-bar-card {
    padding: 12px;
  }

  .pcard-hd {
    padding: 12px 13px 9px;
  }

  .pcard-bd {
    padding: 10px 13px 12px;
  }

  .proj-hero,
  .co-hero {
    padding: 18px 16px;
    border-radius: var(--r12);
  }

  .tpl-card,
  .inc-card,
  .ce-leyenda {
    padding: 10px 12px;
    border-radius: var(--r8);
  }

  /* Encierra las tablas reales en su propio desplazamiento horizontal. */
  .dt,
  .ce-tabla {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .dt th,
  .dt td,
  .ce-tabla thead th,
  .ce-tabla tbody td {
    white-space: nowrap;
  }

  .ce-agent-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .ce-agent-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .ce-agent-confidence {
    justify-self: start;
  }

  .ce-agent-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  .ce-agent-actions .btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    white-space: normal;
  }

  .dash-agent-notice {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
  }

  .day-change-alert{min-width:40px;min-height:40px;justify-content:center;padding:7px}
  .day-change-alert-label{display:none}
  .mt-day-locked{align-items:stretch;flex-direction:column}
  .mt-day-locked .btn{width:100%;justify-content:center}
  .day-change-request-form .form-row{grid-template-columns:minmax(0,1fr)}
  .day-change-form-actions{display:grid;grid-template-columns:1fr 1fr}
  .day-change-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);padding:14px}
  .day-change-modal-head{align-items:flex-start}
  .day-change-list{max-height:calc(100dvh - 170px)}
  .day-change-row-head{gap:8px}
  .day-change-resolve{grid-template-columns:1fr 1fr}
  .day-change-resolve .form-input{grid-column:1/-1}
  .day-change-resolve .btn{width:100%;justify-content:center}

  /* IT del operario: la lista y el parte priorizan el trabajo de campo. Las
     clases de este bloque solo las emite informe_trabajo.js para ese rol. */
  #view-informes .it-list-toolbar { width: 100%; }
  #view-informes .it-refresh { width: 100%; justify-content: center; }
  #view-informes .it-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 8px;
  }
  #view-informes .it-tab {
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
  }
  #view-informes .it-sticky-actions { row-gap: 8px; }
  #view-informes .it-sticky-actions .btn { min-height: 44px; }
  #view-informes .it-close-error { width: 100%; }

  #view-informes .it-operario-listbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
  }

  #view-informes .it-operario-listbar .it-toggle,
  #view-informes .it-operario-listbar .it-list-toolbar {
    width: auto;
    min-width: 0;
    margin: 0;
  }

  #view-informes .it-operario-listbar .it-refresh {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }

  #view-informes .it-operario-listbar .it-refresh-label { display: none; }

  #view-informes .it-filters-operario {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    padding: 6px;
  }

  #view-informes .it-filters-operario .it-q-filter { grid-column: 1; }

  #view-informes .it-date-disclosure {
    grid-column: 2;
    min-width: 0;
  }

  #view-informes .it-date-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--g8);
    border-radius: var(--r8);
    background: var(--white);
    cursor: pointer;
    list-style: none;
  }

  #view-informes .it-date-disclosure > summary::-webkit-details-marker { display: none; }
  #view-informes .it-date-disclosure:not([open]) .it-date-summary-label { display: none; }

  #view-informes .it-date-disclosure[open] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
  }

  #view-informes .it-date-disclosure[open] > summary { grid-column: 1; }
  #view-informes .it-date-disclosure[open] .it-date-filter {
    grid-column: 2;
    width: 100%;
  }

  #view-informes .it-date-disclosure[open] .it-date-summary-label { display: none; }

  #view-informes .it-head-operario {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
  }

  #view-informes .it-head-operario .pg-title { display: none; }
  #view-informes .it-head-operario .pg-sub {
    margin: 0;
    color: var(--g1);
    font-size: 14px;
    font-weight: 700;
  }

  #view-informes .it-detail-operario .it-section {
    margin-bottom: 8px;
    padding: 8px 10px;
  }

  #view-informes .it-detail-operario .it-section h3 { margin-bottom: 8px; }
  #view-informes .it-detail-operario .it-ck-row { margin-bottom: 4px; }
  #view-informes .it-detail-operario .it-ck-main { gap: 5px; }

  #view-informes .it-actions-operario {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 8px -8px -92px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #view-informes .it-actions-operario .btn {
    width: 100%;
    min-width: 0;
  }

  .incident-modal .day-change-modal-head { align-items: flex-start; }
  .incident-modal .day-change-resolve { grid-template-columns: 1fr; }
  .incident-modal .day-change-resolve .form-input,
  .incident-modal .day-change-resolve .btn { width: 100%; min-height: 44px; }
  #tb-alert-wrap { gap: 6px; flex-wrap: wrap; }
  .incident-alert em { display: none; }

  /* LICITGO-MOVIL-ITS-COMPACTO-20260815: solo se emite para la cuenta de
     Jose. Reune las vistas, acciones y filtros en tres filas tactiles. */
  #view-informes .it-jose-mobile-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin: 0 0 10px;
  }

  #view-informes .it-jose-mobile-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    min-width: 0;
  }

  #view-informes .it-jose-mobile-row > span,
  #view-informes .it-jose-mobile-filter-row .it-flabel {
    color: var(--g4);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
  }

  #view-informes .it-jose-mobile-compact select,
  #view-informes .it-jose-mobile-compact input,
  #view-informes .it-jose-mobile-compact button {
    min-height: 44px;
  }

  #view-informes .it-jose-mobile-filter-row {
    grid-template-columns: minmax(126px, .9fr) minmax(0, 1.35fr);
    align-items: end;
    gap: 7px;
  }

  #view-informes .it-jose-mobile-filter-row .it-date-filter,
  #view-informes .it-jose-mobile-filter-row .it-q-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  #view-informes .it-jose-mobile-filter-row .it-flabel,
  #view-informes .it-jose-mobile-filter-row .form-input {
    width: 100%;
    min-width: 0;
  }

  #view-informes .it-jose-mobile-filter-row .form-input {
    padding-right: 7px;
    padding-left: 7px;
  }

  #view-informes .it-jose-mobile-filter-row .it-clear-date {
    width: 44px;
    height: 44px;
  }

  /* LICITGO-BANNER-FANTASMA-20260815: el aviso fijo en top:0 cubria la
     topbar del iPhone y, con ella, las propias salidas del problema. En movil
     vive sobre la navegacion inferior y respeta la zona segura de iOS. */
  #lg-sync-error-banner {
    top: auto !important;
    right: auto !important;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    max-height: min(42dvh, 320px);
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 10px !important;
    overflow-y: auto;
    border-radius: 6px;
  }

  #lg-sync-error-banner-txt { flex: 1 1 100%; }
  #lg-sync-error-banner button {
    flex: 1 1 140px;
    min-height: 44px;
    margin-left: 0 !important;
    white-space: normal;
  }
}


/* ============================================================================
   TACTIL — LICITGO-TACTIL-SIN-RESPUESTA-20260811
   Jose, desde su iPhone: "los botones de guardar, pdf, etc el tactil reacciona
   lento o incluso parece como si no hubiese tocado".

   No era lentitud del tactil. Eran tres cosas sumandose:
     1. CERO estilos `:active` en todo el CSS. En escritorio el `:hover` da
        respuesta; en un movil NO EXISTE el hover, asi que al tocar no cambiaba
        NADA hasta que la accion terminaba. El dedo no recibia ninguna senal.
     2. Botones de ~34px de alto (padding 8px + fuente 13px). Apple recomienda
        44px como minimo tactil.
     3. El guardado del IT serializa TODA la coleccion de informes (~537 KB) y
        espera confirmacion del servidor (hasta 20s de timeout). En 4G, dentro
        de una sala de calderas, eso es un par de segundos sin avisar de nada.

   Esto arregla 1 y 2 (puro CSS, sin tocar logica). Lo tercero se ataca aparte.
   ============================================================================ */

/* Respuesta INMEDIATA al toque, en cualquier dispositivo. Es lo que le dice al
   dedo "te he oido" antes de que la accion termine. */
.btn:active,
button:active,
[data-it-action]:active,
[data-action]:active {
  transform: scale(0.97);
  filter: brightness(0.92);
  transition: transform .04s ease, filter .04s ease;
}

/* Sin el flash gris de Safari (feo y ademas tardio: llega despues del toque) y
   sin el retardo de doble-toque para zoom. */
button, .btn, [data-it-action], [data-action], a, input[type=checkbox] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Un boton deshabilitado NO debe parecer que responde: si la app esta guardando
   y lo bloquea, el dedo tiene que notar que esta bloqueado, no que falla. */
.btn:disabled, button:disabled { opacity: .55; cursor: default; }
.btn:disabled:active, button:disabled:active { transform: none; filter: none; }

@media (max-width: 900px) {
  /* Zona tactil de 44px (minimo de Apple). Solo en movil/tablet: en escritorio
     el raton es preciso y agrandar los botones descuadraria las barras. */
  .btn, button[data-it-action], button[data-action] {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  /* Las casillas del checklist se tocan con el dedo mojado y con prisa. */
input[type=checkbox] { min-width: 22px; min-height: 22px; }
}