/* Capa shell del rediseño (03-02): grilla .app, topbar, variante sin menú y utilidades .solo-lector y .saltar.
   Solo tokens, ningún literal de color. Escritorio desde 1024 px; móvil hasta 1023.98 px.
   Lo que se hereda de legado (body, a, button, .quien) se neutraliza aquí propiedad por propiedad. */
@layer shell{
  .solo-lector,
  .saltar:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  .saltar{position:fixed;left:var(--esp-2);top:var(--esp-2);z-index:10000;padding:var(--esp-2) var(--esp-4);background:var(--sup);color:var(--tx-enlace);font-weight:700;text-decoration:none;border-radius:var(--r-md);box-shadow:var(--sombra-2)}
  .saltar:focus{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}
  /* main#contenido recibe el foco del salto (tabindex="-1"): no es un control y el salto ya mueve la vista, sin anillo. */
  main#contenido:focus,
  main#contenido:focus-visible{outline:none}

  body.shell{background:var(--sup-app);color:var(--tx)}

  .app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;min-height:100dvh}
  .area{grid-column:-2 / -1;min-width:0;display:flex;flex-direction:column}
  .area > main{flex:1;width:100%}

  .topbar{display:flex;align-items:center;gap:var(--esp-3);min-height:var(--topbar-alto);padding:0 var(--esp-4);background:var(--sup);border-bottom:1px solid var(--borde)}
  .topbar-titulo{flex:1;min-width:0;margin:0;color:var(--tx-titulo);font-size:var(--t-h2);font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-salir{display:flex;align-items:center;gap:var(--esp-2);margin:0;flex:none}
  .topbar-salir .quien{color:var(--tx-2);font-size:var(--t-base);max-width:16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Objetivo táctil de 44 × 44 px (2.5.5, 06-02): el padding de base dejaba «Salir» en 43 px. */
  .topbar-salir .btn-sec{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .topbar :focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

  .sin-menu{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  .sin-menu > main{flex:1;width:100%}
  .sin-menu-barra{display:flex;align-items:center;justify-content:center;min-height:var(--topbar-alto);padding:var(--esp-2) var(--esp-4);background:var(--riel-fondo)}
  /* El logo mide 38 px: el enlace llega a 44 × 44 px (2.5.5, 06-02) sin agrandar la barra. */
  .sin-menu-marca{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--riel-tx);text-decoration:none;border-radius:var(--r-sm)}
  .sin-menu-marca img{display:block;height:38px;width:auto}
  .sin-menu-barra :focus-visible{outline:var(--foco-ancho) solid var(--riel-foco);outline-offset:var(--foco-sep)}

  @media (min-width: 1024px){
    .app{grid-template-columns:var(--riel-ancho) minmax(0,1fr)}
  }
  @media (max-width: 1023.98px){
    .topbar{padding:0 var(--esp-3)}
    .topbar-salir .quien{max-width:9em}
  }

  /* ── Inicio por rol y bandeja (Fase 4) · dueño 04-05 ──────────────────────────────────
     Estiliza parciales/inicio.ejs (04-01) y la bandeja vacía de jefe.ejs (04-02). Solo clases inicio-* y bandeja-*.
     Texto, íconos y foco solo con pares medidos en scripts/contraste.mjs; los bordes que decoran usan tokens
     semánticos y la información va también en texto. Lo que se hereda de legado (a{}, márgenes de p y ul) se
     neutraliza aquí. Ninguna regla crea scroll horizontal. */
  .inicio{display:grid;gap:var(--esp-4);margin:0 0 var(--esp-5);min-width:0}

  .inicio-banner{display:grid;gap:var(--esp-1);padding:var(--esp-5) var(--esp-6);background:var(--hero);color:var(--tx-invertido);border-radius:var(--r-xl);box-shadow:var(--sombra-hero);min-width:0}
  .inicio-fecha,
  .inicio-texto{margin:0;color:var(--hero-sub)}
  .inicio-fecha{font-size:var(--t-chico);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .inicio-texto{font-size:var(--t-base)}
  .inicio-saludo{margin:0;color:var(--tx-invertido);font-size:var(--t-h1);font-weight:800;line-height:1.15;overflow-wrap:anywhere}

  .inicio-tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3);margin:0;padding:0;list-style:none}
  .inicio-tarjeta{margin:0;padding:0;min-width:0}
  .inicio-tarjeta-enlace{display:flex;align-items:center;gap:var(--esp-3);height:100%;min-height:44px;box-sizing:border-box;padding:var(--esp-4);background:var(--sup);color:var(--tx);text-decoration:none;border:1px solid var(--borde);border-radius:var(--r-lg);box-shadow:var(--sombra-1);min-width:0;transition:box-shadow var(--transicion),border-color var(--transicion)}
  .inicio-tarjeta-texto{display:grid;flex:1;min-width:0;color:var(--tx);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
  .inicio-tarjeta-numero{flex:none;margin-left:auto;color:var(--kpi-num);font-size:var(--t-kpi);font-weight:800;line-height:1}
  .inicio-tarjeta-icono{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-lg);background:var(--acento-suave);color:var(--acento)}
  /* El detalle se parte en renglones en vez de cortarse con «…» (revisión a ojo de 04-06). */
  .inicio-tarjeta-detalle{display:block;color:var(--tx-2);font-size:var(--t-chico);font-weight:400;overflow-wrap:break-word}
  .inicio-tarjeta-enlace:hover{box-shadow:var(--sombra-2)}
  .inicio-tarjeta-enlace[aria-current="page"]{border-color:var(--pri)}
  /* Alerta: borde izquierdo y cuadro del ícono en rojo; el texto de la tarjeta ya dice qué pasa. */
  .inicio-tarjeta-alerta .inicio-tarjeta-enlace{border-left:4px solid var(--kpi-baja)}
  .inicio-tarjeta-alerta .inicio-tarjeta-icono{background:var(--error-fondo);color:var(--error-tx)}
  .inicio-tarjeta-alerta .inicio-tarjeta-numero{color:var(--kpi-baja)}

  /* Selector de unidades del jefe: pastillas como las pestañas; la activa por aria-current. */
  .inicio-selector{min-width:0}
  .inicio-selector-lista{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin:0;padding:0;list-style:none}
  .inicio-selector-lista > li{margin:0;padding:0}
  .inicio-selector-item{display:inline-flex;align-items:center;gap:var(--esp-2);min-height:44px;box-sizing:border-box;padding:var(--esp-2) var(--esp-4);background:var(--sup);color:var(--pestana-tx);font-weight:600;text-decoration:none;border:1px solid var(--borde);border-radius:var(--r-pill);transition:color var(--transicion),border-color var(--transicion)}
  .inicio-selector-item:hover{color:var(--pestana-activa-tx)}
  .inicio-selector-item[aria-current="page"]{color:var(--pestana-activa-tx);border-color:var(--pestana-activa-borde);font-weight:700}

  /* Tarjetas de unidad de /admin (04-04), como las KPI del jefe: borde izquierdo y cuadro del ícono con el tono
     de cada unidad, siempre con pares medidos. 2 columnas en celular (2×2) y 3 desde 720 px. */
  .inicio-unidades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3);margin:0;padding:0;list-style:none}
  .inicio-unidad{display:grid;gap:var(--esp-3);align-content:start;margin:0;padding:var(--esp-4);background:var(--sup);border:1px solid var(--borde);border-left:5px solid var(--acento);border-radius:var(--r-lg);box-shadow:var(--sombra-1);min-width:0}
  .inicio-unidad-titulo{display:flex;align-items:center;gap:var(--esp-3);min-height:44px;color:var(--tx-titulo);font-size:var(--t-h2);font-weight:700;text-decoration:none;border-radius:var(--r-md);min-width:0}
  .inicio-unidad-titulo .ico{box-sizing:content-box;padding:var(--esp-2);border-radius:var(--r-lg);background:var(--acento-suave);color:var(--acento)}
  .inicio-unidad-nutricion{border-left-color:var(--ok-borde)}
  .inicio-unidad-pecuario{border-left-color:var(--info-tx)}
  .inicio-unidad-mascotas{border-left-color:var(--et-seguimiento-t)}
  .inicio-unidad-nutricion .inicio-unidad-titulo .ico{background:var(--ok-fondo);color:var(--ok-tx)}
  .inicio-unidad-pecuario .inicio-unidad-titulo .ico{background:var(--info-fondo);color:var(--info-tx)}
  .inicio-unidad-mascotas .inicio-unidad-titulo .ico{background:var(--et-seguimiento-f);color:var(--et-seguimiento-t)}
  .inicio-unidad-nombre{flex:1;min-width:0;overflow-wrap:break-word}
  .inicio-unidad-titulo:hover .inicio-unidad-nombre{text-decoration:underline}
  .inicio-unidad-total{flex:none;color:var(--kpi-num);font-size:var(--t-kpi);font-weight:800;line-height:1}
  .inicio-unidad-accesos{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin:0;padding:0;list-style:none}
  .inicio-unidad-accesos > li{margin:0;padding:0;min-width:0}
  .inicio-unidad-accesos a{display:inline-flex;align-items:center;gap:var(--esp-1);min-height:44px;box-sizing:border-box;padding:var(--esp-2) var(--esp-3);background:var(--sup);color:var(--tx);font-size:var(--t-base);text-decoration:none;border:1px solid var(--borde);border-radius:var(--r-pill);transition:border-color var(--transicion)}
  .inicio-unidad-accesos a:hover{border-color:var(--pri)}
  .inicio-unidad-n{color:var(--kpi-num);font-weight:800}

  /* Bandeja «Por asignar» vacía (jefe.ejs, solo con el shell): se lee de un vistazo. */
  .bandeja-vacia{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--esp-4);row-gap:var(--esp-1);align-items:start;padding:var(--esp-4) var(--esp-5);background:var(--sup);border:1px solid var(--borde);border-left:4px solid var(--ok-borde);border-radius:var(--r-lg)}
  .bandeja-vacia-icono{grid-row:1 / span 3;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-pill);background:var(--ok-fondo);color:var(--ok-tx)}
  .bandeja-vacia-titulo,
  .bandeja-vacia-texto,
  .bandeja-vacia-acciones{grid-column:2;margin:0;min-width:0}
  .bandeja-vacia-titulo{color:var(--tx);font-size:var(--t-h2);font-weight:700;overflow-wrap:anywhere}
  .bandeja-vacia-texto{color:var(--tx-2);font-size:var(--t-base)}
  .bandeja-vacia-acciones a{display:inline-flex;align-items:center;min-height:44px;color:var(--tx-titulo);font-weight:600;text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-sm)}
  /* Aviso «Lead asignado» dentro de la sección: aquí solo el margen; el color lo da .ok de componentes-vistas.css. */
  #por-asignar > [data-prueba="asignado"]{margin:0 0 var(--esp-3)}

  .inicio-selector-item:focus-visible,
  .inicio-tarjeta-enlace:focus-visible,
  .inicio-unidad-titulo:focus-visible,
  .inicio-unidad-accesos a:focus-visible,
  .bandeja-vacia-acciones a:focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

  /* Celular: el banner se achica y las tarjetas siguen en 2×2 (07-movil-hallazgos); ícono y número arriba, texto abajo. */
  @media (max-width: 719.98px){
    .inicio-banner{padding:var(--esp-4)}
    .inicio-tarjetas{gap:var(--esp-2)}
    .inicio-tarjeta-enlace{flex-wrap:wrap;gap:var(--esp-2);padding:var(--esp-3)}
    .inicio-tarjeta-texto{order:3;flex-basis:100%}
    .inicio-tarjeta-icono{width:36px;height:36px}
    .inicio-tarjeta-numero{font-size:var(--t-h1)}
    .bandeja-vacia{column-gap:var(--esp-3);padding:var(--esp-4)}
    .inicio-unidades{gap:var(--esp-2)}
    .inicio-unidad{padding:var(--esp-3);gap:var(--esp-2)}
    .inicio-unidad-titulo{flex-wrap:wrap;gap:var(--esp-2)}
    .inicio-unidad-nombre{order:3;flex-basis:100%}
    .inicio-unidad-total{margin-left:auto}
    .inicio-unidad-total{font-size:var(--t-h1)}
    .inicio-unidad-accesos{flex-direction:column;gap:var(--esp-1)}
    .inicio-unidad-accesos a{display:flex;width:100%}
  }
  @media (min-width: 720px){
    .inicio-unidades{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (min-width: 1100px){
    .inicio-tarjetas{grid-template-columns:repeat(4,minmax(0,1fr))}
    /* En 4 columnas, como en celular: ícono y número arriba y el texto abajo a todo el ancho (04-06). */
    .inicio-tarjeta-enlace{flex-wrap:wrap}
    .inicio-tarjeta-texto{order:3;flex-basis:100%}
  }
  @media (prefers-reduced-motion: reduce){
    .inicio-tarjeta-enlace,
    .inicio-selector-item,
    .inicio-unidad-accesos a{transition:none}
  }
}