/* Capa pantallas de la vista del superuser (admin.ejs) y de Mis leads (mis-leads.ejs). Dueño: 05-07. */
@layer pantallas{
  /* Chips de Administración (05-07): Espejo y Personal. Solo pares medidos en contraste.mjs:
     --info-tx/--info-fondo (cargo y unidades), --ok-tx/--ok-fondo (activo, espejo activo),
     --aviso-tx/--aviso-fondo (espejo apagado), --tx-2/--sup-2 (persona inactiva). */
  :is(.espejo,.tabla-personal) .chip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--t-chico);font-weight:600;line-height:1.5;white-space:nowrap;vertical-align:middle;background:var(--info-fondo);color:var(--info-tx)}
  :is(.espejo,.tabla-personal) .chip-ok{background:var(--ok-fondo);color:var(--ok-tx)}
  :is(.espejo,.tabla-personal) .chip-aviso{background:var(--aviso-fondo);color:var(--aviso-tx)}
  :is(.espejo,.tabla-personal) .chip-inactivo{background:var(--sup-2);color:var(--tx-2)}

  /* Espejo a Google Sheets: estado como chip y los cuatro conteos como fila de números
     (2×2 debajo de 720 px). El número va arriba del rótulo. */
  .espejo-estado{margin:0 0 var(--esp-4)}
  .espejo-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--esp-3);margin:0}
  .espejo-numeros > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;padding:var(--esp-3);background:var(--sup-2);border-radius:var(--r-md)}
  .espejo-numeros dt{color:var(--tx-2);font-size:var(--t-chico);overflow-wrap:anywhere}
  .espejo-numeros dd{margin:0;color:var(--kpi-num);font-size:var(--t-kpi);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}

  /* Personal: en escritorio, tabla con chips que se envuelven entre sí. */
  .tabla-personal .chip{margin:1px 4px 1px 0}
  .tabla-personal .c-email{overflow-wrap:anywhere}

  @media (max-width:719.98px){
    .espejo-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}

    /* Personal en tarjeta (07-movil §2): nombre en la línea 1 y correo atenuado en la 2, cada
       uno en una línea con ellipsis; desde la 3, los chips de cargo, unidades y activo en línea
       (se envuelven chip por chip, no por celda). */
    .tabla-tarjetas .tabla-personal :is(.c-nombre,.c-email){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tabla-tarjetas .tabla-personal .c-nombre{font-weight:600}
    .tabla-tarjetas .tabla-personal .c-email{color:var(--tx-2);font-size:var(--t-chico);overflow-wrap:normal;margin-bottom:var(--esp-1)}
    .tabla-tarjetas .tabla-personal :is(.c-cargo,.c-unidades,.c-activo):not([data-vacio]){display:inline}
    .tabla-tarjetas .tabla-personal .chip{margin:2px var(--esp-1) 2px 0}
    .tabla-tarjetas .tabla-personal .c-activo .chip::before{content:"Activo:\00a0"}
  }

  /* 05-07 admin y mis-leads · Mis leads: sin reglas propias. El filtro (.filtros) y la tabla en
     tarjeta (.tabla-leads con mostrarRtc:false) ya los cubre componentes-vistas.css de 05-03. */
}