/* clf-barra-documento.css — EL DOCUMENTO EN EL TELÉFONO (F2 de «la web en el móvil», 16/10/2026). Lo pinta
   js/clf-barra-documento.js, que es quien pone estas clases, y SÓLO por debajo de 768 px: en la tablet y el escritorio
   ninguna regla de aquí casa (D3). Lo que cada documento enseña en su pie plegado vive en su hoja (ot-ficha.css,
   editor.css); aquí, lo común a los dos. Lo vigila smoke-responsive-uso (U6-U8). */

@media (max-width:767px) {
  /* La cabecera se va con el scroll: hace scroll el documento entero, no sólo su cuerpo. */
  .clf-bd-on { display: block !important; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .clf-bd-on.main { height: 100vh; height: 100dvh !important; }
  /* Con el PDF a la vista el documento vuelve a su columna: el visor necesita su alto entero. */
  .clf-bd-on.clf-bd-pv { display: flex !important; flex-direction: column; overflow: hidden !important; }
  .clf-bd-on .clf-bd-esconde { display: none !important; }
  /* El cuerpo ya no hace scroll vertical (lo hace el documento), pero SÍ lateral: las tablas anchas (las líneas del
     motor, 750-875 px) se desplazaban de lado dentro del cuerpo y así siguen — cortadas no se podrían leer (U6). */
  .clf-bd-on:not(.clf-bd-pv) .clf-bd-cuerpo { overflow-x: auto !important; overflow-y: visible !important; flex: none !important; height: auto !important; max-height: none !important; }

  /* El pie de totales: en una línea, pegado encima de la barra; se despliega al tocarlo. */
  .clf-bd-on .clf-bd-pie { position: sticky !important; bottom: var(--clf-bd-alto, 64px); z-index: 5; cursor: pointer; padding-right: 34px !important; }
  .clf-bd-on .clf-bd-pie::after { content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -2px; border-left: 2px solid var(--text3, #94a3b8); border-top: 2px solid var(--text3, #94a3b8); transform: rotate(45deg); transition: transform .15s; }
  .clf-bd-on .clf-bd-pie.abierto::after { transform: rotate(225deg); margin-top: -7px; }
  .clf-bd-on.clf-bd-pv .clf-bd-pie { display: none !important; }

  /* La barra inferior: tres acciones del estado y «⋯». */
  .clf-bd-barra { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--white, #fff); border-top: 1px solid var(--border, #e2e8f0); box-shadow: 0 -6px 18px rgba(10,35,64,.08); }
  .clf-bd-on.clf-bd-pv .clf-bd-barra { flex-shrink: 0; }
  .clf-bd-b { flex: 1 1 0; min-width: 0; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--white, #fff); color: var(--k-navy, #0A2340); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .clf-bd-b svg { width: 17px; height: 17px; flex-shrink: 0; }
  .clf-bd-b .clf-bd-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clf-bd-b.clf-bd-prim { background: var(--k-naranja, #FF8C42); border-color: var(--k-naranja, #FF8C42); color: #fff; }
  .clf-bd-b[aria-disabled="true"] { background: #E3E7ED; border-color: #E3E7ED; color: #6B7686; }
  .clf-bd-b.clf-bd-mas { flex: 0 0 52px; padding: 0; }
  .clf-bd-puntos { font-size: 22px; line-height: 1; letter-spacing: 1px; }
  .clf-bd-b:focus-visible, .clf-bd-fila:focus-visible, .clf-bd-paso:focus-visible { outline: 2px solid var(--k-navy, #0A2340); outline-offset: 2px; }

  /* La píldora de estado junto al título (el stepper ya no está a la vista). */
  .clf-bd-chip { flex-shrink: 0; margin-left: 6px; white-space: nowrap; }

  /* La hoja «⋯». Cerrada no se ve (visibility): ni tapa ni deja sombra. */
  .clf-bd-fondo { position: fixed; inset: 0; z-index: 880; background: rgba(10,35,64,.35); opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; }
  .clf-bd-fondo.abierta { opacity: 1; visibility: visible; }
  .clf-bd-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 881; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; background: var(--white, #fff); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(10,35,64,.18); transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility .2s; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .clf-bd-hoja.abierta { transform: none; visibility: visible; }
  .clf-bd-hoja-cab { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 18px; border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0; }
  .clf-bd-hoja-tit { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--k-navy, #0A2340); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clf-bd-hoja-x { width: 44px; height: 44px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--text3, #94a3b8); cursor: pointer; }
  .clf-bd-hoja-c { overflow-y: auto; padding: 4px 12px 14px; }
  .clf-bd-sec { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text3, #94a3b8); padding: 12px 6px 6px; }
  .clf-bd-pasos { display: flex; flex-wrap: wrap; gap: 6px; }
  .clf-bd-paso { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: 4px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: var(--white, #fff); color: var(--text2, #475569); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
  .clf-bd-paso-f { font-size: 11px; font-weight: 500; color: var(--text3, #94a3b8); }
  .clf-bd-paso.es-current  { background: #fef3c7; color: #a16207; border-color: #fcd34d; }
  .clf-bd-paso.es-done     { background: #dcfce7; color: #15803d; border-color: #86efac; }
  .clf-bd-paso.es-revising { border-style: dashed; }
  .clf-bd-paso.es-cancelled { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
  .clf-bd-paso.es-invoiced { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
  .clf-bd-paso[aria-disabled="true"] { cursor: default; }
  .clf-bd-fila { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--border, #e2e8f0); background: none; color: var(--text, #0f172a); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
  .clf-bd-fila:last-child { border-bottom: 0; }
  .clf-bd-fila svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text2, #475569); }
  .clf-bd-fila[aria-disabled="true"] { color: var(--text3, #94a3b8); }
  .clf-bd-fila.clf-bd-casilla::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--text3, #94a3b8); border-radius: 4px; box-sizing: border-box; }
  .clf-bd-fila.clf-bd-casilla[aria-checked="true"]::before { background: var(--k-navy, #0A2340); border-color: var(--k-navy, #0A2340); box-shadow: inset 0 0 0 3px #fff; }
}