h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/*Custom: Acá va lo GLOBAL: lo que usan varias pantallas o lo que pisa a MudBlazor en todos lados.
   Lo que sirve a un solo componente va en un <style> al final de su .razor */

body {
    height: 100vh;
}

.index-view {
    max-width: 70%;
    object-position: center;
    margin: auto;
    margin-top: 35px;
}

/* Editor de producto (Create/Edit).*/
.producto-editor {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}

.producto-editor > .mud-paper {
    min-width: 0;
}

.producto-editor-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

@media (min-width: 960px) {
    .producto-editor {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }

    .producto-editor.expandido {        
        grid-template-columns: 3fr 9fr;
        grid-template-rows: 1fr 1fr;
        align-items: stretch;
        height: calc(100vh - 190px);
        min-height: 420px;
    }

    .producto-editor.expandido > .producto-editor-datos {
        grid-area: 1 / 1;
    }

    .producto-editor.expandido > .producto-editor-opciones {
        grid-area: 2 / 1;
    }

    .producto-editor.expandido > .producto-editor-componentes {
        grid-area: 1 / 2 / 3 / 3;
    }
    
    .producto-editor.expandido > .mud-paper {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .producto-editor.expandido .producto-editor-scroll {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

    .producto-editor.expandido .producto-editor-tabla {
        flex: 1;
        min-height: 0;
    }

    .producto-editor.expandido .producto-editor-tabla .mud-table-container {
        height: 100%;
        overflow-y: auto;
    }
    
    .producto-editor.expandido .producto-editor-rangos {
        width: 60%;
        margin-inline: auto;
    }
}

.producto-editor-tabla.mud-simple-table.mud-table-dense * tr td,
.producto-editor-tabla.mud-simple-table.mud-table-dense * tr th {
    padding: 4px 8px;
}

.producto-editor-tabla.mud-simple-table.mud-table-dense * tr td:last-child,
.producto-editor-tabla.mud-simple-table.mud-table-dense * tr th:last-child {
    padding-right: 12px;
}
.producto-editor-acciones-campo > .mud-tooltip-root.mud-tooltip-inline {
    display: flex;
    align-items: center;
}
.producto-editor-rangos {
    background-color: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* En la modal del modo tarjetas el panel no cuelga de una fila: va sin el borde de solapa. */
.producto-editor-rangos-dialogo .producto-editor-rangos {
    border: none;
    padding: 0 !important;
}

/* Tablas editables (receta del producto, medidas comerciales del insumo): sin separador
   horizontal entre filas; cada fila se marca con una barra vertical a la izquierda. */
.producto-editor-tabla.mud-simple-table table tbody tr > td,
.precio-editor-medidas.mud-simple-table table tbody tr > td {
    border-bottom: none;
}

.producto-editor-tabla.mud-simple-table table tbody tr > td:first-child:not(.tabla-fija-izquierda),
.precio-editor-medidas.mud-simple-table table tbody tr > td:first-child {
    position: relative;
}

.producto-editor-tabla.mud-simple-table table tbody tr.producto-editor-fila-rangos > td:first-child::before {
    content: none;
}

.producto-editor-tabla.mud-table-hover .mud-table-container table tbody tr.producto-editor-fila-rangos:hover {
    background-color: transparent;
}

.producto-editor-tabla.mud-simple-table table tbody tr > td:first-child::before,
.precio-editor-medidas.mud-simple-table table tbody tr > td:first-child::before {
    content: "";
    position: absolute;
    inset: 4px auto 4px 0;
    width: 3px;
    border-radius: 2px;    
    background-color: var(--mud-palette-lines-inputs);
}


.cotizador-tabla.mud-simple-table table tbody tr:not(.cotizador-fila-regla) > td {
    border-bottom: none;
}

.cotizador-tabla.mud-simple-table table tbody tr.cotizador-fila-regla > td {
    padding-top: 0;
    font-size: var(--mud-typography-caption-size);
    color: var(--mud-palette-text-secondary);
}

.cotizador-totales.mud-simple-table table {
    width: 100%;
}

.cotizador-totales-bloque {
    width: fit-content;
    min-width: 280px;
    margin-left: auto;
}

.cotizador-totales-titulo {
    border-bottom: dashed 1px #80808026;
}

.cotizador-totales.mud-simple-table table tbody tr.cotizador-fila-final > td {
    font-weight: 600;
    border-bottom: none;
}

/* Lista de cotizaciones del carrito, compartida por los diálogos de guardar presupuesto
   y de exportar a PDF (la fila en sí es el componente CarritoItem). */
.carrito-divider.mud-divider {
    border-style: dashed;
}

.carrito-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

/* El label del MudSwitch es display:flex y ocupa todo el ancho del contenedor,
   con lo que TODA la franja togglea el switch. Se limita el área clickeable
   al control + texto. */
.mud-switch {
    width: fit-content;
}

#blazor-error-ui {
    color: black !important;
}


.kite-crud-column {
    width: 215px;
    max-width: 215px;
}

.kite-crud-column.xs {
}

.kite-crud-column.sm {
    width: 125px;
    max-width: 125px;
}

.kite-crud-column.md {
}

.kite-crud-column.lg {
}

.kite-crud-column.xl {
}


td.kite-crud-column.d-flex {
    display: table-cell !important;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

td.kite-crud-column.d-flex > * {
    vertical-align: middle;
}

.clear-style-input .mud-input::before, .clear-style-input .mud-input.mud-input-underline::after {
    display: none;
}

/* Cotizador público (/): acá va solo lo que comparten la galería de la página y el modal
   de cotización; lo que usa un solo componente vive en el <style> de su .razor.
   Identidad de wayna.com.ar: títulos #EE2651, subtítulos #B41033, texto #7A7A7A,
   Montserrat (la hoja la carga App.razor). Los tamaños del kit —32 / 24 / 16— se
   achican con clamp en pantallas chicas.
   OJO con la especificidad: este archivo carga ANTES que MudBlazor.min.css, así que lo
   que le pisa algo a Mud necesita ganarle (no alcanza con empatar). */

/* .cp es la raíz de la página; .cp-dialogo, la del modal, que MudDialogProvider dibuja
   fuera de @Body y por eso no hereda de .cp. Los dos reparten la misma tipografía. El
   selector compuesto es para ganarle al color de .mud-dialog. */
.cp,
.mud-dialog.cp-dialogo {
    font-family: Montserrat, sans-serif;
    color: #7A7A7A;
}

.cp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px 72px;
}

.cp-subtitulo {
    margin: 0 0 20px;
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-weight: 500;
    color: #B41033;
}

.cp-texto {
    font-size: 1rem;
    font-weight: 400;
    color: #7A7A7A;
}

/* Producto sin imagen cargada. Ocupa el mismo recuadro que la foto —va junto con la clase
   de la imagen, sea la de la tarjeta o la del modal— para que la grilla no se descuadre.
   El display lo fija cada componente con el selector compuesto (.cp-imagen.cp-sin-imagen),
   porque su <style> carga después que este archivo y le ganaría por orden. */
.cp-sin-imagen {
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    color: #C4C4C4;
}

/* Modal de alta y edición de insumos: 30 % más ancha que MaxWidth.Small (600 px) para que la
   tabla de medidas comerciales no corte los precios. Doble clase para ganarle a
   .mud-dialog-width-sm, que carga después. */
.mud-dialog.insumo-dialog {
    max-width: 780px;
}

/* Columnas fijas de una tabla con scroll horizontal (grilla de insumos, receta del producto en
   modo tabla). Van en blanco y con una sombra hacia las columnas que tienen escondidas debajo.
   La sombra la maneja una animación atada al scroll horizontal de la tabla: la de la izquierda
   aparece apenas se desplaza y la de la derecha se va al llegar al final. Si la tabla entra
   entera no hay scroll, la animación queda inactiva y no hay sombra. */
.mud-simple-table table tr > .tabla-fija-izquierda,
.mud-simple-table table tr > .tabla-fija-derecha {
    position: sticky;
    z-index: 2;
    background-color: var(--mud-palette-surface);
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(nearest inline);
}

/* Por encima del resto del encabezado, que con FixedHeader también es sticky (z-index 1). El
   "th" en el selector es para ganarle en especificidad a esa regla de MudBlazor. */
.mud-simple-table table thead tr > th.tabla-fija-izquierda,
.mud-simple-table table thead tr > th.tabla-fija-derecha {
    z-index: 3;
}

.mud-simple-table table tr > .tabla-fija-izquierda {
    left: 0;
    animation-name: sombra-fija-izquierda;
}

.mud-simple-table table tr > .tabla-fija-derecha {
    right: 0;
    animation-name: sombra-fija-derecha;
}

@keyframes sombra-fija-izquierda {
    from { box-shadow: none; }
    2%, to { box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.12); }
}

@keyframes sombra-fija-derecha {
    from, 98% { box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.12); }
    to { box-shadow: none; }
}