/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * BARRAS — barra superior (sándwich, título, estado) y barra inferior con íconos (D11):
 * Stock · [Entrada ⇄ Venta] · Dashboard (+ Panorama en Pro). La pestaña activa siempre
 * visible y resaltada; respeta la zona segura del teléfono. */
.barra-superior {
  position: sticky; top: 0; z-index: var(--z-barra);
  display: flex; align-items: center; gap: var(--e-2);
  height: calc(var(--alto-barra-superior) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--e-2) 0;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.barra-superior .titulo-pantalla { font-size: var(--t-lg); font-weight: var(--peso-titulo); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-superior .titulo-pantalla.entrada { color: var(--entrada); }
.barra-superior .titulo-pantalla.venta { color: var(--venta); }
.estado-sync { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); color: var(--texto-3); padding: 0 var(--e-2); }
.estado-sync.sin-conexion { color: var(--aviso); }

.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
  display: flex; align-items: stretch; justify-content: space-around; gap: var(--e-1);
  height: calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom));
  padding: var(--e-1) var(--e-2) env(safe-area-inset-bottom);
  background: var(--superficie-elevada); border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.06);
}
.pestana {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: transparent; color: var(--texto-2); font-size: var(--t-xs); font-weight: var(--peso-medio);
  border-radius: var(--r-sm); min-width: 0; max-width: 7rem; padding: var(--e-1) 0;
}
.pestana .pildora { display: grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--r-pildora); transition: background var(--dur-media) var(--curva); }
.pestana[aria-current="page"] { color: var(--texto); font-weight: var(--peso-fuerte); }
.pestana[aria-current="page"] .pildora { background: var(--primario-suave); color: var(--sobre-primario-suave); }

/* Espacio para que el contenido no quede debajo de la barra inferior */
.contenido { padding: var(--e-4) var(--e-4) calc(var(--alto-barra-inferior) + env(safe-area-inset-bottom) + var(--e-6) + 2rem); max-width: var(--ancho-max); margin: 0 auto; }

/* Filtros: botón flotante en la esquina inferior derecha, sobre la isla (fase UI) */
.filtros-flotantes { position: fixed; right: var(--e-4); z-index: calc(var(--z-barra) + 1); bottom: calc(var(--e-2) + env(safe-area-inset-bottom) + var(--alto-barra-inferior) + var(--e-3)); }
.boton-filtros { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie-elevada); color: var(--texto); box-shadow: var(--sombra-2); cursor: pointer; }
.filtros-flotantes.abierto .boton-filtros { background: var(--activo-fondo); color: var(--activo-texto); border-color: transparent; }
.contador-filtros { position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem; padding: 0 4px; border-radius: var(--r-pildora); background: var(--aviso); color: #fff; font-size: 0.6875rem; font-weight: var(--peso-titulo); display: grid; place-items: center; }
.panel-filtros { position: absolute; right: 0; bottom: calc(100% + var(--e-2)); width: min(20rem, calc(100vw - 2 * var(--e-4))); padding: var(--e-3); border-radius: var(--r-lg); border: 1px solid var(--borde); background: var(--superficie-elevada); box-shadow: var(--sombra-3); }
.panel-filtros-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-2); }
.panel-filtros .fila-chips { flex-wrap: wrap; overflow: visible; }

@media (min-width: 900px) {
  .barra-inferior { left: 50%; right: auto; transform: translateX(-50%); width: min(40rem, 100%); bottom: var(--e-3); border-radius: var(--r-xl); border: 1px solid var(--borde); height: var(--alto-barra-inferior); padding-bottom: var(--e-1); }
  .filtros-flotantes { right: calc(50% - 18rem - 3.5rem); bottom: var(--e-3); }
}

