/* /Components/InicioComponent.razor.rz.scp.css */
/* InicioComponent — CSS isolation de la view de Inicio.
   Sólo tokens --isbo-* de isbo-brand.css (+ isbo-brand-dark.css en los temas oscuros):
   así los 3 acentos ISBO y el modo oscuro salen sin una sola regla extra.
   Sin sombras, sin gradientes, sin !important, sin overrides de clases .dxbl-*.
   Radios 6px (controles) / 8px (tarjetas), bordes --isbo-border. Ver docs/claude/INICIO-BLAZOR.md. */

.inicio[b-jn3ycx1rbc] {
    max-width: 1280px;
    padding: 28px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    color: var(--isbo-text);
}

/* ---------------------------------------------------------------- cabecera */

/* Desde que el buscador "Ir a…" se mudó al header de la ventana (IrAComponent), la cabecera
   del Inicio tiene un solo bloque: el saludo ocupa el ancho completo. */
.hdr[b-jn3ycx1rbc] {
    display: block;
}

.hdr__saludo[b-jn3ycx1rbc] {
    min-width: 0;
}

.hdr h1[b-jn3ycx1rbc] {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* Fecha · empresa en UN SOLO renglón. Si no entrara (razón social larguísima), se recorta en
   vez de partirse en dos líneas. */
.hoy[b-jn3ycx1rbc] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--isbo-text-secondary);
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Sólo la razón social cede: la fecha se muestra entera. */
.hoy > span:nth-child(3)[b-jn3ycx1rbc] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hoy__sep[b-jn3ycx1rbc] {
    color: var(--isbo-border);
}

/* ---------------------------------------------------------------- títulos de sección */

.sec-t[b-jn3ycx1rbc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--isbo-text-secondary);
    text-transform: uppercase;
}

.sec-t__nota[b-jn3ycx1rbc] {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
}

/* ---------------------------------------------------------------- tus accesos */

/* 8 columnas fijas, no auto-fill: con minmax(140px) un ancho útil de ~1210px da 7 columnas y el
   8.º tile cae solo a una segunda fila. minmax(0, 1fr) deja que los captions largos
   ("Consulta de Artículo") partan en dos líneas en vez de forzar el ancho de la columna. */
.tiles[b-jn3ycx1rbc] {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
}

/* El tile es un CONTENEDOR, no el botón: adentro van el botón principal y el pin como HERMANOS
   (un <button> dentro de otro es HTML inválido). El borde y el fondo viven acá. */
.tile[b-jn3ycx1rbc] {
    position: relative;
    background: var(--isbo-surface);
    border: 1px solid var(--isbo-border);
    border-radius: 8px;
    min-width: 0;
}

.tile:hover[b-jn3ycx1rbc],
.tile:focus-within[b-jn3ycx1rbc] {
    border-color: var(--isbo-accent);
}

/* Altura mínima pareja para toda la fila: icono (32) + gap (10) + 2 líneas de caption (2×20) +
   grupo (16) + padding (2×14). Sin esto, un caption de una línea deja el tile más bajo que el
   de al lado y la grilla queda dentada. */
.tile__btn[b-jn3ycx1rbc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 120px;
    padding: 14px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--isbo-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tile__ico[b-jn3ycx1rbc] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--isbo-accent-soft);
    display: grid;
    place-items: center;
}

.tile__tx[b-jn3ycx1rbc] {
    min-width: 0;
}

/* Caption a DOS líneas como máximo: el nombre completo queda en el title del botón. */
.tile__tx b[b-jn3ycx1rbc] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.tile__tx small[b-jn3ycx1rbc] {
    display: block;
    color: var(--isbo-text-secondary);
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pin: 32×32 de área clickeable (§9), oculto hasta que el tile se usa. Si está anclado se ve
   SIEMPRE y en el acento, porque es el único indicador del estado. */
.tile__pin[b-jn3ycx1rbc] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--isbo-text-secondary);
    cursor: pointer;
    visibility: hidden;
}

.tile:hover .tile__pin[b-jn3ycx1rbc],
.tile:focus-within .tile__pin[b-jn3ycx1rbc],
.tile--anclado .tile__pin[b-jn3ycx1rbc] {
    visibility: visible;
}

.tile--anclado .tile__pin[b-jn3ycx1rbc] {
    color: var(--isbo-accent);
}

.tile__pin:hover[b-jn3ycx1rbc] {
    color: var(--isbo-accent);
}

/* En pantallas táctiles no hay hover: el pin se ve siempre o no habría forma de anclar. */
@media (hover: none) {
    .tile__pin[b-jn3ycx1rbc] {
        visibility: visible;
    }
}

/* ---------------------------------------------------------------- dos columnas */

.cols[b-jn3ycx1rbc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    align-items: start;
}

.cols__izq[b-jn3ycx1rbc] {
    min-width: 0;
}

/* min-width: 0 — la columna derecha es un track de grid Y un contenedor flex; sin esto su ancho
   mínimo es min-content y el texto de Novedades colapsa a una palabra por línea. */
.cols__der[b-jn3ycx1rbc] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* ---------------------------------------------------------------- continuar donde dejaste */

.lista[b-jn3ycx1rbc] {
    background: var(--isbo-surface);
    border: 1px solid var(--isbo-border);
    border-radius: 8px;
    overflow: hidden;
}

.fila[b-jn3ycx1rbc] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--isbo-border);
    background: transparent;
    color: var(--isbo-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fila:last-child[b-jn3ycx1rbc] {
    border-bottom: 0;
}

.fila:hover[b-jn3ycx1rbc] {
    background: var(--isbo-surface-alt);
}

.fila__ico[b-jn3ycx1rbc] {
    flex: none;
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.fila__tx[b-jn3ycx1rbc] {
    flex: 1;
    min-width: 0;
}

.fila__l1[b-jn3ycx1rbc] {
    display: flex;
    gap: 6px;
    align-items: baseline;
    min-width: 0;
}

.fila__l1 b[b-jn3ycx1rbc] {
    font-weight: 600;
    flex: none;
}

.fila__nombre[b-jn3ycx1rbc] {
    color: var(--isbo-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fila__l2[b-jn3ycx1rbc] {
    display: block;
    color: var(--isbo-text-secondary);
    font-size: 12px;
}

/* Badge de estado: mismo pill que en las grillas (.isbo-badge de isbo-brand.css, global). Este
   wrapper sólo lo saca del flujo elástico de la fila y lo alinea con el importe. */
.fila__badge[b-jn3ycx1rbc] {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.fila__imp[b-jn3ycx1rbc] {
    flex: none;
    font-family: var(--isbo-font-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.fila__go[b-jn3ycx1rbc] {
    flex: none;
    color: var(--isbo-text-secondary);
}

/* ---------------------------------------------------------------- widgets de plugins

   Contenedor de un IWidgetInicio. El host NO le pone fondo, borde ni padding: el look completo
   lo trae el componente del plugin (la tarjeta IA, por ejemplo, pinta su propio acento). Acá sólo
   se garantiza que el widget no rompa el layout de la columna: min-width:0 para que el texto pueda
   partirse (misma razón que .cols__der, ver INICIO-BLAZOR.md) y margen cero. */

.widget[b-jn3ycx1rbc] {
    min-width: 0;
    margin: 0;
}

.cols__izq > .widget[b-jn3ycx1rbc] {
    margin-top: 24px;
}

/* ---------------------------------------------------------------- novedades */

.nov[b-jn3ycx1rbc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* El texto se renderizaba UNA PALABRA POR LÍNEA: `.nov` es un flex column y su ancho se resolvía
   a min-content, con lo que el track `1fr` de cada ítem colapsaba al ancho de la palabra más
   larga. Hacen falta las tres cosas: `align-items: stretch` en el contenedor flex (que los ítems
   ocupen el ancho, no su contenido), `min-width: 0` en el ítem y en la columna de texto (un
   ítem de grid/flex tiene min-width auto = min-content por defecto, que impide encogerse), y el
   texto en `display: block` con `width: 100%`. */
.nov[b-jn3ycx1rbc] {
    align-items: stretch;
}

.nov__item[b-jn3ycx1rbc] {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    width: 100%;
}

.nov__item[b-jn3ycx1rbc]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--isbo-accent);
    margin-top: 7px;
}

.nov__tx[b-jn3ycx1rbc] {
    min-width: 0;
    width: 100%;
}

.nov__item b[b-jn3ycx1rbc] {
    display: block;
    font-weight: 600;
    min-width: 0;
}

.nov__item small[b-jn3ycx1rbc] {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--isbo-text-secondary);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- ayuda y pie */

.ayuda[b-jn3ycx1rbc] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ayuda a[b-jn3ycx1rbc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--isbo-surface);
    border: 1px solid var(--isbo-border);
    border-radius: 6px;
    color: var(--isbo-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.ayuda a:hover[b-jn3ycx1rbc] {
    border-color: var(--isbo-accent);
    color: var(--isbo-accent);
}

/* ---------------------------------------------------------------- foco visible (§9) */

.tile__btn:focus-visible[b-jn3ycx1rbc],
.tile__pin:focus-visible[b-jn3ycx1rbc],
.fila:focus-visible[b-jn3ycx1rbc],
.ayuda a:focus-visible[b-jn3ycx1rbc] {
    outline: 2px solid var(--isbo-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .tiles[b-jn3ycx1rbc] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cols[b-jn3ycx1rbc] {
        grid-template-columns: 1fr;
    }

    .inicio[b-jn3ycx1rbc] {
        padding: 20px 20px 20px;
    }
}
/* /Components/IrAComponent.razor.rz.scp.css */
/* IrAComponent — buscador "Ir a…" de la barra superior de la ventana principal.
   CSS isolation. Sólo tokens --isbo-* de isbo-brand.css (+ isbo-brand-dark.css en los temas
   oscuros); donde el header necesita seguir al tema del propio XAF se usan --dxds-* como
   FALLBACK, nunca como override de clases .dxbl-*.
   Sin sombras, sin gradientes, sin !important. Radio 6px, bordes --isbo-border.
   Ver docs/claude/INICIO-BLAZOR.md. */

.ira[b-mm59260qfs] {
    position: relative;
    display: flex;
    align-items: center;
    /* Una sola línea dentro del header: nunca crece en alto ni empuja la barra. */
    align-self: center;
    margin-left: 16px;
    flex: 0 1 400px;
    min-width: 0;
}

/* ---------------------------------------------------------------- caja (ancho normal) */

.ira__caja[b-mm59260qfs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* Área clickeable ≥ 32px (§ áreas clickeables del sistema de diseño). */
    height: 34px;
    padding: 0 10px;
    background: var(--isbo-surface, var(--dxds-color-surface-neutral-default-rest, #fff));
    border: 1px solid var(--isbo-border, var(--dxds-color-border-neutral-default-rest, #ccc));
    border-radius: 6px;
    color: var(--isbo-text, currentColor);
}

.ira__caja:focus-within[b-mm59260qfs] {
    border-color: var(--isbo-accent);
}

.ira__lupa[b-mm59260qfs] {
    flex: none;
    display: inline-flex;
    color: var(--isbo-text-secondary);
}

.ira__input[b-mm59260qfs] {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--isbo-text);
    font: inherit;
    font-size: 13px;
    outline: none;
}

.ira__input[b-mm59260qfs]::placeholder {
    color: var(--isbo-text-secondary);
    opacity: 1;
}

/* El clear nativo de type=search no sigue los tokens: se oculta (Esc y el borrado
   normal cubren el caso) para que la caja quede a una sola altura. */
.ira__input[b-mm59260qfs]::-webkit-search-cancel-button {
    appearance: none;
}

.ira__kbd[b-mm59260qfs] {
    flex: none;
    font: 11px inherit;
    color: var(--isbo-text-secondary);
    padding: 2px 6px;
    border: 1px solid var(--isbo-border);
    border-radius: 4px;
    background: var(--isbo-surface-alt);
}

/* ---------------------------------------------------------------- botón colapsado */

/* Por defecto (pantalla ancha) el toggle no se ve: manda la caja. */
.ira__toggle[b-mm59260qfs] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ira__toggle:hover[b-mm59260qfs] {
    background: var(--isbo-accent-soft);
}

/* ---------------------------------------------------------------- desplegable */

/* Se superpone al contenido: el header nunca crece al tipear. El z-index queda por
   encima del header de XAF (1030). */
.ira__lista[b-mm59260qfs] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1040;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--isbo-surface);
    border: 1px solid var(--isbo-border);
    border-radius: 6px;
    max-height: 360px;
    overflow-y: auto;
    color: var(--isbo-text);
}

.ira__item[b-mm59260qfs] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--isbo-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ira__item:hover[b-mm59260qfs],
.ira__item--sel[b-mm59260qfs] {
    background: var(--isbo-accent-soft);
}

.ira__ico[b-mm59260qfs] {
    flex: none;
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.ira__cap[b-mm59260qfs] {
    font-weight: 500;
}

.ira__grupo[b-mm59260qfs] {
    color: var(--isbo-text-secondary);
    font-size: 12px;
}

/* ---------------------------------------------------------------- foco visible */

.ira__item:focus-visible[b-mm59260qfs],
.ira__toggle:focus-visible[b-mm59260qfs] {
    outline: 2px solid var(--isbo-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- responsive */

/* Debajo de 900px el buscador colapsa a la lupa. Al desplegarse (click o Ctrl+K) la
   caja se ancla al borde derecho del header, por encima del contenido. */
@media (max-width: 900px) {
    .ira[b-mm59260qfs] {
        flex: none;
        margin-left: 8px;
    }

    .ira__toggle[b-mm59260qfs] {
        display: inline-flex;
    }

    .ira__caja[b-mm59260qfs] {
        display: none;
    }

    .ira--abierto .ira__caja[b-mm59260qfs] {
        display: flex;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        width: min(360px, calc(100vw - 32px));
        z-index: 1040;
    }
}
/* /Components/SignaturePadComponent.razor.rz.scp.css */
/* SignaturePadComponent — CSS isolation.
   Solo layout + tokens de isbo-brand.css; el botón es DxButton estándar
   pintado por el tema Fluent. El fondo del canvas queda blanco fijo:
   es el color del bitmap exportado de la firma, no theming. */

.signature-pad[b-6kmwqn1zcn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.signature-pad canvas[b-6kmwqn1zcn] {
    border: 1px solid var(--isbo-border);
    border-radius: 4px;
    cursor: crosshair;
    touch-action: none;
    background-color: #fff;
}

.signature-pad[b-6kmwqn1zcn]  .signature-pad-clear {
    align-self: flex-start;
}