/* ============================================================
   CAMPO & HACIENDA · Panel de administración de estancias (DEMO)
   Modo oscuro "software": la noche de campo como chrome, el verde
   de marca como acento, la caravana como firma del sistema.
   ============================================================ */

:root{
  --p-bg:      #0E100C;   /* fondo del panel, más oscuro que la web */
  --p-surf:    #16190F;   /* superficie de tarjeta */
  --p-surf-2:  #1D2114;   /* superficie elevada / hover */
  --p-line:    #2A2F1E;   /* líneas y bordes */
  --p-line-2:  #3A4029;
  --p-txt:     #E9EAE2;
  --p-txt-2:   #A7AC98;   /* texto secundario */
  --p-txt-3:   #6E7360;   /* texto terciario */
  --p-verde:   #9BD64A;
  --p-verde-2: #7FB03A;
  --p-verde-os:#3F5A1C;
  --p-amber:   #E0A63C;
  --p-rojo:    #D9633F;
  --p-azul:    #5FA8C4;
  --p-dato:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  --p-texto:   "Archivo", "Segoe UI", system-ui, sans-serif;
  --p-display: "Fraunces", Georgia, serif;
  --p-radio:   10px;
}

.panel-doc{ background:var(--p-bg); color:var(--p-txt); font-family:var(--p-texto); min-height:100vh; }
.panel-doc *{ box-sizing:border-box; }

/* ---------- Estructura ---------- */
.app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
@media (max-width: 940px){ .app{ grid-template-columns:1fr; } }

/* ---------- Barra lateral ---------- */
.side{
  background:linear-gradient(180deg, #12140E, #0C0E09);
  border-right:1px solid var(--p-line);
  display:flex; flex-direction:column; gap:.2rem;
  padding:1.1rem .8rem; position:sticky; top:0; height:100vh;
}
.side__marca{ display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.1rem; border-bottom:1px solid var(--p-line); margin-bottom:.8rem; }
.side__marca img{ height:34px; width:auto; }
.side__marca span{ font-family:var(--p-dato); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--p-txt-3); line-height:1.4; }
.side__grupo{ font-family:var(--p-dato); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--p-txt-3); padding:.9rem .7rem .35rem; }
.nav-app{ display:flex; flex-direction:column; gap:.1rem; }
.nav-app button{
  display:flex; align-items:center; gap:.7rem; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--p-texto); font-size:.9rem; color:var(--p-txt-2);
  padding:.6rem .7rem; border-radius:8px; transition:background-color .15s, color .15s;
}
.nav-app button:hover{ background:var(--p-surf); color:var(--p-txt); }
.nav-app button[aria-selected="true"]{ background:var(--p-surf-2); color:var(--p-verde); font-weight:600; }
.nav-app button svg{ width:18px; height:18px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; }
.side__pie{ margin-top:auto; padding:.8rem .7rem 0; border-top:1px solid var(--p-line); }
.side__pie a{ color:var(--p-txt-3); font-size:.78rem; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.side__pie a:hover{ color:var(--p-verde); }

/* ---------- Barra superior ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1rem clamp(1rem,3vw,2rem); border-bottom:1px solid var(--p-line);
  background:rgba(14,16,12,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20;
}
.top__id{ display:flex; align-items:center; gap:.9rem; }
.top__id h1{ font-family:var(--p-display); font-size:1.2rem; font-weight:600; margin:0; color:var(--p-txt); letter-spacing:-0.01em; }
.top__id .sub{ font-family:var(--p-dato); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--p-txt-3); }
.demo-tag{
  font-family:var(--p-dato); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--p-amber); border:1px solid color-mix(in srgb, var(--p-amber) 45%, transparent);
  padding:.3rem .55rem; border-radius:5px; white-space:nowrap;
}
.top__acc{ display:flex; align-items:center; gap:.7rem; }
.periodo{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--p-dato); font-size:.78rem; color:var(--p-txt-2); background:var(--p-surf); border:1px solid var(--p-line); padding:.5rem .8rem; border-radius:7px; }
.periodo b{ color:var(--p-txt); font-weight:500; }
.btn-volver{ font-size:.82rem; color:var(--p-txt-2); text-decoration:none; padding:.5rem .9rem; border:1px solid var(--p-line); border-radius:7px; transition:border-color .15s, color .15s; white-space:nowrap; }
.btn-volver:hover{ color:var(--p-verde); border-color:var(--p-verde-os); }

/* ---------- Área de contenido ---------- */
.main{ padding:clamp(1.1rem,3vw,2rem); max-width:1240px; }
.vista{ display:none; animation:aparece .35s ease; }
.vista.activa{ display:block; }
@keyframes aparece{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.seccion-tit{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:2rem 0 1rem; flex-wrap:wrap; }
.seccion-tit:first-child{ margin-top:0; }
.seccion-tit h2{ font-family:var(--p-display); font-size:1.15rem; font-weight:600; margin:0; }
.seccion-tit .nota{ font-family:var(--p-dato); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--p-txt-3); }

/* ---------- Tarjetas de KPI ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:.9rem; }
@media (max-width: 1100px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 560px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.kpi{ background:var(--p-surf); border:1px solid var(--p-line); border-radius:var(--p-radio); padding:1.1rem; display:flex; flex-direction:column; gap:.5rem; position:relative; overflow:hidden; }
.kpi::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--p-verde-2); opacity:.55; }
.kpi__lbl{ font-family:var(--p-dato); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--p-txt-3); }
.kpi__val{ font-family:var(--p-display); font-size:1.85rem; font-weight:600; line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.kpi__val small{ font-size:.85rem; color:var(--p-txt-2); font-weight:400; }
.kpi__delta{ font-family:var(--p-dato); font-size:.7rem; display:inline-flex; align-items:center; gap:.3rem; }
.up{ color:var(--p-verde); } .down{ color:var(--p-rojo); } .flat{ color:var(--p-txt-3); }

/* ---------- Grilla de paneles ---------- */
.grid{ display:grid; gap:.9rem; margin-top:.9rem; }
.grid--2{ grid-template-columns:1.5fr 1fr; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2b{ grid-template-columns:1fr 1fr; }
@media (max-width: 900px){ .grid--2,.grid--3,.grid--2b{ grid-template-columns:1fr; } }

.card{ background:var(--p-surf); border:1px solid var(--p-line); border-radius:var(--p-radio); padding:1.2rem; }
.card__cab{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:1rem; }
.card__cab h3{ font-family:var(--p-texto); font-size:.95rem; font-weight:600; margin:0; color:var(--p-txt); }
.card__cab .meta{ font-family:var(--p-dato); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--p-txt-3); }

/* Leyenda */
.leyenda{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.9rem; font-size:.78rem; color:var(--p-txt-2); }
.leyenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.leyenda i{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* Gráfico SVG */
.chart{ width:100%; height:auto; display:block; }
.chart .grid-l{ stroke:var(--p-line); stroke-width:1; }
.chart .axis-t{ font-family:var(--p-dato); font-size:10px; fill:var(--p-txt-3); }

/* Barras de inventario */
.barra{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:.8rem; padding:.5rem 0; border-bottom:1px solid var(--p-line); }
.barra:last-child{ border-bottom:0; }
.barra__lbl{ font-size:.86rem; color:var(--p-txt-2); }
.barra__track{ height:9px; background:var(--p-line); border-radius:99px; overflow:hidden; }
.barra__fill{ height:100%; background:linear-gradient(90deg, var(--p-verde-os), var(--p-verde-2)); border-radius:99px; transition:width 1s cubic-bezier(.2,.8,.2,1); }
.barra__val{ font-family:var(--p-dato); font-size:.82rem; color:var(--p-txt); font-variant-numeric:tabular-nums; }

/* Fórmulas / indicadores reproductivos */
.repro{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
@media (max-width: 640px){ .repro{ grid-template-columns:1fr; } }
.repro__item{ background:var(--p-surf-2); border:1px solid var(--p-line); border-radius:8px; padding:1rem; }
.repro__val{ font-family:var(--p-display); font-size:1.6rem; font-weight:600; color:var(--p-verde); line-height:1; }
.repro__lbl{ font-size:.82rem; color:var(--p-txt-2); margin-top:.4rem; }
.repro__frm{ font-family:var(--p-dato); font-size:.64rem; color:var(--p-txt-3); margin-top:.55rem; letter-spacing:.02em; }

/* Tabla de movimientos */
.tabla-app{ width:100%; border-collapse:collapse; font-size:.85rem; }
.tabla-app th{ font-family:var(--p-dato); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--p-txt-3); text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--p-line); }
.tabla-app td{ padding:.65rem .7rem; border-bottom:1px solid var(--p-line); color:var(--p-txt-2); }
.tabla-app tr:last-child td{ border-bottom:0; }
.tabla-app td:first-child{ color:var(--p-txt); }
.tabla-app .num{ font-family:var(--p-dato); font-variant-numeric:tabular-nums; text-align:right; }
.pill{ font-family:var(--p-dato); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.22rem .5rem; border-radius:99px; }
.pill--in{ background:color-mix(in srgb, var(--p-verde) 18%, transparent); color:var(--p-verde); }
.pill--out{ background:color-mix(in srgb, var(--p-azul) 18%, transparent); color:var(--p-azul); }
.pill--baja{ background:color-mix(in srgb, var(--p-rojo) 18%, transparent); color:var(--p-rojo); }

/* Semáforo sanitario */
.sanidad{ display:flex; flex-direction:column; gap:.7rem; }
.sanidad__fila{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--p-line); }
.sanidad__fila:last-child{ border-bottom:0; }
.sanidad__nom{ font-size:.88rem; color:var(--p-txt); }
.sanidad__fecha{ font-family:var(--p-dato); font-size:.72rem; color:var(--p-txt-3); }
.estado{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--p-dato); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }
.estado i{ width:8px; height:8px; border-radius:99px; }
.estado--ok i{ background:var(--p-verde); } .estado--ok{ color:var(--p-verde); }
.estado--pend i{ background:var(--p-amber); } .estado--pend{ color:var(--p-amber); }
.estado--venc i{ background:var(--p-rojo); } .estado--venc{ color:var(--p-rojo); }

/* Mapa de potreros */
.potreros{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.7rem; }
.potrero{ background:var(--p-surf-2); border:1px solid var(--p-line); border-radius:8px; padding:.85rem; position:relative; overflow:hidden; }
.potrero__barra{ position:absolute; left:0; bottom:0; right:0; height:4px; }
.potrero__nom{ font-family:var(--p-dato); font-size:.7rem; color:var(--p-txt-3); letter-spacing:.06em; }
.potrero__ha{ font-size:.8rem; color:var(--p-txt-2); margin-top:.15rem; }
.potrero__carga{ font-family:var(--p-display); font-size:1.3rem; font-weight:600; margin-top:.5rem; color:var(--p-txt); }
.potrero__carga small{ font-size:.66rem; color:var(--p-txt-3); font-weight:400; }
.potrero__desc{ font-size:.72rem; color:var(--p-txt-3); margin-top:.2rem; }

/* Barra de progreso financiera / genérica */
.linea-info{ display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; border-bottom:1px solid var(--p-line); font-size:.88rem; }
.linea-info:last-child{ border-bottom:0; }
.linea-info span:first-child{ color:var(--p-txt-2); }
.linea-info b{ font-family:var(--p-dato); color:var(--p-txt); font-weight:500; font-variant-numeric:tabular-nums; }
.linea-info b.pos{ color:var(--p-verde); }
.linea-info b.neg{ color:var(--p-rojo); }
.linea-total{ margin-top:.6rem; padding-top:.9rem; border-top:1px solid var(--p-line-2); font-size:1rem; }
.linea-total b{ font-family:var(--p-display); font-size:1.3rem; }

/* Aviso demo pie */
.demo-pie{ margin-top:2rem; padding:1.1rem 1.3rem; background:var(--p-surf); border:1px solid var(--p-line); border-radius:var(--p-radio); font-size:.86rem; color:var(--p-txt-2); line-height:1.6; }
.demo-pie strong{ color:var(--p-txt); }
.demo-pie a{ color:var(--p-verde); text-decoration:none; }
.demo-pie a:hover{ text-decoration:underline; }

/* ---------- Aviso legal (banda inferior, persiste en todas las vistas) ---------- */
.panel-legal{
  margin:0 clamp(1.1rem,3vw,2rem) clamp(1.1rem,3vw,2rem);
  padding:1rem 1.3rem; background:var(--p-surf); border:1px solid var(--p-line);
  border-radius:var(--p-radio); font-size:.76rem; line-height:1.65; color:var(--p-txt-3);
}
.panel-legal__tit{
  display:flex; align-items:center; gap:.45rem; margin:0 0 .55rem;
  font-family:var(--p-dato); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--p-amber);
}
.panel-legal__tit svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
.panel-legal p{ margin:.3rem 0; }
.panel-legal p:last-child{ margin-top:.6rem; color:var(--p-txt-2); }

/* Estado vacío para pestañas secundarias */
.placeholder{ text-align:center; padding:3.5rem 1.5rem; color:var(--p-txt-3); }
.placeholder svg{ width:44px; height:44px; stroke:var(--p-line-2); fill:none; stroke-width:1.4; margin-bottom:1rem; }
.placeholder h3{ font-family:var(--p-display); font-size:1.15rem; color:var(--p-txt-2); margin:0 0 .5rem; }
.placeholder p{ max-width:44ch; margin:0 auto; font-size:.9rem; }

/* ---------- Componentes ampliados ---------- */

/* KPI con sparkline */
.kpi__spark{ margin-top:.2rem; }
.kpi__spark svg{ width:100%; height:26px; display:block; overflow:visible; }

/* Grilla de 4 y de auto */
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--auto{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
@media (max-width: 900px){ .grid--4{ grid-template-columns:1fr 1fr; } }

/* Dona / anillo */
.dona-wrap{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.dona{ width:150px; height:150px; flex-shrink:0; }
.dona__centro{ font-family:var(--p-display); font-size:1.5rem; font-weight:600; fill:var(--p-txt); }
.dona__sub{ font-family:var(--p-dato); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; fill:var(--p-txt-3); }
.dona-leg{ display:flex; flex-direction:column; gap:.55rem; flex:1; min-width:160px; }
.dona-leg__it{ display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:.6rem; font-size:.86rem; }
.dona-leg__it i{ width:12px; height:12px; border-radius:3px; }
.dona-leg__it span{ color:var(--p-txt-2); }
.dona-leg__it b{ font-family:var(--p-dato); color:var(--p-txt); font-weight:500; font-variant-numeric:tabular-nums; }

/* Embudo reproductivo */
.embudo{ display:flex; flex-direction:column; gap:.5rem; }
.embudo__paso{ position:relative; background:var(--p-surf-2); border:1px solid var(--p-line); border-radius:8px; padding:.85rem 1.1rem; overflow:hidden; }
.embudo__fill{ position:absolute; inset:0; background:linear-gradient(90deg, var(--p-verde-os), rgba(127,176,58,.25)); border-radius:8px; transform-origin:left; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.embudo__cont{ position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.embudo__lbl{ font-size:.88rem; color:var(--p-txt); }
.embudo__val{ font-family:var(--p-display); font-size:1.25rem; font-weight:600; color:var(--p-txt); }
.embudo__pct{ font-family:var(--p-dato); font-size:.72rem; color:var(--p-verde); margin-left:.5rem; }

/* Mapa de potreros SVG */
.mapa-pot{ width:100%; height:auto; display:block; background:#0B0D08; border-radius:8px; }
.mapa-pot .pot-poly{ stroke:#0B0D08; stroke-width:2; cursor:default; transition:opacity .2s; }
.mapa-pot .pot-lbl{ font-family:var(--p-dato); font-size:9px; fill:#E9EAE2; font-weight:500; }
.mapa-pot .pot-sub{ font-family:var(--p-dato); font-size:7px; fill:#0B0D08; }
.mapa-leg{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.9rem; font-size:.8rem; color:var(--p-txt-2); }
.mapa-leg span{ display:inline-flex; align-items:center; gap:.4rem; }
.mapa-leg i{ width:12px; height:12px; border-radius:3px; }

/* Anillo de progreso */
.anillo{ display:flex; align-items:center; gap:1.1rem; }
.anillo svg{ width:78px; height:78px; flex-shrink:0; }
.anillo__txt b{ font-family:var(--p-display); font-size:1.5rem; font-weight:600; color:var(--p-txt); display:block; line-height:1; }
.anillo__txt span{ font-size:.82rem; color:var(--p-txt-2); }

/* Timeline / calendario sanitario */
.timeline{ position:relative; padding-left:1.4rem; }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--p-line); }
.timeline__it{ position:relative; padding:.5rem 0 .9rem; }
.timeline__it::before{ content:""; position:absolute; left:-1.4rem; top:.75rem; width:12px; height:12px; border-radius:50%; background:var(--p-surf); border:2px solid var(--p-verde); }
.timeline__it.pend::before{ border-color:var(--p-amber); }
.timeline__it.futuro::before{ border-color:var(--p-line-2); background:var(--p-surf); }
.timeline__fecha{ font-family:var(--p-dato); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--p-txt-3); }
.timeline__nom{ font-size:.92rem; color:var(--p-txt); margin-top:.15rem; }
.timeline__desc{ font-size:.8rem; color:var(--p-txt-2); margin-top:.15rem; }

/* Barras comparadas (ingresos vs egresos) */
.g-doble{ width:100%; height:auto; display:block; }

/* Mini-tarjeta de dato con ícono */
.dato-card{ background:var(--p-surf-2); border:1px solid var(--p-line); border-radius:9px; padding:1rem; display:flex; flex-direction:column; gap:.3rem; }
.dato-card__lbl{ font-family:var(--p-dato); font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--p-txt-3); }
.dato-card__val{ font-family:var(--p-display); font-size:1.5rem; font-weight:600; color:var(--p-txt); line-height:1; }
.dato-card__val small{ font-size:.7rem; color:var(--p-txt-2); }
.dato-card__pie{ font-size:.76rem; color:var(--p-txt-3); }

/* Barra de progreso etiquetada */
.progreso{ margin:.55rem 0; }
.progreso__top{ display:flex; justify-content:space-between; font-size:.84rem; color:var(--p-txt-2); margin-bottom:.35rem; }
.progreso__top b{ color:var(--p-txt); font-family:var(--p-dato); font-weight:500; }
.progreso__track{ height:8px; background:var(--p-line); border-radius:99px; overflow:hidden; }
.progreso__fill{ height:100%; border-radius:99px; transition:width 1s cubic-bezier(.2,.8,.2,1); }

/* Etiqueta de sección con acción */
.chips{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{ font-family:var(--p-dato); font-size:.68rem; letter-spacing:.04em; color:var(--p-txt-2); background:var(--p-surf-2); border:1px solid var(--p-line); border-radius:99px; padding:.3rem .7rem; }
.chip--on{ color:var(--p-verde); border-color:var(--p-verde-os); }

/* Tooltip flotante (delegado en JS, sobre marcas con data-tt) */
.tt-flot{
  position:fixed; z-index:80; pointer-events:none;
  background:var(--p-surf-2); border:1px solid var(--p-line-2); border-radius:7px;
  padding:.4rem .6rem; font-family:var(--p-dato); font-size:.72rem; color:var(--p-txt);
  white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.35); max-width:min(70vw,320px);
  transition:opacity .1s ease;
}
.tt-flot[hidden]{ display:none; }
[data-tt]{ cursor:default; }

/* Etiqueta de frescura de datos, junto al período */
.frescura{ font-family:var(--p-dato); font-size:.7rem; color:var(--p-txt-3); white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; }
.frescura i{ width:6px; height:6px; border-radius:99px; background:var(--p-verde); display:inline-block; box-shadow:0 0 0 3px color-mix(in srgb, var(--p-verde) 20%, transparent); }

/* Swatch de línea punteada para leyendas de proyección */
.leg-dash{ width:16px; height:0; border-top:2px dashed var(--p-verde-2); display:inline-block; }

/* Texto auxiliar bajo el estado de un potrero (días de descanso, etc.) */
.pot-desc-info{ font-family:var(--p-dato); font-size:.66rem; color:var(--p-txt-3); margin-top:.25rem; }

/* Barra inferior móvil para navegar vistas */
.tabbar{ display:none; }
@media (max-width: 940px){
  .app{ display:block; }
  .top__id h1{ font-size:1rem; }
  .top__id{ flex-wrap:wrap; gap:.5rem; }
  .side{ position:static; height:auto; flex-direction:row; overflow-x:auto; align-items:center; padding:.6rem .8rem; gap:.3rem; scrollbar-width:none; }
  .side::-webkit-scrollbar{ display:none; }
  .side__marca{ border-bottom:0; margin:0; padding:.2rem .5rem; border-right:1px solid var(--p-line); }
  .side__marca span{ display:none; }
  .side__grupo, .side__pie{ display:none; }
  .nav-app{ flex-direction:row; }
  .nav-app button{ white-space:nowrap; }
  .nav-app button span{ display:none; }
  .nav-app button svg{ width:22px; height:22px; }
  .nav-app button[aria-selected="true"] span{ display:inline; }
}