@font-face {
    font-family: 'Archivo';
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/archivo.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/sourcesans3.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plexmono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plexmono-600.woff2') format('woff2');
}

:root {
    --luque-espresso: #2A2420;
    --luque-cognac: #C8875A;
    --luque-cognac-hover: #A9713F;
    /* Espresso un punto más oscuro, para el hover de los botones secundarios. */
    --espresso-hover: #1F1B17;

    --luque-crema: #F7F3EC;
    --luque-beige: #E8E1D6;
    --luque-beige-strong: #D8CFC0;
    --luque-gray: #8A8378;

    --color-primario: var(--luque-cognac);
    --color-secundario: var(--luque-espresso);
    --color-terciario: var(--luque-beige);

    /*
        El cognac de marca en su versión accesible. Mismo tono (25°) y misma saturación (50%),
        bajado de 57% a 37% de luminosidad.

        Sirve para los dos lados de la misma exigencia, porque el contraste es simétrico: como
        texto sobre un fondo claro y como relleno debajo de texto blanco. El cognac normal da
        2.97:1 en ambos casos y AA pide 4.5:1. Este da 5.96 sobre blanco, 5.39 sobre --paper,
        4.79 sobre --info-soft y 4.59 sobre --line. Es el valor más claro que lo consigue, para
        alejarse lo menos posible del color de marca.

        --color-primario sigue existiendo para lo decorativo: barras, bordes y rellenos que no
        llevan texto encima, donde el cognac original se mantiene intacto.
    */
    --color-primario-fuerte: #8E562F;
    --color-primario-fuerte-hover: #734626;
    color-scheme: light;

    --ink: var(--luque-espresso);
    --ink-soft: var(--luque-gray);
    --ink-faint: #ABA296;
    --paper: var(--luque-crema);
    --surface: #ffffff;
    --line: var(--luque-beige);
    --line-strong: var(--luque-beige-strong);

    --success: #1e7f4f;
    --success-soft: #ddeee3;
    --warning: #9c6b0b;
    --warning-soft: #f5e7cb;
    --danger: #b23b3b;
    --danger-soft: #f5dede;
    --info-soft: #F3E4D6;

    /*
        Radios en px a propósito: la curva de una esquina no debe crecer si el usuario agranda
        la tipografía del navegador. Unifican los doce valores sueltos que había repartidos
        entre rem y px (ver DESIGN-BRAND.md, sección 3).
    */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 100px;

    /*
        Color de sombra. Un tercio de los colores literales del proyecto eran sombras rgba(0,0,0,·)
        escritas a mano, cada una con su propia opacidad: había 0.04, 0.08, 0.1, 0.15, 0.18, 0.2,
        0.22, 0.25, 0.4, 0.45 y 0.5. Eso no es una escala, son once decisiones sueltas.

        Se tokeniza el color y no la sombra entera porque cada componente necesita su propio
        desplazamiento y difuminado; lo que tiene que ser común es el tono y la intensidad.

        El tinte no es negro puro sino el espresso de la marca: sobre un fondo crema una sombra
        gris se ve fría y sucia, mientras que la misma sombra en el tono del texto se integra.
    */
    --shadow-sm-color: rgba(42, 36, 32, 0.07);
    --shadow-md-color: rgba(42, 36, 32, 0.14);
    --shadow-lg-color: rgba(42, 36, 32, 0.22);

    /* Velo de fondo de los desplegables y modales, sobre el que se apoya la elevación. */
    --overlay: rgba(42, 36, 32, 0.45);

    /*
        Sub-paleta de la barra lateral. Es la única superficie oscura de la aplicación, así que sus
        separadores y estados de hover no pueden salir de --line ni de --paper: ahí hace falta
        aclarar el fondo, no oscurecerlo.

        El velo es crema y no blanco puro por la misma razón que las sombras son espresso: sobre el
        espresso del panel, un blanco puro al 15% deja un gris azulado que no pertenece a la marca.
    */
    --sidebar-line: rgba(247, 243, 236, 0.15);
    --sidebar-line-soft: rgba(247, 243, 236, 0.1);
    --sidebar-hover: rgba(247, 243, 236, 0.12);
    --sidebar-activo: rgba(247, 243, 236, 0.5);

    /*
        Escala de espaciado en rejilla de 4px. Es un superávit de la de Bootstrap 5.1: --space-1,
        -2, -4, -5 y -7 valen lo mismo que p-1, p-2, p-3, p-4 y p-5, así que las utilidades y
        estos tokens se pueden mezclar sin descuadres. --space-3 y --space-6 llenan los dos
        huecos que Bootstrap no cubre (12px y 32px) y que el CSS propio ya rellenaba a mano.
    */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
}

html, body {
    font-family: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--paper);
    color: var(--ink);
}

