/* ============================================================================
   SELECCIONAR NEGOCIO — /seleccionar-negocio
   ============================================================================
   Portado del mock «Seleccionar negocio (rediseño)» del proyecto de Claude
   Design 60e881d8-22f1-474c-ae01-b3eb35bc35a4, cuya copia autocontenida vive en
   wwwroot/_bench/mock-seleccionar-negocio.html. El banco de
   /_bench/comparar.html?v=1 compara ESTA hoja contra ese dibujo: si las dos
   mitades no coinciden, gana el mock.

   Antes esto eran 365 líneas de <style> dentro de SeleccionarNegocio.razor. Un
   bloque así no tiene scope y el banco no puede reproducirlo, que es la razón
   documentada en docs/design-substrate.md de que cada rediseño de una pantalla
   costara entre 3 y 8 commits.

   REGLAS
   · Nada de hex ni rgba() crudos: los --ic-* y --lc-* voltean solos con
     data-theme; un rgba(148,163,184,…) no. Lo vigila SustratoVisualTests.
     Los tintes van con color-mix(in srgb, var(--token) N%, transparent), NO con
     rgba(var(--lc-*-rgb), …): esos -rgb no se redeclaran en tema claro.
   · Mínimo táctil 48px (--ic-touch-min), no 44. Sin excepciones en esta hoja.
   · Sin `transition` en color ni background-color. El hover cambia de golpe, como
     en el mock. Una transición sobre un valor que sale de un token se queda
     colgada cuando el conmutador de tema cambia --ic-* mientras la pestaña está
     en segundo plano (su línea de tiempo de animación está congelada): medido en
     el banco, las tarjetas se quedaban con el fondo del tema oscuro sobre el
     fondo claro. No vale la pena un fundido de 150 ms a cambio de eso.
   · Todo va acotado bajo .sn-page. Esta pantalla no abre diálogos, así que no
     hay reglas fuera del contenedor.

   Lo que NO se portó tal cual del mock, y por qué:
   · Los 11px (.6875rem) de chips, etiquetas, correo y «Último». La propia tabla
     de medidas del mock dice 12px, y 12px es el piso absoluto del sistema
     (--ic-text-xs en app.css). Se portó el número de la tabla, no el del CSS.
   · El buscador. El mock lo dibuja siempre; aquí se pinta sólo con ≥6 negocios
     (con 1 la pantalla auto-selecciona y con 2-5 la lista se ve entera). La
     regla de visibilidad vive en el .razor; esta hoja sólo lo estiliza.
   · El alto: el mock dibuja una tarjeta de 390px sobre lienzo. La pantalla real
     es inmersiva (MainLayout la excluye del chrome), así que .sn-page ocupa el
     alto del padre .ic-main-public y centra su columna.
   ========================================================================== */

/* ── Iconos ─────────────────────────────────────────────────────────────── */

/* MudIcon nace a 1.5rem (.mud-icon-size-medium) y el tamaño lo lleva el propio
   <svg>, no el padre: hay que fijarlo aquí, no con un style= en el markup.
   Todos heredan color, así que el tinte lo pone la clase contenedora. */
.sn-page .mud-icon-root {
    font-size: 20px;
}

.sn-page .sn-head__logout .mud-icon-root,
.sn-page .sn-search__icon .mud-icon-root,
.sn-page .sn-error__row .mud-icon-root { font-size: 18px; }

.sn-page .sn-add .mud-icon-root,
.sn-page .sn-error__retry .mud-icon-root { font-size: 17px; }

.sn-page .sn-card__dir .mud-icon-root { font-size: 13px; }
.sn-page .sn-card__last .mud-icon-root { font-size: 12px; }
.sn-page .sn-empty__icon .mud-icon-root { font-size: 26px; }

/* ── Lienzo ─────────────────────────────────────────────────────────────── */

.sn-page {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: var(--ic-bg);
    /* Retícula de puntos del primario al 10%. color-mix y no rgba(): en tema
       claro el punto tiene que virar con el token, no quedarse en el morado
       oscuro sobre fondo blanco. */
    background-image: radial-gradient(color-mix(in srgb, var(--ic-primary) 10%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    padding:
        max(var(--ic-space-6), env(safe-area-inset-top, 0px))
        max(var(--ic-space-4), env(safe-area-inset-right, 0px))
        max(var(--ic-space-6), env(safe-area-inset-bottom, 0px))
        max(var(--ic-space-4), env(safe-area-inset-left, 0px));
    overflow-x: hidden;
}

html[data-theme="light"] .sn-page {
    background-image: radial-gradient(color-mix(in srgb, var(--ic-primary) 12%, transparent) 1px, transparent 1px);
}

.sn-wrap {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-4);
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */

.sn-head {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
}

.sn-head__logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.sn-head__text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sn-head__title {
    margin: 0;
    font-size: var(--ic-text-xl);
    font-weight: 700;
    color: var(--ic-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sn-head__sub {
    margin: 0;
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* En móvil el correo va en su propia fila (.sn-user); en escritorio esa fila se
   retira y el subtítulo carga con «nombre · correo». Sólo uno se pinta. */
.sn-head__sub--desk {
    display: none;
}

/* Botón «Cerrar sesión» en línea: sólo escritorio (en móvil vive en la fila de
   usuario, como icono). */
.sn-head__logout {
    display: none;
}

/* ── Fila de usuario ────────────────────────────────────────────────────── */

.sn-user {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    padding: var(--ic-space-2) 10px var(--ic-space-2) var(--ic-space-3);
}

.sn-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ic-text-sm);
    font-weight: 700;
    background: color-mix(in srgb, var(--lc-accent) 20%, transparent);
    color: var(--lc-accent);
}

.sn-user__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sn-user__name {
    font-size: var(--ic-text-sm);
    font-weight: 600;
    color: var(--ic-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sn-user__mail {
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sn-user__logout {
    width: var(--ic-touch-min);
    height: var(--ic-touch-min);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 10px;
    color: var(--ic-text-tertiary);
    cursor: pointer;
    font-family: inherit;
}

.sn-user__logout:hover {
    background: color-mix(in srgb, var(--ic-text-tertiary) 14%, transparent);
    color: var(--ic-text);
}

/* ── Buscador ───────────────────────────────────────────────────────────── */

.sn-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--ic-touch-min);
    padding: 0 14px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
}

.sn-search__icon {
    flex-shrink: 0;
    color: var(--ic-text-tertiary);
    display: flex;
}

.sn-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: var(--ic-text-md);
    color: var(--ic-text);
}

/* La X nativa de type=search se pinta con el color del sistema y se sale del
   tema; el campo se limpia borrando, como en el resto del panel. */
.sn-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sn-search__input::placeholder {
    color: var(--ic-text-tertiary);
    opacity: 1;
}

/* ── Grupo y lista ──────────────────────────────────────────────────────── */

.sn-group {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
}

.sn-group__label {
    font-size: var(--ic-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
    padding-left: 2px;
}

.sn-list {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
}

.sn-vacio {
    margin: 0;
    font-size: var(--ic-text-sm);
    color: var(--ic-text-tertiary);
    padding: var(--ic-space-4) 2px;
    text-align: center;
}

/* ── Tarjeta de negocio ─────────────────────────────────────────────────── */

.sn-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-space-3) var(--ic-space-3) var(--ic-space-3) 13px;
    min-height: 88px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sn-card:hover {
    border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
    background: color-mix(in srgb, var(--lc-accent) 6%, var(--ic-surface));
}

/* El negocio en el que estabas: mismo componente, realzado con el accent. */
.sn-card--actual {
    background: color-mix(in srgb, var(--lc-accent) 7%, var(--ic-surface));
    border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
}

.sn-card--actual:hover {
    background: color-mix(in srgb, var(--lc-accent) 12%, var(--ic-surface));
    border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
}

.sn-card__logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
}

.sn-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Monograma de respaldo cuando el negocio no tiene logo. El color se elige de
   forma determinista por NegocioId para que un mismo negocio se vea siempre
   igual; ver MonoClase() en SeleccionarNegocio.razor. */
.sn-card__mono {
    font-size: var(--ic-text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    background: color-mix(in srgb, var(--lc-accent) 18%, transparent);
    color: var(--lc-accent);
}

.sn-card__mono--teal    { background: color-mix(in srgb, var(--lc-teal) 18%, transparent);    color: var(--lc-teal); }
.sn-card__mono--purple  { background: color-mix(in srgb, var(--lc-purple) 18%, transparent);  color: var(--lc-purple); }
.sn-card__mono--ok      { background: color-mix(in srgb, var(--lc-ok) 18%, transparent);      color: var(--lc-ok); }
.sn-card__mono--warn    { background: color-mix(in srgb, var(--lc-warn) 18%, transparent);    color: var(--lc-warn); }
.sn-card__mono--info    { background: color-mix(in srgb, var(--lc-info) 18%, transparent);    color: var(--lc-info); }

.sn-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sn-card__titlerow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Nowrap con elipsis a propósito: la píldora «Último» comparte la fila y el
   alto de la tarjeta tiene que ser determinista. */
.sn-card__name {
    min-width: 0;
    font-size: var(--ic-text-lg);
    font-weight: 700;
    color: var(--ic-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sin dirección la tarjeta pierde una línea: el nombre largo puede envolver a
   dos y el alto total sigue cuadrando con el resto de la lista. */
.sn-card--sin-dir .sn-card__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: clip;
}

.sn-card__last {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    color: var(--lc-accent);
}

.sn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sn-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--ic-space-2);
    border-radius: 999px;
    font-size: var(--ic-text-xs);
    line-height: 1;
    white-space: nowrap;
}

.sn-chip--rol {
    font-weight: 700;
    background: color-mix(in srgb, var(--lc-accent) 18%, transparent);
    color: var(--lc-accent);
}

.sn-chip--giro {
    font-weight: 500;
    border: 1px solid var(--ic-border);
    color: var(--ic-text-tertiary);
}

.sn-card__dir {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
    line-height: 1.35;
}

.sn-card__dir svg {
    opacity: .6;
    flex-shrink: 0;
    margin-top: 2px;
}

.sn-card__dir-txt {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sn-card__chevron {
    flex-shrink: 0;
    color: var(--ic-text-tertiary);
    display: flex;
}

/* ── Botón «Registrar otro negocio» ─────────────────────────────────────── */

/* Vive DENTRO de .sn-list para poder ser una celda más de la rejilla en
   escritorio (mock 1d). En móvil recupera con margen los 16px de separación de
   sección que la lista, con su gap de 8px, no le daría. */
.sn-add {
    width: 100%;
    margin-top: var(--ic-space-2);
    min-height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    border-radius: var(--ic-radius-md);
    border: 1px dashed var(--ic-border);
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    cursor: pointer;
}

.sn-add:hover {
    border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
    color: var(--lc-accent);
}

/* ── Estado: entrando ───────────────────────────────────────────────────── */

.sn-entrando {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-space-4) 14px;
}

.sn-entrando__logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sn-entrando__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sn-entrando__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sn-entrando__title {
    font-size: var(--ic-text-md);
    font-weight: 600;
    color: var(--ic-text);
}

.sn-entrando__sub {
    font-size: var(--ic-text-xs);
    color: var(--ic-text-tertiary);
}

.sn-entrando__spinner {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--lc-accent) 30%, transparent);
    border-top-color: var(--lc-accent);
    animation: sn-spin .8s linear infinite;
}

@keyframes sn-spin {
    to { transform: rotate(360deg); }
}

/* ── Estado: cargando ───────────────────────────────────────────────────── */

.sn-skel {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-space-3) 13px;
    min-height: 88px;
    animation: sn-pulse 1.5s ease-in-out infinite;
}

.sn-skel__logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--ic-text-tertiary) 18%, transparent);
}

.sn-skel__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
}

.sn-skel__line {
    height: 12px;
    width: 62%;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ic-text-tertiary) 18%, transparent);
}

.sn-skel__line--b {
    height: 10px;
    width: 40%;
    background: color-mix(in srgb, var(--ic-text-tertiary) 13%, transparent);
}

.sn-skel:nth-child(2) .sn-skel__line   { width: 48%; }
.sn-skel:nth-child(2) .sn-skel__line--b { width: 34%; }

@keyframes sn-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .sn-skel { animation: none; }
    .sn-entrando__spinner { animation-duration: 2.4s; }
}

/* ── Estado: sin negocios ───────────────────────────────────────────────── */

.sn-empty {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-space-6) 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ic-space-2);
    text-align: center;
}

.sn-empty__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--lc-accent) 14%, transparent);
    color: var(--lc-accent);
}

.sn-empty__title {
    margin: 0;
    font-size: var(--ic-text-base);
    font-weight: 700;
    color: var(--ic-text);
}

.sn-empty__text {
    margin: 0;
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
    max-width: 280px;
}

.sn-empty__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    margin-top: var(--ic-space-2);
}

.sn-btn {
    width: 100%;
    min-height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    border-radius: var(--ic-radius-md);
    font-family: inherit;
    font-size: var(--ic-text-md);
    cursor: pointer;
}

/* El texto va en --ic-bg, no en un blanco nuevo: así vira con el tema junto al
   fondo del botón. */
.sn-btn--primario {
    border: none;
    background: var(--ic-primary);
    color: var(--ic-bg);
    font-weight: 700;
}

.sn-btn--fantasma {
    border: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-muted);
    font-weight: 600;
}

.sn-btn--fantasma:hover {
    border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
    color: var(--lc-accent);
}

/* ── Estado: error ──────────────────────────────────────────────────────── */

.sn-error {
    background: color-mix(in srgb, var(--lc-err) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lc-err) 35%, transparent);
    border-radius: var(--ic-radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sn-error__row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.sn-error__row svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--lc-err);
}

.sn-error__msg {
    font-size: var(--ic-text-sm);
    color: var(--lc-err);
    line-height: 1.4;
}

.sn-error__retry {
    align-self: flex-start;
    min-height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    gap: var(--ic-space-2);
    padding: 0 18px;
    border-radius: var(--ic-radius-md);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    cursor: pointer;
}

/* ── Escritorio ─────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
    .sn-wrap {
        max-width: 860px;
        gap: 18px;
    }

    .sn-head {
        gap: 14px;
    }

    .sn-head__logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .sn-head__title {
        font-size: var(--ic-text-2xl);
    }

    /* En escritorio el correo cabe junto al nombre en el subtítulo, así que la
       fila de usuario se retira y «Cerrar sesión» sube al encabezado con texto. */
    .sn-user,
    .sn-head__sub--movil {
        display: none;
    }

    .sn-head__sub--desk {
        display: block;
        font-size: var(--ic-text-sm);
    }

    .sn-head__logout {
        min-height: var(--ic-touch-min);
        display: inline-flex;
        align-items: center;
        gap: var(--ic-space-2);
        padding: 0 var(--ic-space-4);
        flex-shrink: 0;
        border-radius: var(--ic-radius-md);
        border: 1px solid var(--ic-border);
        background: transparent;
        color: var(--ic-muted);
        font-family: inherit;
        font-size: var(--ic-text-sm);
        font-weight: 600;
        cursor: pointer;
    }

    .sn-head__logout:hover {
        border-color: color-mix(in srgb, var(--lc-accent) 55%, transparent);
        color: var(--lc-accent);
    }

    .sn-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ic-space-3);
        align-items: stretch;
    }

    /* El aviso de «sin resultados» habla de toda la lista, no de una celda. */
    .sn-vacio {
        grid-column: 1 / -1;
    }

    .sn-card {
        gap: 14px;
        padding: 14px;
        min-height: 96px;
    }

    .sn-card__logo {
        width: 60px;
        height: 60px;
        border-radius: 15px;
    }

    /* El chevron sobra en la rejilla: la tarjeta ya se lee como destino y la
       flecha en dos columnas mete ruido en el borde interior. */
    .sn-card__chevron {
        display: none;
    }

    /* El botón de alta es una celda más de la rejilla, no una fila aparte. */
    .sn-add {
        margin-top: 0;
        min-height: 96px;
        border-radius: var(--ic-radius-lg);
        padding: 14px;
    }

    .sn-empty,
    .sn-error,
    .sn-entrando {
        max-width: 420px;
        align-self: center;
        width: 100%;
    }
}