/* ============================================================
   Armazón responsive — Fase 1
   Sustituye el prop «modo» del prototipo por media queries reales.
   Móvil < 768 · Tablet 768–1279 · Escritorio >= 1280
   Sin alturas fijas de escenario: el alto lo pone el viewport (100dvh).
   ============================================================ */

/* El crema es el lienzo; encima flotan el panel oscuro y la tarjeta
   blanca del contenido, como en la referencia. En el móvil no hay aire:
   a 375px cada píxel de ancho cuenta. */
.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--fondo-app);
}

.columna {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--fondo-tarjeta);
}

.area {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
  min-width: 0;
}

.columna {
  /* Sitio para la barra inferior fija y el área segura del dispositivo */
  padding-bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .columna { padding-bottom: 0; }
}

.vista {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--e-2) var(--e-2) var(--e-3);
}

.vista__interior { max-width: 1160px; margin-inline: auto; display: grid; gap: var(--e-3); }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cabecera-alto);
  padding: var(--e-1) var(--e-15);
  background: var(--fondo-tarjeta);
  border-bottom: 1px solid var(--borde-tenue);
}
.cabecera__logo { display: flex; align-items: center; }

.cabecera__proyecto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: var(--tactil);
  justify-content: center;
  padding: 0 var(--e-15);
  border-radius: var(--r-chico);
  min-width: 0;
}
.cabecera__proyecto:hover { background: var(--fondo-sutil); }
.cabecera__nombre {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 560px) { .cabecera__nombre { max-width: 46vw; } }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-05); }

/* Indicador de conexión + cambios pendientes (sección 8) */
.conexion {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 var(--e-15);
  border-radius: var(--r-pill);
  background: var(--fondo-sutil);
  font-size: 12px; font-weight: 700;
  color: var(--texto-medio);
  white-space: nowrap;
}
.conexion__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--optimo-punto); flex: none; }
.conexion[data-red="offline"] { background: var(--deteriorado-fondo); color: var(--deteriorado-texto); }
.conexion[data-red="offline"] .conexion__punto { background: var(--deteriorado-punto); }
/* El texto se ve también en el celular. Escondido, el indicador quedaba
   como un puntito que nadie identifica como botón, y ahí es justo donde
   hay que tocar para configurar la sincronización. */
.conexion__texto { display: inline; }

/* ---------- Navegación: barra inferior (móvil) ---------- */
.barra-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: calc(var(--barra-alto) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fondo-tarjeta);
  border-top: 1px solid var(--borde-tenue);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  box-shadow: 0 -4px 18px rgba(23, 21, 15, .05);
}
.destino {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  height: 100%;
  min-height: var(--tactil);
  color: var(--texto-tenue);
  font-size: 11px;
  font-weight: 600;
}
.destino svg { width: 24px; height: 24px; }
.destino[aria-current="page"] { color: var(--texto); }
.destino[aria-current="page"] .destino__icono {
  background: var(--acento);
  border-radius: var(--r-pill);
}
.destino__icono {
  display: grid; place-items: center;
  width: 44px; height: 26px;
  transition: background-color .12s ease;
}

/* Acción flotante central — el único uso de lima junto a la selección */
.fab-hueco { display: grid; place-items: center; }
.fab {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--texto);
  box-shadow: var(--sombra-2);
  transform: translateY(-10px);
}
.fab svg { width: 26px; height: 26px; }
.fab:hover { background: #BCE83C; }

/* ---------- Navegación: riel lateral (tablet y escritorio) ---------- */
.riel {
  display: none;
  grid-template-rows: auto 1fr;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-15);
  background: var(--primario);
  border-radius: var(--r-panel);
  color: #FFFFFF;
}
.riel__marca {
  width: 44px; height: 44px;
  margin-inline: auto;
  display: grid; place-items: center;
  border-radius: var(--r-chico);
  background: var(--acento);
  color: var(--primario);
  font-weight: 800;
  font-size: 19px;
}
.riel__destinos { display: grid; gap: var(--e-05); align-content: start; }
.riel .destino {
  border-radius: var(--r-medio);
  height: 62px;
  gap: 4px;
  color: rgba(255, 255, 255, .62);
}
.riel .destino:hover { background: rgba(255, 255, 255, .10); color: #FFFFFF; }
.riel .destino[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #FFFFFF; }
/* Dentro del panel oscuro, el icono activo no lleva pastilla: el fondo
   del destino ya marca cuál es, y dos marcas encima se pisan. */
.riel .destino[aria-current="page"] .destino__icono { background: transparent; }
.riel__accion { display: grid; place-items: center; }
.riel__accion .fab { transform: none; }

/* ---------- Panel de proyectos (solo escritorio) ---------- */
.panel-proyectos {
  display: none;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2);
  overflow-y: auto;
  background: transparent;
}
.proyecto-item {
  display: grid;
  gap: var(--e-1);
  width: 100%;
  text-align: left;
  padding: var(--e-15);
  border-radius: var(--r-chico);
  border: 1px solid transparent;
}
.proyecto-item:hover { background: var(--fondo-sutil); }
.proyecto-item[aria-current="true"] { background: var(--fondo-tarjeta); border-color: transparent; box-shadow: var(--sombra-2); }
.proyecto-item__nombre { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.proyecto-item__cliente { font-size: 12px; color: var(--texto-tenue); }
.proyecto-item__fila { display: flex; align-items: center; gap: var(--e-1); }
.proyecto-item__fila .barra { flex: 1; }
.proyecto-item__pct { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Rejillas de contenido ---------- */
.rejilla-elementos { display: grid; gap: var(--e-15); grid-template-columns: 1fr; }
.rejilla-conteos  { display: grid; gap: var(--e-1); grid-template-columns: repeat(2, 1fr); }
.rejilla-dos      { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }

/* ---------- Panel de detalle (solo escritorio) ---------- */
.panel-detalle { display: none; }

/* ============================================================
   TABLET — 768px a 1279px
   Riel lateral de iconos · rejilla de 2 columnas · detalle en modal
   ============================================================ */
@media (min-width: 768px) {
  .app {
    grid-template-columns: var(--riel-ancho) 1fr;
    gap: var(--marco);
    padding: var(--marco);
  }
  .riel { display: grid; }
  .barra-inferior { display: none; }
  .columna { border-radius: var(--r-panel); overflow: hidden; }
  .vista { padding: var(--e-3); }
  .cabecera { padding-inline: var(--e-3); }
  .cabecera__nombre { max-width: 34vw; }
  .rejilla-elementos { grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
  .rejilla-conteos { grid-template-columns: repeat(5, 1fr); }
  .rejilla-dos { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ESCRITORIO — 1280px en adelante
   Riel + panel de proyectos · rejilla auto-fill · detalle en panel derecho
   ============================================================ */
@media (min-width: 1280px) {
  .app { grid-template-columns: var(--riel-ancho-xl) var(--panel-ancho) 1fr; }
  .panel-proyectos { display: flex; }

  /* Con sitio de sobra, el destino se lee de un vistazo: icono y
     etiqueta en una línea. Es el mismo marcado; solo cambia el flujo. */
  .riel { padding: var(--e-3) var(--e-2); }
  .riel__marca { margin-inline: 0; }
  .riel .destino {
    grid-auto-flow: column;
    grid-auto-columns: auto 1fr;
    justify-items: start;
    justify-content: start;
    align-items: center;
    gap: var(--e-15);
    height: 50px;
    padding-inline: var(--e-15);
    font-size: 14px;
  }
  .riel .destino svg { width: 21px; height: 21px; }
  .riel .destino__icono { width: auto; height: auto; }
  .rejilla-elementos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* El detalle no reemplaza al listado: lo acompaña */
  .area.con-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); }
  .area.con-panel .panel-detalle {
    display: block;
    overflow-y: auto;
    min-height: 0;
    border-left: 1px solid var(--borde-tenue);
    background: var(--fondo-tarjeta);
  }
  .area.con-panel .rejilla-elementos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* En pantallas muy anchas el listado no debe estirarse sin límite */
@media (min-width: 1700px) {
  .vista__interior { max-width: 1320px; }
}

/* El indicador de conexión es un botón: se toca para forzar el envío */
.conexion { cursor: pointer; border: 0; }
.conexion:hover { filter: brightness(.96); }

/* Crear proyecto tiene que estar a la vista en el panel lateral */
.proyecto-nuevo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  width: 100%;
  min-height: var(--tactil);
  margin-top: var(--e-1);
  border-radius: var(--r-chico);
  border: 1px dashed var(--borde);
  color: var(--texto-medio);
  font-size: 14px;
  font-weight: 600;
}
.proyecto-nuevo:hover {
  border-style: solid;
  border-color: var(--primario);
  color: var(--texto);
  background: var(--fondo-tarjeta);
}

.gestionar-proyectos {
  width: 100%;
  min-height: 40px;
  font-size: 12px;
  color: var(--texto-tenue);
  border-radius: var(--r-chico);
}
.gestionar-proyectos:hover { color: var(--texto); background: var(--fondo-sutil); }

/* El nombre del proyecto es un desplegable: que se note */
.cabecera__linea { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cabecera__flecha {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: translateY(-2px) rotate(45deg);
}

/* El botón de crear lleva etiqueta: un icono solo no dice qué hace */
.fab-etiqueta {
  display: block;
  margin-top: -6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto);
  text-align: center;
}
.riel__accion { display: grid; justify-items: center; gap: 2px; }
.riel__accion .fab-etiqueta { margin-top: 2px; }

/* El pie con la firma: siempre abajo, en todas las pantallas.
   En móvil la barra inferior va fija encima del contenido, así que la
   columna le reserva su altura y el pie queda justo por encima. */
.pie-firma {
  padding: var(--e-1) var(--e-2);
  border-top: 1px solid var(--borde-tenue);
  background: var(--fondo-app);
}

/* Firma. Discreta pero presente: es su herramienta. */
.firma {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--texto-tenue);
  text-align: center;
  letter-spacing: .01em;
}
.firma-pie {
  margin-top: var(--e-3);
  padding-top: var(--e-2);
  border-top: 1px solid var(--borde-tenue);
  text-align: center;
}

/* En escritorio el proyecto ya está en el panel lateral: en la cabecera
   sobraba, y tener dos sitios para lo mismo confunde. */
@media (min-width: 1280px) {
  /* El proyecto ya está en el panel lateral, con su logo y su nombre */
  .cabecera__proyecto,
  .cabecera__logo { display: none; }
}

/* ==================================================================
   Impresión — «Guardar como PDF» desde el reporte
   Se va todo lo que es navegación: en el papel no sirve de nada y
   además roba el ancho. Queda el contenido, a una columna.
   ================================================================== */
@media print {
  .riel,
  .barra-inferior,
  .panel-proyectos,
  .cabecera,
  .reporte__acciones,
  .toasts,
  dialog {
    display: none !important;
  }

  html, body, #app {
    height: auto;
    overflow: visible;
    background: #fff;
  }

  #app { display: block; }

  .columna { display: block; padding-bottom: 0; }
  .area    { display: block; }

  .vista {
    overflow: visible;
    height: auto;
    padding: 0;
  }

  .vista__interior { max-width: none; gap: 16px; }

  /* Que una ficha o un bloque no se parta entre dos hojas */
  .reporte__fila,
  .movimiento,
  .cifra,
  .panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* En papel, los dos gráficos caben de sobra uno al lado del otro */
  .reporte__columnas { grid-template-columns: 1fr 1fr; }
  .rejilla-cifras { grid-template-columns: repeat(4, 1fr); }
  .panel { border-color: var(--borde); }

  .reporte__bloque { break-before: auto; }

  /* La firma sí se imprime: el reporte va a manos del cliente */
  .pie-firma { border: 0; padding-top: 12px; }

  .titulo-seccion { break-after: avoid; page-break-after: avoid; }

  /* Todo lo que dice algo con color hay que pedirlo explícitamente:
     por defecto el navegador imprime los fondos en blanco. */
  .pildora, .distintivo, .cifra, .leyenda__fila,
  .barras__barra, .anillo, .reporte__fila, .movimiento__punto {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a[href^="#"]::after { content: ''; }
}