/*
    Escala de encabezados.

    Solo h1 estaba definido, a 1.7rem. Los demás se quedaban con los tamaños de Bootstrap, donde
    h2 mide 2rem y h3 1.75rem: los dos MÁS GRANDES que el h1 de la página. La jerarquía visual
    estaba invertida en cualquier pantalla que usara h2 o h3, y por eso el proyecto terminó usando
    h5 y h6 como encabezado de sección —126 veces— eligiendo el nivel por su tamaño y no por lo
    que significa. El salto de h1 a h5 deja huecos que un lector de pantalla anuncia.

    Con la escala completa el nivel se puede elegir por jerarquía y el tamaño sale solo.
*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

h1 {
    font-weight: 800;
    font-size: 1.7rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.15rem;
}

/* h5 baja de los 1.25rem de Bootstrap a 1.05rem. Es la única forma de que la escala quede
   monótona: con h5 en 1.25 seguiría siendo más grande que h3. Sigue leyéndose como encabezado,
   que es lo que hace falta donde hoy se usa como título de panel. */
h5 {
    font-size: 1.05rem;
}

h6 {
    font-size: 0.95rem;
}

.card-title {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
}

/*
    Total de un documento: la última línea del bloque de importes de una factura, compra,
    cotización u orden de servicio.

    Estaba escrito como <h5> en las nueve pantallas que lo muestran, solo para que se viera más
    grande que el subtotal y el IVA de arriba. Eso mete un encabezado falso en el esquema del
    documento: quien recorre la página con un lector de pantalla escucha "Total: $139.97" como si
    fuera un título de sección. El peso lo pone esta clase; el nivel de encabezado se reserva para
    lo que de verdad titula algo.
*/
.doc-total {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-2);
}

small, .text-muted, .form-text {
    font-size: 0.8125rem;
}

/* El cognac de marca da 2.97:1 sobre blanco; AA pide 4.5:1 y esto afecta a todos los enlaces
   de la aplicación. Solo cambia el texto: ningún relleno se toca. */
a, .btn-link {
    color: var(--color-primario-fuerte);
}

.btn-primary {
    color: var(--surface);
    background-color: var(--color-primario-fuerte);
    border-color: var(--color-primario-fuerte);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--color-primario-fuerte-hover);
    border-color: var(--color-primario-fuerte-hover);
}

.btn-secondary {
    color: var(--surface);
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--espresso-hover);
    border-color: var(--espresso-hover);
}

.btn-outline-primary {
    color: var(--color-primario-fuerte);
    border-color: var(--color-primario-fuerte);
}

.btn-outline-primary:hover {
    color: var(--surface);
    background-color: var(--color-primario-fuerte);
    border-color: var(--color-primario-fuerte);
}

.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-outline-secondary:hover {
    color: var(--surface);
    background-color: var(--color-primario-fuerte);
    border-color: var(--color-primario-fuerte);
}

/* El badge lleva texto blanco de Bootstrap encima, así que necesita el relleno accesible. */
.badge.bg-primary {
    background-color: var(--color-primario-fuerte) !important;
}

.card.border-primary {
    border-color: var(--color-primario) !important;
}

.text-primary {
    color: var(--color-primario) !important;
}

/*
    Indicador de foco. El anillo era --color-terciario, el beige del sistema: 1.30:1 sobre blanco y
    1.17:1 sobre el crema de fondo, cuando WCAG 1.4.11 pide 3:1 para un indicador de foco. Como
    Bootstrap además pone outline:0 al enfocar, ese box-shadow era el ÚNICO indicio, y prácticamente
    no se veía. Pasa a --color-primario-fuerte: 5.96:1 sobre blanco, 5.39 sobre el crema.

    Los dos anillos se cubren entre sí según el fondo: el halo blanco interno es lo que marca el foco
    sobre la barra lateral oscura, y el cognac lo que lo marca sobre el papel claro.

    El outline transparente no se ve en un navegador normal, pero en el modo de alto contraste de
    Windows las sombras se descartan y los outline reciben color del sistema: sin esta línea, ahí no
    quedaría ningún indicador.
*/
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primario-fuerte);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/*
    Y solo para quien navega con teclado. Con el anillo antes invisible daba igual, pero ahora se ve:
    dejarlo en cada clic del mouse llenaría la pantalla de anillos que nadie pidió. Va como resta y no
    como :focus-visible directo para que un navegador que no lo entienda se quede con el anillo
    siempre, que es el lado seguro del error.
*/
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn-link.nav-link:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--surface);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--ink-soft);
}

/* Tarjetas: estilo claro y uniforme en todo el sistema */
.card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px var(--shadow-sm-color);
}

.card-title {
    font-weight: 700;
    color: var(--ink);
}

/*
    Modal de pantalla completa. Lo usan los formularios que necesitan registrar algo sin perder lo
    que ya se lleva escrito —un cliente o un proveedor que no existe todavía—.

    Vive acá y no en el CSS de cada pantalla porque el aislamiento marca esas reglas con el b- del
    componente que las declara: estaba definido solo en NuevaFactura y las otras dos pantallas que
    usan estas clases renderizaban el modal sin overlay, sin centrado y sin z-index, como un bloque
    suelto en el flujo. De paso el radio y los espacios pasan a tokens.
*/
.modal-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-4);
}

.modal-overlay-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0.5rem 2rem var(--shadow-lg-color);
}

/*
    Modal de búsqueda: el catálogo que abren los buscadores de producto, cliente, proveedor y cuenta
    contable, y el de subcategoría de la ficha de producto.

    Misma historia que el de arriba, en mayor escala: estas dos reglas estaban copiadas en SIETE
    archivos de CSS aislado. En dos de ellos —RecepcionMercaderia y Productos— ya no las usaba nadie,
    y las otras cinco eran la misma regla con el radio suelto de 0.6rem repetido cinco veces.

    El max-width de 480px es el de la ficha de producto, la única que no lo fija en su marcado; los
    buscadores lo pisan con un style en línea (600 y 800px) porque un catálogo con tabla necesita más
    ancho que un formulario corto.
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-4);
}

.modal-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1.5rem var(--shadow-lg-color);
}

/*
    Piezas compartidas de los formularios de captura. Nacieron en la pantalla de nueva compra y
    viven acá porque las necesitan todos: con aislamiento, una copia por pantalla no se comparte, se
    duplica, y once copias de la misma regla se desincronizan a la primera corrección.
*/

/*
    Subtítulo de grupo dentro de una tarjeta. Un formulario de quince o veinte campos en una rejilla
    plana no tiene jerarquía: el número de autorización pesa igual que el almacén. Es un encabezado
    por nivel, no por tamaño —cuelga del de la tarjeta— y el tamaño lo pone esta regla.
*/
.form-grupo {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
}

/*
    Ficha de datos de lo que se acaba de elegir: el proveedor de una compra, el cliente de una orden.
    No es un .alert-success —no hay ningún éxito que anunciar, son datos de referencia— y el verde
    competía con los avisos que sí usan color para decir algo. El filo de acento la señala sin gritar.

    En fila y no apilada: son datos cortos y en bloque cada uno costaba un renglón entero.
*/
.ficha-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    border: 1px solid var(--line);
    border-left: 3px solid var(--color-primario);
    border-radius: var(--radius-sm);
    background: var(--paper);
    padding: var(--space-3);
    margin: 0;
}

.ficha-datos > div {
    margin: 0;
    min-width: 0;
}

.ficha-datos dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.ficha-datos dd {
    margin: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/*
    Un campo crítico sin cargar. Se marca por texto y por tono, no solo por tono: el aviso tiene que
    seguir leyéndose en blanco y negro o para quien no distingue el gris del resto.
*/
.ficha-datos-falta {
    color: var(--warning);
    font-style: italic;
}

/*
    Lo que puede echar atrás el documento entero —un proveedor bloqueado, un cliente inactivo—. Va
    antes de los datos y no como una fila más entre ellos.
*/
.ficha-alerta {
    border-left: 3px solid var(--danger);
    background: var(--danger-soft);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-2);
}

/*
    Estado inválido de un campo. Bootstrap 5.1 trae .is-invalid con #dc3545 clavado —borde, ícono y
    hasta el anillo de foco, que reemplaza por un resplandor rojo propio— y ese rojo no es el del
    sistema: 4.53:1 sobre blanco contra los 5.86:1 de --danger.

    El ícono se va: viene como data URI, donde el color no puede salir de una variable, y obliga a un
    padding-right que corre el texto. Lo que dice por qué el campo está mal es su mensaje, que va
    atado con aria-describedby. Y el foco vuelve al anillo del sistema: un campo inválido no tiene
    por qué enfocarse distinto de los demás.
*/
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    background-image: none;
    padding-right: var(--space-3);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primario-fuerte);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Formularios: apariencia uniforme, sin fondos oscuros */
.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--line-strong);
    border-radius: 8px;
    min-height: 2.5rem;
}

.form-control:disabled,
.form-control:read-only,
.form-select:disabled {
    background-color: var(--paper);
}

/* Ocultar los controles nativos de incremento/decremento en campos numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Badges: estilo pill con fondo suave en vez de bloques de color sólido */
.badge {
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35em 0.7em;
}

.badge.bg-success {
    background-color: var(--success-soft) !important;
    color: var(--success) !important;
}

.badge.bg-warning {
    background-color: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.badge.bg-danger {
    background-color: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.badge.bg-secondary {
    background-color: var(--line) !important;
    color: var(--ink-soft) !important;
}

.badge.bg-info {
    background-color: var(--info-soft) !important;
    color: var(--color-primario) !important;
}

/* Cifras tabulares: montos y códigos alineados en columna, tipografía monoespaciada */
.table td.text-end,
.table th.text-end {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* Marca "L": cuadrado cognac de esquinas suaves, reutilizado en el sidebar y en el login */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    /* La marca conserva el cognac original y no el accesible: WCAG exime del requisito de
       contraste al texto que forma parte de un logotipo, y este cuadrado es lo que define
       cuál es el color de la marca. Todo lo interactivo sí usa --color-primario-fuerte. */
    background-color: var(--luque-cognac);
    color: var(--surface);
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.brand-mark-lg {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    font-size: 1.5rem;
}

/* Íconos de línea (Components/Shared/Icon.razor), reemplazan a los emoji */
.ico {
    width: 1.05em;
    height: 1.05em;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
}