/* Con 4 pestañas (modo Pro) se compacta para que las etiquetas no choquen. */
.pestana { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Durante la migración no hay a dónde navegar. */
body[data-pantalla="migracion"] .barra-inferior, body[data-pantalla="migracion"] .fab-registro, body[data-pantalla="migracion"] .base-isla { display: none; }
/* Cinta del período en la barra superior: siempre visible donde hay filtro de fechas */
.cinta-periodo {
  display: inline-flex; align-items: center; gap: var(--e-1); flex: none; max-width: 52%;
  min-height: 2rem; padding: 0 var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--r-pildora);
  background: var(--superficie); color: var(--texto); font-size: var(--t-xs); font-weight: var(--peso-medio); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cinta-periodo span { overflow: hidden; text-overflow: ellipsis; }
.cinta-periodo[hidden] { display: none; }
.cinta-periodo:hover { border-color: var(--primario); }

/* ---------- Isla inferior con «+» central (fase UI 2026-10-23) ----------
   Rendimiento: el hueco del «+» es una máscara (sin JS) y las animaciones
   solo usan transform y opacity. */
.barra-inferior.isla {
  left: var(--e-3); right: var(--e-3); bottom: calc(var(--e-2) + env(safe-area-inset-bottom));
  height: var(--alto-barra-inferior); padding: 0 var(--e-2);
  border: 0; border-radius: var(--r-xl); box-shadow: none;
  background: transparent; isolation: isolate;
  /* La sombra sigue la forma recortada (con muesca), no el rectángulo */
  filter: drop-shadow(0 2px 3px rgb(16 24 40 / 0.08)) drop-shadow(0 8px 18px rgb(16 24 40 / 0.10));
}
.barra-inferior.isla::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--superficie-elevada);
  /* Muesca: círculo un poco mayor que el «+» (deja un aire que lo separa) */
  -webkit-mask: radial-gradient(circle 2.45rem at 50% 0.4rem, transparent 97%, #000 100%);
          mask: radial-gradient(circle 2.45rem at 50% 0.4rem, transparent 97%, #000 100%);
}
.isla .pestana { position: relative; }
.isla .hueco-fab { flex: 0 0 4.75rem; }
/* Pestaña activa: ícono en su píldora y una pequeña ola debajo */
.isla .pestana::after {
  content: ''; position: absolute; bottom: 0.35rem; left: 50%; width: 1.25rem; height: 3px; border-radius: 3px;
  background: currentColor; transform: translateX(-50%) scaleX(0); transition: transform var(--dur-media) var(--curva);
}
.isla .pestana[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.isla .pestana .pildora { width: 3rem; }

.fab-registro {
  position: fixed; left: 50%; z-index: calc(var(--z-barra) + 1); transform: translateX(-50%);
  /* El centro del «+» queda a 0.4rem del borde superior de la isla, dentro de la muesca */
  bottom: calc(var(--e-2) + env(safe-area-inset-bottom) + var(--alto-barra-inferior) - 2.15rem);
  display: grid; justify-items: center; pointer-events: none;
}
.fab {
  pointer-events: auto; width: 3.5rem; height: 3.5rem; margin-top: 0; border-radius: 50%; border: 0; position: relative;
  display: grid; place-items: center; cursor: pointer; color: var(--sobre-fab);
  background: var(--fab); box-shadow: var(--sombra-2);
  transition: background-color var(--dur-media) var(--curva), transform var(--dur-rapida) var(--curva);
}
.fab:active { transform: scale(0.94); }
.fab .fab-icono { position: absolute; display: grid; place-items: center; transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva); }
.fab .fab-venta, .fab .fab-entrada { opacity: 0; transform: scale(0.6) rotate(-30deg); }
.fab-registro[data-registro="venta"] .fab { background: var(--venta); color: var(--sobre-venta); }
.fab-registro[data-registro="entrada"] .fab { background: var(--entrada); color: var(--sobre-entrada); }
.fab-registro[data-registro="venta"] .fab-mas, .fab-registro[data-registro="entrada"] .fab-mas { opacity: 0; transform: scale(0.6) rotate(45deg); }
.fab-registro[data-registro="venta"] .fab-venta, .fab-registro[data-registro="entrada"] .fab-entrada { opacity: 1; transform: none; }

/* Dos accesos flotantes sobre la isla */
.fab-opciones { display: flex; gap: var(--e-2); margin-bottom: var(--e-2); }
.fab-mini {
  pointer-events: none; opacity: 0; transform: translateY(0.75rem) scale(0.9);
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: 2.5rem; padding: 0 var(--e-4);
  border: 1px solid var(--borde); border-radius: var(--r-pildora); background: var(--superficie-elevada); color: var(--texto);
  font-size: var(--t-sm); font-weight: var(--peso-fuerte); box-shadow: var(--sombra-2); cursor: pointer;
  transition: opacity var(--dur-media) var(--curva), transform var(--dur-media) var(--curva), background-color var(--dur-media) var(--curva);
}
.fab-registro.abierto .fab-mini { pointer-events: auto; opacity: 1; transform: none; }
.fab-registro.abierto .fab-mini.entrada { transition-delay: 40ms; }
.fab-mini.venta[aria-pressed="true"] { background: var(--venta); color: var(--sobre-venta); border-color: transparent; }
.fab-mini.entrada[aria-pressed="true"] { background: var(--entrada); color: var(--sobre-entrada); border-color: transparent; }

@media (min-width: 900px) {
  .barra-inferior.isla { left: 50%; right: auto; width: min(36rem, 100%); transform: translateX(-50%); bottom: var(--e-3); }
  .fab-registro { bottom: calc(var(--e-3) + var(--alto-barra-inferior) - 2.15rem); }
}

/* Base sólida desde la línea de los íconos hasta el borde: el contenido no asoma alrededor de la isla */
.base-isla {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-barra) - 1); pointer-events: none;
  height: calc(var(--e-2) + env(safe-area-inset-bottom) + var(--alto-barra-inferior) * 0.55);
  background: var(--fondo);
}
@media (min-width: 900px) { .base-isla { display: none; } }
.pestana-texto { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }