/* ---------- Colores de Beta Motorcycles (rojo, negro y gris). Los nombres de variable se conservan. ---------- */
:root {
    --cr-verde: #d7261e;      /* rojo Beta (color principal) */
    --cr-verde-osc: #a51b14;  /* rojo oscuro */
    --cr-amarillo: #1a1a1a;   /* acento: negro */
    --cr-gris: #b5b5b5;
    --cr-negro: #111;
}

.btn-primary { --bs-btn-bg: var(--cr-verde); --bs-btn-border-color: var(--cr-verde); --bs-btn-hover-bg: var(--cr-verde-osc);
               --bs-btn-hover-border-color: var(--cr-verde-osc); --bs-btn-active-bg: var(--cr-verde-osc); --bs-btn-disabled-bg: var(--cr-verde);
               --bs-btn-disabled-border-color: var(--cr-verde); }
.btn-outline-primary { --bs-btn-color: var(--cr-verde); --bs-btn-border-color: var(--cr-verde); --bs-btn-hover-bg: var(--cr-verde);
                       --bs-btn-hover-border-color: var(--cr-verde); --bs-btn-active-bg: var(--cr-verde-osc); }
a, .btn-link { color: var(--cr-verde); }
a:hover { color: var(--cr-verde-osc); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--cr-verde); box-shadow: 0 0 0 .2rem rgba(215,38,30,.25); }
.form-check-input:checked { background-color: var(--cr-verde); border-color: var(--cr-verde); }
h1:focus { outline: none; }

/* ---------- Página de inicio ---------- */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; max-width: 1000px; }
.tile {
    position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem 1.3rem;
    border-radius: 14px; background: #fff; border: 2px solid #e6e6e6; color: var(--cr-negro); text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: var(--cr-verde); color: var(--cr-negro); }
.tile-icono { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
              background: var(--cr-verde); color: #fff; border: 3px solid var(--cr-negro); margin-bottom: .4rem; }
.tile-sec .tile-icono { background: #fdecea; color: var(--cr-verde); border-color: var(--cr-verde); }
.tile-titulo { font-size: 1.25rem; font-weight: 700; }
.tile-texto { font-size: .88rem; color: #555; }
.tile-etiqueta { position: absolute; top: .8rem; right: .8rem; font-size: .7rem; font-weight: 700; padding: .15rem .5rem;
                 border-radius: 999px; background: var(--cr-gris); color: #fff; }

/* ---------- Login ---------- */
.login-logo { display: block; width: 220px; max-width: 70%; margin: 0 auto 1.25rem; }
.login-fondo { background: var(--cr-gris); min-height: 100vh; padding-top: 8vh; }
.login-caja { background: #fff; border-radius: 14px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); border-top: 6px solid var(--cr-verde); }

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(215,38,30,.25);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.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;
}
/* ---------- Buscador de productos ---------- */
.buscador { position: relative; }
.buscador-lista { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 340px; overflow-y: auto;
                  background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.buscador-item { display: grid; grid-template-columns: 130px 1fr auto; gap: .6rem; width: 100%; text-align: left; border: 0;
                 background: #fff; padding: .45rem .7rem; font-size: .88rem; border-bottom: 1px solid #f0f0f0; align-items: center; }
.buscador-item:hover, .buscador-item.activo { background: #fdecea; }
.buscador-codigo { font-weight: 600; font-variant-numeric: tabular-nums; }
.buscador-exist { font-weight: 700; color: var(--cr-verde); font-variant-numeric: tabular-nums; }
.buscador-exist.cero { color: #c0392b; }

/* ---------- Reportes ---------- */
.reporte-tabla { max-height: calc(100vh - 290px); overflow: auto; border: 1px solid #e3e3e3; border-radius: 8px; }
.reporte-tabla thead th { position: sticky; top: 0; z-index: 2; background: #f7f7f7; border-bottom: 2px solid var(--cr-verde); white-space: nowrap; }
.reporte-tabla td { font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.kpi { background: #fff; border: 1px solid #e3e3e3; border-left: 4px solid var(--cr-amarillo); border-radius: 8px; padding: .5rem .75rem; }
.kpi span { display: block; font-size: .75rem; color: #666; }
.kpi b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ---------- Compras masivas ---------- */
.paso { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; font-weight: 600; }
.paso span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
             background: var(--cr-verde); color: #fff; font-size: .8rem; }
.kpi small { display: block; font-size: .72rem; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-mal { border-left-color: #c0392b; }
.kpi-mal b { color: #c0392b; }
.kpi-bien { border-left-color: var(--cr-verde); }
.card-gastos-faltan { border-width: 2px; }
.tabla-scroll { max-height: 60vh; overflow: auto; border: 1px solid #e3e3e3; border-radius: 6px; margin-bottom: .5rem; }
.tabla-scroll thead th { position: sticky; top: 0; background: #f6f6f4; z-index: 1; }
.tabla-compra td, .tabla-compra th { font-variant-numeric: tabular-nums; }

/* ---------- Firma electrónica ---------- */
.pad-firma { width: 100%; height: 180px; border: 2px dashed #b5b5b5; border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.firma-actual { background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 8px; text-align: center; }
.firma-actual img { max-height: 110px; max-width: 100%; }
.firmas-traspaso { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.firma-paso { background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: .4rem .6rem; text-align: center; }
.firma-paso img { max-height: 60px; max-width: 100%; }
.firma-paso .paso { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #d7261e; font-weight: 600; }
.firma-paso small { display: block; color: #666; font-size: .72rem; }

/* ---------- Ambiente de pruebas ---------- */
.franja-ambiente { background: repeating-linear-gradient(45deg, #e8590c, #e8590c 14px, #f76707 14px, #f76707 28px);
                   color: #fff; font-weight: 700; text-align: center; padding: .35rem .5rem; letter-spacing: .06em; font-size: .85rem; }

/* ---------- Verificador ---------- */
.publico-fondo { min-height: 100vh; background: #f4f4f4; }
.publico-cab { display: flex; align-items: center; gap: 1rem; background: var(--cr-verde); color: #fff; padding: .6rem 1.2rem; font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.publico-cab img { height: 54px; background: #fff; border-radius: 8px; padding: 3px 8px; }
.verificador { max-width: 1100px; margin: 0 auto; }
.buscador-item.con-foto { grid-template-columns: 48px 1fr auto; }
.buscador-item.con-foto img, .foto-mini { width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; }
.verif-ficha { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 1rem; background: #fff; border-radius: 14px; padding: .9rem; border: 1px solid #e3e3e3; }
.verif-foto { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.verif-codigo { color: #666; font-variant-numeric: tabular-nums; }
.verif-nombre { font-size: 1.25rem; font-weight: 700; line-height: 1.2; margin: .1rem 0 .4rem; }
.verif-precio { font-size: 2.4rem; font-weight: 800; color: var(--cr-verde); line-height: 1; }
.verif-precio.sin { font-size: 1.2rem; color: #c0392b; }
.verif-exist td { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .verif-ficha { grid-template-columns: 1fr; } .verif-precio { font-size: 2.3rem; } }

/* ---------- Caja ---------- */
.cajas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.caja-card { background: #fff; border: 2px solid #e6e6e6; border-radius: 12px; padding: .8rem 1rem; }
.caja-card.disponible { border-color: #f3c6c3; }
.caja-card.abiertapormi { border-color: var(--cr-verde); }
.caja-card.ocupada { border-color: #f1c4c4; background: #fffafa; }
.caja-card .estado { font-size: .85rem; font-weight: 600; margin-top: .3rem; }
.caja-pantalla { min-height: 100vh; display: flex; flex-direction: column; background: #f4f4f4; }
/* En la pantalla de venta todo cabe en la ventana: solo se desplazan los renglones y la parte alta del panel derecho. */
.caja-pantalla:has(.caja-cuerpo) { height: 100vh; min-height: 0; }
.caja-fondo { flex: 1; min-height: 0; background: #f4f4f4; display: flex; flex-direction: column; }
.caja-barra { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; background: var(--cr-verde); color: #fff; padding: .45rem 1rem; }
.caja-logo { height: 40px; background: #fff; border-radius: 6px; padding: 2px 6px; margin-right: .5rem; }
.caja-tabs { display: flex; gap: .3rem; padding: .5rem 1rem 0; flex-wrap: wrap; }
.caja-tab { border: 1px solid #d6d6d6; border-bottom: 0; background: #ececec; border-radius: 8px 8px 0 0; padding: .35rem .9rem; font-weight: 600; }
.caja-tab small { color: #666; font-weight: 400; margin-left: .3rem; }
.caja-tab.activa { background: #fff; border-color: var(--cr-verde); color: var(--cr-verde-osc); }
.caja-tab.por-cobrar { background: #fff3cd; }
.caja-tab.nueva { width: 2.4rem; }
.caja-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr); gap: .8rem; padding: 0 .8rem .6rem; flex: 1; min-height: 0; }
.caja-izq { background: #fff; border: 1px solid #e2e2e2; border-radius: 0 10px 10px 10px; padding: .8rem; display: flex; flex-direction: column; min-height: 0; }
.caja-renglones { flex: 1; overflow: auto; margin-top: .6rem; min-height: 0; }
.caja-renglones td { font-variant-numeric: tabular-nums; }
/* Derecha: lo de arriba se desplaza; totales y botones siempre a la vista. */
.caja-der { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.caja-der-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.caja-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.caja-dos .caja-cliente { min-width: 0; }
.caja-foto { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 110px 1fr; align-items: center; flex-shrink: 0; }
.caja-foto img { width: 110px; height: 110px; object-fit: contain; background: #fff; display: block; }
.caja-foto-datos { padding: .4rem .7rem; border-left: 1px solid #eee; min-width: 0; }
.caja-foto > .text-muted { grid-column: 1 / -1; }
.caja-cliente { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: .4rem .7rem; cursor: pointer; flex-shrink: 0; }
.caja-cliente:hover { border-color: var(--cr-verde); }
.caja-totales { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: .45rem .9rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.caja-totales div { display: flex; justify-content: space-between; }
.caja-totales .total { font-size: 1.8rem; font-weight: 800; color: var(--cr-verde-osc); border-top: 2px solid var(--cr-amarillo); margin-top: .3rem; padding-top: .2rem; }
.caja-acciones { display: grid; gap: .4rem; flex-shrink: 0; }
.caja-recientes { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: .5rem .8rem; }
.cobro-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.2rem; padding: .3rem .6rem; border-radius: 8px; background: #f4f4f4; margin-bottom: .4rem; }
.cobro-total b { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.cobro-total.falta b { color: #c0392b; }
.cobro-total.listo b { color: var(--cr-verde); }
.cobro-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.cobro-resumen .cobro-total { margin-bottom: 0; }
.cobro-total.cambio { background: #e7f1ff; }
.cobro-total.cambio b { color: #0b5ed7; }
.cobro-cambio { font-size: 2rem; font-weight: 800; color: #0b5ed7; text-align: center; padding: .3rem; background: #e7f1ff; border-radius: 8px; }
.cobro-pago { border: 1px solid #e2e2e2; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; background: #fff; }
.buscador-item.activo { background: #fdecea; }
@media (max-width: 1100px) { .caja-cuerpo { grid-template-columns: minmax(0, 1fr) 310px; } .caja-foto { grid-template-columns: 80px 1fr; } .caja-foto img { width: 80px; height: 80px; } }
@media (max-width: 760px) { .caja-pantalla:has(.caja-cuerpo) { height: auto; } .caja-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto; } }

/* Aviso de error de Blazor en TODOS los layouts (caja, impresión, público): oculto hasta que Blazor lo muestra. */
#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }