/* ============================================================================
   Escritorio — la cara de Captura en la computadora del taller

   Frank pasa más tiempo en la computadora que en obra. Hasta hoy esto era un
   celular estirado: el contenedor crecía y la barra subía, pero todo seguía en
   una columna de ancho completo (PR #86, 16-sep).

   Vive en UNA hoja que cargan las cuatro pantallas. Antes, este mismo bloque
   estaba copiado en tres de ellas y ausente en la cuarta — por eso «El efectivo»
   se quedó en formato celular sin que nadie lo notara. Un solo lugar es la única
   forma de que eso no vuelva a pasar.

   En celular NO cambia nada: todo vive dentro de @media (min-width:900px).
   ============================================================================ */

@media (min-width: 900px) {

  /* ── 1 · el marco, igual para las cuatro ────────────────────────────────── */
  /* El aire de abajo, en UN solo lugar: el cuerpo lo reserva y `.app` lo descuenta
     de su 100vh. Escritos por separado, la ventana pedía 940 px para caber en 900
     y aparecía un scroll fantasma en las pantallas que caben enteras. */
  :root { --sitio-barra: 40px; }

  /* EL PLANO VA A SANGRE, de borde a borde del navegador. Centrado con el resto se
     leía como una tarjeta flotando en medio del blanco, en vez de la cabecera de la
     página. Lo que va dentro sí se centra: el plano ancla, el contenido respira. */
  .app { max-width: none; padding-left: 0; padding-right: 0; }
  .top, .plano-tit { margin: 0; padding-left: max(40px, calc((100vw - var(--ancho)) / 2 + 40px));
                     padding-right: max(40px, calc((100vw - var(--ancho)) / 2 + 40px)); }

  /* El CONTENIDO sí lleva ancho máximo, y no es capricho: una línea de texto que
     cruza toda una pantalla de 2000 px se pierde al saltar de renglón, y estos
     usuarios tienen entre 55 y 65 años. 1440 es el punto donde la tabla de la
     factura cabe entera sin que el texto se vuelva un renglón interminable. */
  :root { --ancho: 1440px; }
  .cuerpo, .barra .pestanas { max-width: var(--ancho); margin-left: auto; margin-right: auto;
                          padding-left: 40px; padding-right: 40px; }
  /* La barra deja de estar pegada abajo y sube junto a la cabecera. Aquí ya no es
     un plano olivo sino una regla de pelo sobre el marfil, con los nombres como
     texto y la activa subrayada en terracota — el lenguaje del manual. El ícono
     se cae: a esta escala el nombre solo ya es el destino. */
  .barra { position: static; margin: 0 0 20px; padding-bottom: 0;
           background: none; border-top: 0; border-bottom: 1px solid var(--linea); }
  .barra .pestanas { display: flex; gap: 30px; }
  .barra a { flex-direction: row; gap: 0; min-height: 0; padding: 15px 0;
             color: var(--texto-3); border-top: 0; border-bottom: 2px solid transparent; }
  .barra a svg { display: none; }
  .barra a[aria-current="page"] { color: var(--cafe); border-top-color: transparent;
                                  border-bottom-color: var(--terracota); }
  .barra a:active { background: none; color: var(--cafe); }

  /* ── 2 · dos columnas donde de verdad sirven ────────────────────────────
     Gasto y Sueldos: capturar y ver lo capturado sin hacer scroll. El aviso de
     «enlace vencido» se queda fuera: ahí el grid solo estorbaría. */
  /* El grid vive en `.cuerpo`, no en `.app`: con el vocabulario visual el contenido
     va dentro de ese envoltorio (es el que lleva el padding lateral en celular), y
     si el grid se quedara en `.app` sus hijos serían la cabecera y el pie. */
  .app.gasto .cuerpo, .app.sueldos .cuerpo { display: grid; align-content: start; column-gap: 36px; }
  .app.gasto .cuerpo   { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); }
  /* Sueldos es la más ancha de las cuatro: dos tarjetas por fila con los campos
     sin apretarse. A 1100 px el nombre se cortaba («Marcelino R…»). */
  .app.sueldos .cuerpo { max-width: 1560px; }
  .app.sueldos .cuerpo { grid-template-columns: minmax(0, 1fr) 280px; }

  .app.gasto .cuerpo > *, .app.sueldos .cuerpo > * { grid-column: 1 / -1; }   /* por omisión, ancho completo */

  /* ── 3 · Gasto ──────────────────────────────────────────────────────────── */
  .app.gasto .col-a { display: block; grid-column: 1; }
  /* Antes, sin nada capturado «Lo último» se escondía y la segunda columna quedaba
     hueca. Desde el 22-sep no se esconde: enseña su estado vacío, que dice qué va a
     aparecer ahí. Una columna con una promesa se lee mejor que media pantalla en
     blanco — y el marco deja de bailar entre tener capturas y no tenerlas. */
  .app.gasto .dia {
    grid-column: 2; margin-top: 0; align-self: start;
    position: sticky; top: 24px;                     /* lo último queda a la vista */
    max-height: calc(100vh - 48px); overflow: auto;
    /* Sin caja: lo que solo se LEE va suelto, con una regla arriba que lo separa
       de la columna de captura. La caja blanca era del lenguaje anterior. */
    padding: 0 0 0 30px; background: none; border: 0; border-left: 1px solid var(--linea);
  }
  /* el botón de guardar deja de ser sticky: con la barra arriba no hay nada que esquivar */
  .app.gasto .go { position: static; padding-top: 18px; background: none; }
  /* El botón cierra el recorrido de los cuatro pasos, así que va donde TERMINA la
     lectura, no donde empieza. Suelto a la izquierda, con su nota centrada aparte,
     los dos se leían como cosas distintas. */
  /* El botón ocupa la columna entera. Recortado a 420 px y pegado a la derecha se
     leía como un botón secundario flotando, cuando es la acción de la pantalla. */
  .app.gasto .go button { width: 100%; max-width: none; }
  .app.gasto .go .nota { text-align: center; }
  /* La foto y el monto ya no van lado a lado: con el vocabulario visual son los
     pasos 02 y 03, y el recorrido numerado se lee en vertical. Se pierde algo de
     densidad aquí, y se gana que el orden sea el mismo en celular y en la
     computadora. Para compensar, la foto es más baja que en el celular. */
  .app.gasto .foto { height: 150px; }

  /* ── 4 · Sueldos ────────────────────────────────────────────────────────── */
  .app.sueldos .col-a { display: block; grid-column: 1; }
  /* Las semanas pasadas se quedan en la columna de la izquierda. Sin esto heredaban
     el `grid-column: 1 / -1` de por omisión, cruzaban las dos columnas y pasaban por
     DEBAJO de la tarjeta del efectivo, que es sticky. */
  .app.sueldos .pasadas { grid-column: 1; }
  /* minmax(0,1fr) otra vez, por lo mismo que arriba: las tarjetas traen campos
     con ancho mínimo propio y con `1fr` se desbordaban de su columna. */
  .app.sueldos .gente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                        gap: 14px; align-items: start; }
  .app.sueldos .gente > .p { margin: 0; }
  /* Sin número de fila: se coloca sola al lado de la columna izquierda. Fijarla en
     la fila 3 la mandaba arriba del título y dejaba un hueco. */
  .app.sueldos .total {
    grid-column: 2; align-self: start;
    position: sticky; top: 24px;
    margin: 0; padding: 0; background: none;
  }

  /* ── 5 · Factura: UNA columna, a propósito ──────────────────────────────
     La tabla de renglones es lo ancho de esta pantalla; partirla en dos la
     dejaría peor que hoy. Lo que sí crece es el historial de abajo. */
  .app.factura .renglones .desc { font-size: 16px; }
  .app.factura .renglones td, .app.factura .renglones th { padding: 12px 14px; }
  .app.factura .go { position: static; padding-top: 18px; background: none; }
  .app.factura .go button { width: 100%; max-width: none; }
  .app.factura .go .nota { text-align: center; }
  .app.factura .dia { margin-top: 30px; }

  /* ── 6 · El efectivo ────────────────────────────────────────────────────
     Era una columna de 860 px con media pantalla en blanco al lado. Las fichas son
     de una persona cada una —nombre, cuánto debería traer, sus cuentas— o sea que
     son tarjetas, no renglones de una tabla: se acomodan en rejilla como las de
     Obras. Con una sola persona ocupa un tercio, que se lee como una tarjeta y no
     como una lista estirada. */
  .app.efectivo .cuerpo { max-width: var(--ancho); }
  .app.efectivo #lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                         gap: 18px; align-items: start; }
  /* El estado vacío no es una ficha: cruza la rejilla entera. */
  .app.efectivo #lista .vacio { grid-column: 1 / -1; margin-top: 0; }

  /* ── 7 · lo que se lee mejor con espacio ────────────────────────────────── */
  .dia .g, .dia .fila { font-size: 16px; }
}

/* ============================================================================
   LA BARRA LATERAL — la misma de Oficina, ahora en la pantalla de Frank (22-sep)

   Hasta hoy el escritorio de Captura era la cabecera olivo a sangre y las cuatro
   pestañas como una tira de texto debajo. Funcionaba, pero era OTRO sistema: quien
   ve las dos pantallas —César, Gerardo, y con el tiempo Ana María— las leía como
   dos productos. Ahora las dos tienen la misma columna a la izquierda: logo arriba,
   los destinos en una lista, y al pie quién entró.

   Se enciende a 1100 px y no a 900: una barra de 248 px sobre una ventana de 900
   deja el contenido en 652, y ahí la tabla de Factura ya no cabe. Entre 900 y 1100
   se queda la cara anterior, que para esa franja sigue siendo la correcta.

   La columna va `position:fixed` y no como columna de un grid, a propósito: así el
   resto de `escritorio.css` —las dos columnas de Gasto y Sueldos, «Lo último»
   pegajoso, la tabla de Factura— sigue valiendo tal cual, sin recolocar nada. `.app`
   solo se corre 248 px a la derecha.

   En CELULAR no cambia absolutamente nada: `.columna` es `display:contents`, o sea
   invisible para el layout, y todo lo demás vive dentro de la media query.
   ============================================================================ */

/* La regla base, fuera de la media query: la columna no existe para el layout. */
.columna { display: contents; }

@media (min-width: 1100px) {

  .app { padding-left: 248px; }

  /* La columna: fija, de alto completo, con su propio scroll si un día no cupiera. */
  .columna {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; width: 248px; z-index: 10;
    padding: 26px 0; overflow-y: auto;
    background: var(--olivo); color: var(--marfil);
  }
  /* `.top` se disuelve y sus hijos —logo, quién entró, el estado de sincronía y el
     buzón— se vuelven hijos de la columna: así el logo va arriba y los otros tres
     al pie, que es lo que pidió César. El orden lo pone `order`, no el HTML. */
  .columna .top { display: contents; }

  /* El logo, centrado y a 44 px, con una regla que lo separa de los destinos. Es el
     encabezado de la columna, no una firma: a 30 px y pegado a la izquierda se leía
     como marca de agua. */
  .columna .marca { order: 1; height: 44px; align-self: center; margin: 0 0 24px; }

  /* Los destinos, uno por renglón. El ícono se queda: a esta escala ya no compite
     con el texto y es lo que hace reconocible cada pestaña de un vistazo. */
  .barra {
    order: 2; position: static; margin: 0; padding: 0;
    background: none; border-top: 1px solid rgba(245, 245, 235, .15); border-bottom: 0;
  }
  .barra .pestanas { display: flex; flex-direction: column; max-width: none;
                     margin: 0; padding: 0; gap: 0; }
  .barra a {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 52px; padding: 0 22px;
    color: rgba(245, 245, 235, .82);
    font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    border-top: 0; border-bottom: 0; border-left: 3px solid transparent;
  }
  .barra a svg { display: block; width: 19px; height: 19px; }
  .barra a[aria-current="page"] {
    color: var(--marfil); background: rgba(245, 245, 235, .09);
    border-top-color: transparent; border-bottom-color: transparent;
    border-left-color: var(--terracota);
  }
  .barra a:active { background: rgba(245, 245, 235, .14); color: var(--marfil); }

  /* El pie de la columna: QUIÉN entró. `margin-top:auto` lo manda hasta abajo.
     Frank tiene que poder ver que abrió con su liga y no con la de alguien más, y
     aquí sí cabe la palabra «Captura» —es el rol, como «OFICINA» en la de Ana María—
     que en celular se cae por falta de sitio. */
  .columna .modulo {
    order: 3; margin: auto 0 0; padding: 18px 22px 0;
    border-top: 1px solid rgba(245, 245, 235, .15);
    flex-direction: column; align-items: flex-start; gap: 3px;
  }
  .columna .modulo .who { order: 1; font-size: 16px; letter-spacing: 0;
                          text-transform: none; color: var(--marfil); }
  .columna .modulo .et { order: 2; display: block; }
  /* El reloj, igual que en la columna de Ana María: el día y la hora bajo quién entró.
     Lo pone `columna.js`; en celular no se dibuja porque no hay columna donde ponerlo. */
  .columna .reloj { display: block; order: 4; margin: 12px 0 0; padding: 0 22px;
                    font-size: 15px; line-height: 1.5; color: rgba(245, 245, 235, .84); }
  .columna .reloj .reloj-dia { display: block; color: var(--marfil); }
  .columna .sync { order: 5; align-self: flex-start; margin: 12px 0 0; padding: 0 22px; }
  /* El buzón, con su palabra y a todo el ancho de la columna: es el mismo botón que ve
     Ana María en la suya. Un globo suelto en una esquina no se toca. */
  .columna .fb-btn {
    /* `width/height:40px` viene de la regla de celular (`.top .fb-btn`), que sigue
       aplicando porque el botón está DENTRO de `header.top` aunque `.top` sea
       `display:contents`. Aquí es un botón con palabra, no un ícono cuadrado. */
    width: auto; height: auto; min-height: 44px;
    order: 6; margin: 14px 22px 0; padding: 0 13px; gap: 10px;
    justify-content: flex-start; white-space: nowrap;
    border-color: rgba(245, 245, 235, .25); letter-spacing: .06em;
  }
  .columna .fb-btn svg { width: 18px; height: 18px; }

  /* El título deja de ser un plano olivo: con la columna olivo al lado, dos planos
     del mismo color peleaban. Pasa a marfil, como en Oficina. */
  .top, .plano-tit {
    background: none; background-image: none; color: var(--texto);
    padding-left: 40px; padding-right: 40px;
  }
  .plano-tit { padding-top: 36px; padding-bottom: 0; }
  .plano-tit h1 { color: var(--cafe); font-size: 52px; }
  .plano-tit .hint { color: var(--texto-2); }

  /* El contenido deja de centrarse: se alinea a la izquierda, con el mismo margen de
     40 px que el título. Centrado —que es lo que hacía la regla de 900 px— el título
     arrancaba en 288 y el formulario en 466, y con la columna al lado esos 178 px de
     desfase se ven. Es además lo que hace Oficina: techo de ancho, alineado a la
     izquierda de su columna. */
  .cuerpo { max-width: var(--ancho); margin: 0; padding: 22px 40px 0; }

  .pie { padding-left: 40px; padding-right: 40px; }

  /* Ya no hay barra fija abajo que esquivar. */
  :root { --sitio-barra: 0px; }
}