/* Capa pantallas de la vista del jefe (jefe.ejs). Dueño: 05-06.
   Solo la enlaza la cabecera del shell. Solo tokens, ningún literal de color.
   Va después de componentes: gana sobre la tarjeta genérica de 05-03 sin subir especificidad. */
@layer pantallas{
  /* Bandeja «Por asignar» (div.tabla-tarjetas > table.tabla.tabla-bandeja).
     Escritorio: la fila de siempre, con el formulario en línea (el select se estira). */
  .tabla-bandeja .c-tel,.tabla-bandeja .c-recibido{white-space:nowrap}
  .tabla-bandeja .c-asignar{min-width:16rem}
  .tabla-bandeja .c-asignar form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
  .tabla-bandeja .c-asignar select{flex:1 1 12rem;min-width:0;max-width:100%}
  /* 06-03: desde 720 px (tabla), celdas con el mismo padding vertical que Mis leads, para que el nombre
     (estirado a 44 px en componentes-vistas.css) quede dentro de su celda. Solo con media: esta capa le
     gana al padding 0 de la tarjeta de componentes. */
  @media (min-width:720px){
    .tabla-bandeja td{padding-block:calc((44px - 1.55em) / 2)}
  }

  /* Debajo de 720 px, tarjeta por lead:
     línea 1, nombre con ellipsis y el negocio en línea detrás;
     línea 2, teléfono · ubicación, con la región atenuada;
     línea 3, «recibido» y la fecha;
     debajo, select y botón «Asignar» a todo el ancho, de 44 px como mínimo. */
  @media (max-width:719.98px){
    .tabla-tarjetas > table.tabla-bandeja > tbody > tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--esp-2);row-gap:0}
    .tabla-tarjetas .tabla-bandeja :is(.c-lead,.c-ubicacion){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .tabla-tarjetas .tabla-bandeja .c-lead{order:1;flex:0 0 100%;font-weight:600}
    .tabla-tarjetas .tabla-bandeja .c-lead .sub{display:inline;font-weight:400}
    .tabla-tarjetas .tabla-bandeja .c-lead .sub::before{content:"· ";margin-left:var(--esp-1)}
    .tabla-tarjetas .tabla-bandeja .c-tel{order:2;flex:none}
    .tabla-tarjetas .tabla-bandeja .c-ubicacion{order:2;flex:1 1 0}
    .tabla-tarjetas .tabla-bandeja .c-ubicacion::before{content:"· "}
    .tabla-tarjetas .tabla-bandeja tr:has(> .c-tel[data-vacio]) .c-ubicacion::before{content:none}
    .tabla-tarjetas .tabla-bandeja .c-ubicacion .sub{display:inline;font-size:inherit;color:var(--tx-2)}
    .tabla-tarjetas .tabla-bandeja .c-ubicacion .sub::before{content:"· ";margin-left:var(--esp-1)}
    .tabla-tarjetas .tabla-bandeja .c-recibido{order:3;flex:0 0 100%;font-size:var(--t-chico);color:var(--tx-2)}
    .tabla-tarjetas .tabla-bandeja .c-recibido::before{content:"recibido "}
    .tabla-tarjetas .tabla-bandeja .c-asignar{order:4;flex:0 0 100%;min-width:0;margin-top:var(--esp-3)}
    .tabla-tarjetas .tabla-bandeja .c-asignar form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-2)}
    .tabla-tarjetas .tabla-bandeja .c-asignar :is(select,button){width:100%;min-width:0;max-width:100%;min-height:44px}
  }

  /* Leads por etapa: 3 columnas en celular y en fila desde 720 px. El chip puede partir en dos
     líneas para que «En seguimiento» quepa en un tercio de 390 px. Mismo href, solo CSS. */
  .etapas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-2)}
  .etapa-caja{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--esp-2);min-width:0;min-height:44px;padding:var(--esp-3) var(--esp-2);background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-md);color:var(--tx);text-decoration:none;text-align:center}
  .etapa-caja:hover{background:var(--sup-hover)}
  .etapa-caja:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
  .etapa-caja .n{font-size:var(--t-h1);font-weight:800;line-height:1.1;color:var(--tx-titulo)}
  .etapa-caja .etapa{white-space:normal;max-width:100%;justify-content:center}
  @media (min-width:720px){
    .etapas{display:flex;flex-wrap:wrap}
    .etapa-caja{flex:1 1 8.5rem}
  }

  /* Por RTC: tabla fija a todo el ancho; RTC con ellipsis y cabeceras que parten en dos líneas
     (guion suave en «segui-miento» y «con-tacto»; overflow-wrap como último recurso para que
     ninguna cabecera pise a la vecina). A 390 px cabe sin scroll interno (07-movil §2). */
  .tabla-por-rtc{table-layout:fixed;width:100%}
  .tabla-por-rtc th{white-space:normal;vertical-align:bottom;overflow-wrap:anywhere}
  .tabla-por-rtc .c-rtc{width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabla-por-rtc .c-n{text-align:right;font-variant-numeric:tabular-nums}
  .tabla-por-rtc .rojo{color:var(--kpi-baja);font-weight:700}
  @media (max-width:719.98px){
    /* Anchos medidos a 390 px para que cada palabra de cabecera entre entera en su columna. */
    .tabla-por-rtc :is(th,td){padding:var(--esp-2) var(--esp-1) var(--esp-2) 2px}
    .tabla-por-rtc :is(th,td):first-child{padding-left:var(--esp-2)}
    .tabla-por-rtc th{text-transform:none;letter-spacing:0;font-weight:600}
    .tabla-por-rtc .c-rtc{width:27%}
    .tabla-por-rtc .c-leads{width:15%}
    .tabla-por-rtc .c-sin{width:18%}
    .tabla-por-rtc :is(.c-ganados,.c-mediana){width:20%}
  }
  /* 06-03: filas de 44 px en todos los anchos (padding = (44 − renglón) / 2; 1.55 es el line-height del
     cuerpo) y el enlace del RTC como bloque del ancho de su celda, con su propia elipsis: antes su caja
     seguía detrás de la celda vecina y el foco quedaba tapado por td.c-n. Mide 44 px de alto con padding
     y margen negativo; el anillo va hacia adentro porque la celda recorta (overflow:hidden). */
  .tabla-por-rtc td{padding-block:calc((44px - 1.55em) / 2)}
  .tabla-por-rtc .c-rtc > a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:calc((44px - 1.55em) / 2);margin-block:calc((1.55em - 44px) / 2)}
  .tabla-por-rtc .c-rtc > a:focus-visible{outline-offset:calc(-1 * var(--foco-ancho))}
}