/* Punto Medig · estructura del panel interno (menú lateral, barra superior, ingreso y piezas compartidas).
   Los estilos propios de cada módulo van en mod-operacion.css y mod-control.css. */

body.panel { min-height: 100vh; }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- Ingreso ---------- */
.ingreso { display: grid; place-items: start center; padding-block: clamp(24px, 6vh, 72px); padding-left: var(--gutter); padding-right: var(--gutter-d); }
.ingreso-caja { width: min(560px, 100%); display: grid; gap: 1rem; }
.ingreso-caja h1 { font-size: var(--t-2xl); margin-top: 0.75rem; }
.lista-usuarios { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.usuario-opcion {
  width: 100%; display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem; text-align: left;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md); cursor: pointer;
}
.usuario-opcion:hover { border-color: var(--azul); }
.usuario-texto { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.usuario-texto .tenue { font-size: var(--t-sm); }
.ico-ir { color: var(--tenue); }
.ayuda-ingreso { font-size: var(--t-xs); color: var(--tenue); border-top: 1px dashed var(--linea); padding-top: 0.75rem; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--azul-suave); color: var(--azul); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
}
.avatar-oro { background: var(--oro-suave); color: var(--oro-texto); box-shadow: inset 0 0 0 1.5px var(--oro); }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: calc(100vh - 32px); }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--superficie); border-right: 1px solid var(--linea); padding: 1rem 0.75rem;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
}
.lateral-cab { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem 0.75rem; }
.nav { display: grid; gap: 1rem; flex: 1; align-content: start; }
.nav-grupo .etiqueta { padding: 0 0.75rem; margin-bottom: 0.3rem; font-size: 0.68rem; }
.nav-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--r-md);
  color: var(--tinta-2); text-decoration: none; font-weight: 700; font-size: var(--t-sm);
}
.nav-item:hover { background: var(--superficie-2); color: var(--tinta); }
.nav-item[aria-current="page"] { background: var(--azul-suave); color: var(--azul); }
.nav-item[aria-current="page"] .ico { color: var(--oro-texto); }
.nav-item span:not(.insignia) { flex: 1; min-width: 0; }
.insignia {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); display: inline-grid; place-items: center;
  background: var(--grave-suave); color: var(--grave); font-family: var(--f-dato); font-size: 0.72rem;
}
.lateral-pie { border-top: 1px solid var(--linea); padding: 0.75rem 0.5rem 0; display: grid; gap: 0.6rem; }
.usuario-actual { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.usuario-actual > span:last-child { display: grid; line-height: 1.25; min-width: 0; font-size: var(--t-sm); }
.usuario-actual .tenue { font-size: var(--t-xs); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 0.75rem;
  background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea); padding-block: 0.75rem; padding-left: var(--gutter); padding-right: var(--gutter-d);
}
.barra-titulo { flex: 1; min-width: 0; }
.barra-titulo .etiqueta { font-size: 0.68rem; }
.barra-titulo h1 { font-size: var(--t-xl); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acciones { display: flex; align-items: center; gap: 0.5rem; }
.fecha-hoy { font-size: var(--t-xs); color: var(--tenue); text-transform: capitalize; }
.vista { padding-block: 1.25rem 3rem; padding-left: var(--gutter); padding-right: var(--gutter-d); outline: none; min-width: 0; }
.modulo { display: grid; gap: 1.25rem; max-width: 1240px; min-width: 0; }

.solo-movil { display: none; }
.velo { position: fixed; inset: 0; background: rgb(8 16 30 / 0.5); z-index: 39; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .solo-movil { display: inline-flex; }
  .lateral {
    position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform 0.2s ease-out; box-shadow: var(--sombra-2);
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  body.menu-abierto .lateral { transform: none; }
  .fecha-hoy { display: none; }
}

/* ---------- Piezas compartidas por los módulos ---------- */
.vacio { display: grid; justify-items: center; text-align: center; gap: 0.35rem; padding: 2rem 1rem; color: var(--tinta-2); }
.ico-vacio { width: 34px; height: 34px; color: var(--ok); background: var(--ok-suave); border-radius: 50%; padding: 7px; }

.wa-destino { display: flex; align-items: center; gap: 0.75rem; }
.wa-destino .ico { width: 30px; height: 30px; color: var(--whatsapp); }
.wa-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ayuda-wa { font-size: var(--t-xs); color: var(--tenue); }
.modal-titulo { font-size: var(--t-lg); }

/* Gráficos (barras, chispa, medidor) */
.grafico { overflow-x: auto; }
.grafico svg { display: block; width: 100%; min-width: 300px; height: auto; }
.g-grilla { stroke: var(--linea); stroke-width: 1; }
.g-eje { fill: var(--tenue); font-family: var(--f-dato); font-size: 10px; }
.g-valor { fill: var(--tinta); font-family: var(--f-dato); font-size: 11px; font-weight: 500; }
.g-barra { fill: color-mix(in srgb, var(--azul) 55%, var(--superficie)); }
.g-resaltar { fill: var(--azul); }
.g-zona { fill: transparent; }
.g-col:hover .g-zona { fill: color-mix(in srgb, var(--azul-suave) 60%, transparent); }
.g-col:hover .g-barra { fill: var(--azul); }
.g-meta { stroke: var(--oro); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chispa { display: block; overflow: visible; }
.c-area { fill: color-mix(in srgb, var(--azul) 12%, transparent); }
.c-linea { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-punto { fill: var(--azul); stroke: var(--superficie); stroke-width: 2; }
.medidor { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--superficie-2); overflow: visible; }
.medidor-barra { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--info); }
.medidor-ok .medidor-barra { background: var(--ok); }
.medidor-aviso .medidor-barra { background: var(--aviso); }
.medidor-grave .medidor-barra { background: var(--grave); }
.medidor-meta { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tinta); border-radius: 1px; }

.enlace-cinta { color: inherit; font-weight: 700; }