/* Capa componentes del barrido de vistas (Phase 5). Dueños: 05-01 a 05-05, en serie.
   Solo la enlaza la cabecera del shell. Solo tokens, ningún literal de color.
   Gana sobre base sin !important porque la capa componentes va después (el shell ya no carga legado desde 05-08). */
@layer componentes{
  /* Encabezado de página: migas, h1 con chip y acciones (parciales/encabezado.ejs). */
  .encabezado{margin:0 0 var(--esp-5)}
  /* 06-03: migas en un renglón de 44 px (alto con min-height y alineación, sin margen debajo) y cada enlace
     de 44 × 44 como mínimo. Cada paso lleva el mismo padding lateral, así el «›» queda centrado entre los
     dos; el primero lo compensa con margen negativo para que su texto siga alineado con el h1. */
  .encabezado .migas{display:flex;flex-wrap:wrap;align-items:center;min-height:44px;margin:0;font-size:var(--t-chico);color:var(--tx-2);line-height:1.4}
  .encabezado .migas > :not(.migas-sep){padding-inline:var(--esp-2)}
  .encabezado .migas > :first-child{margin-left:calc(-1 * var(--esp-2))}
  .encabezado .migas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--tx-enlace);text-decoration:none}
  .encabezado .migas a:hover{text-decoration:underline}
  .encabezado .migas a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep);border-radius:var(--r-sm)}
  .migas-sep{color:var(--tx-2);margin:0 var(--esp-1)}
  .encabezado-fila{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center;justify-content:space-between}
  .encabezado-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--esp-2) var(--esp-3);min-width:0}
  .encabezado h1{font-size:var(--t-h1);font-weight:800;line-height:1.15;color:var(--tx-titulo);margin:0;overflow-wrap:anywhere;min-width:0}
  .encabezado .sub{margin:var(--esp-2) 0 0;color:var(--tx-2);font-size:var(--t-base)}
  .acciones{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
  .accion{display:inline-flex;align-items:center;gap:var(--esp-2);min-height:44px;padding:0 var(--esp-4);border:1px solid var(--borde-campo);border-radius:var(--r-md);background:var(--sup);color:var(--tx-enlace);font-weight:700;text-decoration:none}
  .accion:hover{text-decoration:underline}
  .accion:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

  /* Avisos sueltos p.ok / p.error que quedan con el shell (jefe: «Lead asignado» y «No hay RTC activos»).
     Antes los pintaba legado con literales; ahora con los pares medidos de las alertas. Van antes de
     .aviso para que el aviso nuevo (parciales/aviso.ejs) conserve su padding. */
  .ok{background:var(--ok-fondo);color:var(--ok-tx);padding:var(--esp-2) var(--esp-3);border-radius:var(--r-md)}
  .error{background:var(--error-fondo);color:var(--error-tx);padding:var(--esp-2) var(--esp-3);border-radius:var(--r-md)}

  /* Avisos ok/error (parciales/aviso.ejs): fondo, texto y filete izquierdo de la alerta. */
  .aviso{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-4);padding:var(--esp-3) var(--esp-4);border-radius:var(--r-md);border:1px solid;border-left-width:4px}
  .aviso .ico{flex:none}
  .aviso a{color:inherit;font-weight:700}
  .aviso a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
  .ok.aviso{background:var(--ok-fondo);color:var(--ok-tx);border-color:var(--ok-borde)}
  .error.aviso{background:var(--error-fondo);color:var(--error-tx);border-color:var(--error-borde)}

  /* Estado vacío (parciales/vacio.ejs). Solo div.vacio: los p.vacio de las vistas no cambian aquí. */
  .vacio{color:var(--tx-2)}
  div.vacio{display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);padding:var(--esp-5);text-align:center;color:var(--tx-2)}
  div.vacio p{margin:0}

  /* Tarjeta como panel (05-02). El margen inferior es el de legado (18 px); .angosta y .cols lo pisan
     desde la capa pantallas. .con-animales (login, crear) guarda su padding propio: su banda depende de él. */
  .tarjeta{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-lg);box-shadow:var(--sombra-1);margin-bottom:18px}
  .tarjeta:not(.con-animales){padding:var(--esp-5)}
  /* Cabecera del panel: filete de 1 px en lugar de la franja verde de 3 px. */
  .tarjeta > h2{font-size:var(--t-h2);font-weight:700;line-height:1.3;color:var(--tx-titulo);border-bottom:1px solid var(--borde);padding:0 0 var(--esp-3);margin:0 0 var(--esp-4)}
  .tarjeta > h2:not(:first-child){margin-top:var(--esp-5)}

  /* Formularios de las vistas: grilla con rótulos encima. */
  .form{display:grid;gap:var(--esp-3)}
  .form label{display:grid;gap:var(--esp-1);font-size:var(--t-base);font-weight:600;color:var(--tx)}
  main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){font:inherit;font-weight:400;min-height:44px;padding:var(--esp-2) var(--esp-3);border:1px solid var(--borde-campo);border-radius:var(--r-md);background:var(--sup);color:var(--tx)}
  main textarea{min-height:88px;resize:vertical}
  main :is(input,select,textarea):focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
  .form label > :is(input,select,textarea){width:100%;max-width:100%}

  /* Botones dentro de main (el Salir de la topbar queda fuera: lo cubre 05-08). */
  main button{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);min-height:44px;padding:var(--esp-2) var(--esp-4);font:inherit;font-weight:700;background:var(--pri);color:var(--sobre-pri);border:1px solid var(--pri);border-radius:var(--r-md);cursor:pointer;filter:none}
  main button:hover{background:var(--pri-hover);border-color:var(--pri-hover);filter:none}
  main button:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
  main .btn-sec{background:var(--sup);color:var(--acento);border-color:var(--acento)}
  main .btn-sec:hover{background:var(--acento-suave);color:var(--acento);border-color:var(--acento)}
  .form > button{justify-self:start}
  /* .form.fila (Reasignar, ruteo): en línea, el select se estira y el botón baja si no entra. */
  .form.fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
  .form.fila > select{flex:1 1 12rem;min-width:0;max-width:100%}

  /* Chip de etapa: pastilla con punto. Cada .e-<etapa> fija su trío fondo/texto/punto. */
  .etapa{display:inline-flex;align-items:center;gap:6px;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(--et-f,var(--et-noresponde-f));color:var(--et-t,var(--et-noresponde-t))}
  .etapa::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--et-p,var(--et-noresponde-p))}
  .e-nuevo{--et-f:var(--et-nuevo-f);--et-t:var(--et-nuevo-t);--et-p:var(--et-nuevo-p)}
  .e-contactado{--et-f:var(--et-contactado-f);--et-t:var(--et-contactado-t);--et-p:var(--et-contactado-p)}
  .e-en_seguimiento{--et-f:var(--et-seguimiento-f);--et-t:var(--et-seguimiento-t);--et-p:var(--et-seguimiento-p)}
  .e-cotizado{--et-f:var(--et-cotizado-f);--et-t:var(--et-cotizado-t);--et-p:var(--et-cotizado-p)}
  .e-ganado{--et-f:var(--et-ganado-f);--et-t:var(--et-ganado-t);--et-p:var(--et-ganado-p)}
  .e-perdido{--et-f:var(--et-perdido-f);--et-t:var(--et-perdido-t);--et-p:var(--et-perdido-p)}
  .e-no_responde{--et-f:var(--et-noresponde-f);--et-t:var(--et-noresponde-t);--et-p:var(--et-noresponde-p)}

  /* Texto secundario. */
  .sub{color:var(--tx-2);font-size:var(--t-chico)}

  /* Tablas (05-03). De escritorio: cabecera clara, filete suave entre filas, esquinas --r-lg.
     Los estados de fila van con :where() para que el modo tarjeta los pise sin subir especificidad. */
  .tabla-scroll{overflow-x:auto}
  .tabla{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-base);background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-lg)}
  .tabla th{background:var(--th-fondo);color:var(--th-tx);font-size:var(--t-chico);font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:var(--esp-2) var(--esp-3);border-bottom:1px solid var(--borde);border-radius:0}
  .tabla th:first-child{border-top-left-radius:calc(var(--r-lg) - 1px)}
  .tabla th:last-child{border-top-right-radius:calc(var(--r-lg) - 1px)}
  .tabla td{background:var(--sup);border:0;border-bottom:1px solid var(--borde-suave);padding:var(--esp-2) var(--esp-3);vertical-align:top}
  .tabla :where(tbody tr:last-child) td{border-bottom:0}
  .tabla :where(tbody tr:last-child) td:first-child{border-bottom-left-radius:calc(var(--r-lg) - 1px)}
  .tabla :where(tbody tr:last-child) td:last-child{border-bottom-right-radius:calc(var(--r-lg) - 1px)}
  .tabla :where(tbody tr:hover) td{background:var(--sup-hover)}
  .tabla :where(tr.pendiente) td{background:var(--sup-resalte)}
  .tabla-leads :is(.c-tel,.c-recibido,.c-respuesta){white-space:nowrap}
  /* 06-03, objetivos de 44 px en las tablas de escritorio (y en la que desliza a todo ancho): filas de
     44 px con el texto donde estaba (padding de celda = (44 − renglón) / 2; 1.55 es el line-height del
     cuerpo, base.css) y el enlace del nombre estirado a todo ese alto con padding y margen negativo del
     mismo valor, así el renglón no cambia. position:relative lo deja por encima de la .sub que pisa; el
     anillo va hacia adentro para que el overflow del contenedor que desliza no lo recorte. */
  .tabla-leads td{padding-block:calc((44px - 1.55em) / 2)}
  .tabla .c-lead > a{position:relative;display:inline-block;min-width:44px;padding-block:calc((44px - 1.55em) / 2);margin-block:calc((1.55em - 44px) / 2)}
  .tabla .c-lead > a:focus-visible{outline-offset:calc(-1 * var(--foco-ancho))}

  /* Tabla que pasa a tarjeta debajo de 720 px (contrato 05-03): div.tabla-tarjetas > table.tabla.
     Cada tr es una tarjeta; el thead queda solo para lectores de pantalla. El acomodo de las
     líneas lo pone la clase propia de cada tabla (.tabla-leads aquí; bandeja y Personal después). */
  .tabla-tarjetas{overflow-x:auto}
  @media (max-width:719.98px){
    .tabla-tarjetas{overflow-x:visible}
    .tabla-tarjetas > table.tabla{display:block;border:0;border-radius:0;background:none}
    .tabla-tarjetas > table.tabla > thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
    .tabla-tarjetas > table.tabla > tbody{display:grid;gap:var(--esp-2)}
    .tabla-tarjetas > table.tabla > tbody > tr{display:block;min-width:0;background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-lg);padding:var(--esp-3);box-shadow:var(--sombra-1)}
    .tabla-tarjetas > table.tabla > tbody > tr.pendiente{border-left:4px solid var(--aviso-borde);background:var(--sup)}
    .tabla-tarjetas > table.tabla > tbody > tr > td{display:block;padding:0;border:0;border-radius:0;background:none}
    .tabla-tarjetas > table.tabla > tbody > tr > td[data-vacio]{display:none}
    /* 06-03: el nombre en tarjeta (Mis leads, Sin atender, bandeja) mide 44 px de alto sin cambiar el
       acomodo: el enlace es un renglón de 44 px con margen negativo hasta el alto del renglón de la celda,
       arriba (vertical-align:top) para que el texto quede donde estaba, y con su propia elipsis. La celda
       estira su recorte (overflow:hidden) con padding y margen negativo iguales, y va por encima de la
       línea 2 que el enlace pisa (z-index), sin llegar a los forms de la bandeja. */
    .tabla-tarjetas > table.tabla > tbody > tr > td.c-lead{position:relative;z-index:1;padding-block:calc((44px - 1.55em) / 2);margin-block:calc((1.55em - 44px) / 2)}
    .tabla-tarjetas > table.tabla > tbody > tr > td.c-lead > a{vertical-align:top;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px;padding-block:0}

    /* Tabla de leads en tarjeta: 3 líneas (nombre + chip / teléfono · ciudad / unidad · marca ·
       recibido) y una 4.ª atenuada con RTC y respuesta, solo si tienen valor. Flex con order:
       ::before y ::after del tr cortan las líneas 1 y 2; la 4.ª la corta el max-width del RTC
       (no entra en lo que la línea 3 deja libre). */
    .tabla-tarjetas > table.tabla.tabla-leads > tbody > tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--esp-2);row-gap:0}
    .tabla-tarjetas > table.tabla.tabla-leads > tbody > tr::before,
    .tabla-tarjetas > table.tabla.tabla-leads > tbody > tr::after{content:"";flex:0 0 100%;height:0;order:2}
    .tabla-tarjetas > table.tabla.tabla-leads > tbody > tr::after{order:5}
    .tabla-tarjetas .tabla-leads :is(.c-lead,.c-ciudad,.c-unidad,.c-recibido,.c-rtc){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
    .tabla-tarjetas .tabla-leads .c-lead{order:1;flex:1 1 0;font-weight:600}
    .tabla-tarjetas .tabla-leads .c-lead .sub{display:inline;font-weight:400}
    .tabla-tarjetas .tabla-leads .c-lead .sub::before{content:"· ";margin-left:var(--esp-1)}
    .tabla-tarjetas .tabla-leads .c-etapa{order:1;flex:none}
    .tabla-tarjetas .tabla-leads .c-tel{order:3;flex:none}
    .tabla-tarjetas .tabla-leads .c-ciudad{order:3;flex:1 1 0}
    .tabla-tarjetas .tabla-leads .c-ciudad::before{content:"· "}
    .tabla-tarjetas .tabla-leads tr:has(> .c-tel[data-vacio]) .c-ciudad::before{content:none}
    .tabla-tarjetas .tabla-leads :is(.c-unidad,.c-recibido){order:6;font-size:var(--t-chico)}
    .tabla-tarjetas .tabla-leads .c-unidad{flex:0 1 auto}
    .tabla-tarjetas .tabla-leads .c-unidad .sub{display:inline;font-size:inherit;color:inherit}
    .tabla-tarjetas .tabla-leads .c-unidad .sub::before{content:"· ";margin-left:var(--esp-1)}
    .tabla-tarjetas .tabla-leads .c-recibido{flex:1 1 auto}
    .tabla-tarjetas .tabla-leads .c-recibido::before{content:"· recibido "}
    .tabla-tarjetas .tabla-leads :is(.c-rtc,.c-respuesta){order:8;font-size:var(--t-chico);color:var(--tx-2)}
    .tabla-tarjetas .tabla-leads .c-rtc{flex:1 1 100%;max-width:calc(100% - 14em)}
    .tabla-tarjetas .tabla-leads .c-respuesta{flex:none;margin-left:auto}
    .tabla-tarjetas .tabla-leads .c-respuesta::before{content:"respuesta "}
  }

  /* Filtro de las listas (05-03): fila con gap; debajo de 720 px cada control a todo el ancho. */
  .filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2);margin:0 0 var(--esp-4)}
  /* 06-03: enlace del filtro («Ver todos los leads de la unidad», jefe) de 44 px de alto. */
  .filtros > a{display:inline-flex;align-items:center;min-height:44px}
  @media (max-width:719.98px){
    .filtros > :is(input,select,button){flex:1 1 100%;width:100%;max-width:100%}
  }

  /* Tabla que desliza (contrato 05-03): div.tabla-scroll.tabla-desliza, en /leads (Buscar,
     Unidad e Histórico). Primera columna fija con filete que marca el corte; el fondo opaco lo dan
     las reglas de .tabla (--sup, --sup-hover, --sup-resalte en la pendiente y --th-fondo arriba). */
  .tabla-desliza{overflow-x:auto}
  .tabla-desliza > .tabla :is(th,td):first-child{position:sticky;left:0;z-index:1;border-right:1px solid var(--borde)}
  .desliza-aviso{display:none}
  @media (max-width:719.98px){
    /* 06-03: al llevar un campo a la vista (foco con Tab o scrollIntoView), que no quede detrás de la
       primera columna fija: el área útil empieza después de su ancho mínimo (8rem, con padding). */
    .tabla-desliza{scroll-padding-left:8rem;scroll-padding-right:var(--esp-5)}
    .tabla-desliza > .tabla td:first-child{min-width:8rem;max-width:11rem;overflow-wrap:anywhere}
    .tabla-desliza > .tabla td:not(:first-child){white-space:nowrap}
    .desliza-aviso{display:flex;align-items:center;justify-content:flex-end;gap:var(--esp-1);margin:0 0 var(--esp-2);font-size:var(--t-chico);color:var(--tx-2)}
  }

  /* Casilla con su texto (05-04, ruteo): en línea, peso normal y 44 px de alto para el dedo.
     label.check le gana a .form label (grid, 600) sin subir de capa. */
  main label.check{display:inline-flex;align-items:center;gap:var(--esp-2);min-height:44px;font-weight:400;color:var(--tx);cursor:pointer}
  main label.check > input[type="checkbox"]{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--pri)}
  /* Fila inactiva (05-04): texto --tx-2 sobre --sup-2, par medido en contraste.mjs, en lugar de la
     opacidad de legado, que bajaba el contraste de todo lo de la fila. */
  .tabla :where(tr.inactiva) td{opacity:1;background:var(--sup-2);color:var(--tx-2)}
}