/* ════════════════════════════════════════════════════════════════════════════
   EvoWeb Fidelización — sistema de diseño (panel)
   Base EvoWeb fija: Manrope · #003D2C / #0F4C3A / #7FAE32 · neutros #F7F7F5
   Marca del negocio: --mud-palette-primary (principal) y --mud-palette-secondary (acento).
   Radios 10/14/22 · una sola sombra · iconos Lucide.
   ════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); }

:root {
    --evo-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --evo-green: #003D2C;
    --evo-green-2: #0F4C3A;
    --evo-lime: #7FAE32;
    --evo-shadow: 0 8px 24px rgba(17, 17, 17, .10);
    --r-btn: 10px;
    --r-card: 14px;
    --r-block: 22px;
}

html, body { margin: 0; min-height: 100%; }
body, .mud-typography, .mud-button-root, .mud-input, .mud-input-root, .mud-table, .mud-chip, .mud-nav-link,
.mud-select, .mud-list-item-text, .mud-picker, .mud-snackbar, .mud-tooltip, input, textarea, button {
    font-family: var(--evo-font) !important;
}
body { -webkit-font-smoothing: antialiased; }

/* Tipografía: jerarquía EvoWeb */
.mud-typography-h4 { font-weight: 800 !important; letter-spacing: -.02em !important; font-size: 1.85rem !important; }
.mud-typography-h5 { font-weight: 800 !important; letter-spacing: -.015em !important; }
.mud-typography-h6 { font-weight: 700 !important; letter-spacing: -.01em !important; font-size: 1.05rem !important; }
.mud-typography-subtitle1, .mud-typography-subtitle2 { font-weight: 700 !important; }
.mud-button-root { text-transform: none !important; font-weight: 600 !important; letter-spacing: 0 !important; border-radius: var(--r-btn) !important; }
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover { filter: brightness(.94); }
.mud-button-filled.mud-button-filled-secondary { color: #111 !important; }
.mud-table-head .mud-table-cell { font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary) !important; }
.mud-table-cell { font-variant-numeric: tabular-nums; }
.mud-chip { font-weight: 700 !important; }

/* Superficies: borde fino, sin sombras (la sombra se reserva para la tarjeta de sellos y hojas). */
.mud-paper-outlined, .mud-card.mud-paper-outlined, .mud-table-outlined { border-radius: var(--r-card) !important; border-color: var(--mud-palette-lines-default) !important; }
.mud-dialog { border-radius: var(--r-block) !important; box-shadow: var(--evo-shadow) !important; }
.mud-input-outlined-border { border-radius: 12px !important; }
.mud-snackbar { border-radius: 12px !important; }

.evo-boot, .evo-center {
    min-height: 100vh; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center;
    font-family: var(--evo-font); color: #666A68; background: #F7F7F5;
}
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
    padding: .75rem 1rem; background: #FDF3E1; color: #111; box-shadow: 0 -1px 4px rgba(0,0,0,.15); font-family: var(--evo-font);
}
#blazor-error-ui .reload { margin-left: .5rem; }

.evo-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-muted { color: var(--mud-palette-text-secondary); }
.evo-lime { color: var(--evo-lime); }
.evo-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.cursor-pointer { cursor: pointer; }

/* ── Estructura ───────────────────────────────────────────────────────────── */
.evo-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.evo-appbar-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; border-radius: 8px; margin-left: 6px; }
.evo-appbar-title { display: flex; flex-direction: column; line-height: 1.15; margin-left: 10px; min-width: 0; font-weight: 800; font-size: 1.02rem; }
.evo-user { align-items: center; gap: 10px; margin-inline: 8px; }
.evo-avatar { background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface)) !important; color: var(--mud-palette-primary) !important; font-weight: 800; font-size: .75rem !important; }
.evo-user-text { display: flex; flex-direction: column; line-height: 1.2; font-size: .85rem; }
.evo-user-text span { color: var(--mud-palette-text-secondary); font-size: .75rem; }

.evo-drawer { border-right: 0 !important; }
.evo-drawer-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 12px; color: #fff; }
.evo-drawer-brand img { height: 26px; width: auto; }
.evo-drawer-brand span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--evo-lime); padding-top: 4px; }
.evo-drawer .mud-navmenu { padding: 4px 10px 20px; }
.evo-drawer .mud-nav-link { border-radius: 10px; margin-block: 2px; padding-block: 9px !important; font-weight: 600; color: var(--mud-palette-drawer-text) !important; }
.evo-drawer .mud-nav-link:hover { background: rgba(255, 255, 255, .06) !important; }
.evo-drawer .mud-nav-link.active { background: rgba(255, 255, 255, .10) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--evo-lime); }
.evo-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--evo-lime) !important; }
.evo-drawer .mud-nav-group > .mud-nav-link { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8FA99C !important; font-weight: 700; }
.evo-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon { display: none; }
.evo-main { padding-inline: 16px; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.evo-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: #F7F7F5; font-family: var(--evo-font); }
.evo-login-side { position: relative; overflow: hidden; background: var(--side, #003D2C); background-size: cover; background-position: center; color: #fff; display: flex; align-items: flex-end; padding: 48px; }
.evo-login-side-inner { position: relative; z-index: 1; display: grid; gap: 14px; max-width: 420px; }
.evo-login-side h1 { margin: 0; font-size: 2.3rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.evo-login-side p { margin: 0; color: rgba(255, 255, 255, .78); }
.evo-login-logo { height: 64px; width: auto; max-width: 200px; object-fit: contain; background: #fff; border-radius: 14px; padding: 6px; }
.evo-login-evologo { height: 40px; width: auto; align-self: flex-start; }
.evo-login-ring { position: absolute; right: -160px; top: -160px; width: 520px; height: 520px; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .07); }
.evo-login-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 16px; gap: 24px; }
.evo-login-card { width: 100%; max-width: 400px; }
.evo-login-card h2 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 6px; }
.evo-login-foot { text-align: center; font-size: .78rem; color: #666A68; max-width: 400px; }
.evo-login-foot p { margin: 4px 0; }
@media (max-width: 860px) {
    .evo-login { grid-template-columns: 1fr; }
    .evo-login-side { padding: 28px 20px; min-height: 200px; }
    .evo-login-side h1 { font-size: 1.7rem; }
}

/* ── Inicio ────────────────────────────────────────────────────────────────── */
.evo-tile { height: 100%; }
.evo-tile-muted { opacity: .75; }
.evo-kpi { height: 100%; }
.evo-kpi-value { font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Campo de color */
.evo-color-field { display: flex; align-items: flex-start; gap: 8px; }
.evo-color-field input[type=color] {
    width: 44px; height: 40px; margin-top: 6px; padding: 0; border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px; background: none; cursor: pointer; flex-shrink: 0;
}

.evo-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.evo-code { font: 500 .78rem ui-monospace, Menlo, Consolas, monospace; background: var(--mud-palette-background-gray); padding: 3px 7px; border-radius: 6px; word-break: break-all; }
.evo-qr { width: 260px; margin: 0 auto; }
.evo-qr svg { width: 100%; height: auto; }

/* ── Tarjeta de sellos (vista previa) ─────────────────────────────────────── */
.evo-card-preview { max-width: 360px; border-radius: var(--r-block); overflow: hidden; box-shadow: var(--evo-shadow); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); }
.evo-card-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.evo-card-preview-header h4 { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.evo-card-preview-header small { display: block; font-size: .75rem; opacity: .8; font-weight: 600; margin-top: 2px; }
.evo-card-preview-header img { height: 30px; width: auto; border-radius: 8px; background: #fff; padding: 2px; }
.evo-card-count { font-weight: 800; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.evo-card-count span { font-size: .85rem; opacity: .75; }
.evo-card-preview-body { padding: 16px 18px 18px; display: grid; gap: 14px; }
.evo-stamps { display: grid; gap: 10px; }
.evo-stamp { aspect-ratio: 1; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--stamp) 38%, transparent); display: grid; place-items: center; }
.evo-stamp svg { width: 55%; height: 55%; }
.evo-stamp.on { background: var(--stamp); border: 2px solid var(--stamp); color: #fff; }
.evo-stamp.goal { border: 2px solid var(--goal); background: color-mix(in srgb, var(--goal) 16%, transparent); color: var(--stamp); }
.evo-stamp.goal.on { background: var(--goal); color: #111; }
.evo-progress-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .92rem; }
.evo-progress-copy b { font-weight: 800; }
.evo-progress-copy span { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.evo-reward-line { display: flex; gap: 10px; align-items: center; background: var(--mud-palette-background-gray); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }

/* ── Cliente ───────────────────────────────────────────────────────────────── */
.evo-activation { border-left: 4px solid var(--mud-palette-warning) !important; }
.evo-ready { box-shadow: inset 0 0 0 2px var(--mud-palette-secondary); }
.evo-bigcode { font-size: 2.6rem; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; color: var(--mud-palette-primary); }

/* ── Gráfico ───────────────────────────────────────────────────────────────── */
.evo-chart svg { width: 100%; height: 180px; display: block; }
.evo-chart-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.evo-chart-axis, .evo-chart-legend { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.evo-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

@media print {
    body * { visibility: hidden; }
    .evo-qr-print, .evo-qr-print * { visibility: visible; }
    .evo-qr-print { position: fixed; top: 0; left: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Ajustes finos */
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; }
.evo-login-main { background: #FFFFFF; }
.evo-drawer .mud-nav-group .mud-nav-link-expand-icon { color: #8FA99C !important; }

/* Vista previa de textos legales */
.evo-legal { font-size: .9rem; line-height: 1.55; }
.evo-legal h4 { font-size: .95rem; font-weight: 800; margin: 14px 0 4px; }
.evo-legal p { margin: 6px 0; }
.evo-legal ul { margin: 4px 0 8px; padding-left: 20px; }
.evo-legal-editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; line-height: 1.5; }

/* ── Notificaciones y etiquetas ─────────────────────────────────────────── */
.evo-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap;
    color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag) 35%, transparent);
}
.evo-tag-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.evo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.evo-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default); }
.evo-wa { border-radius: 16px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); max-width: 360px; }
.evo-wa-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #075E54; color: #fff; font-weight: 600; font-size: 14px; }
.evo-wa-body { background: #ECE5DD; padding: 16px 12px; min-height: 160px; }
.evo-wa-bubble { background: #fff; color: #111; border-radius: 0 10px 10px 10px; padding: 6px; max-width: 92%; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.evo-wa-bubble img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 4px; }
.evo-wa-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; padding: 2px 4px; }
.evo-wa-time { text-align: right; font-size: 11px; color: #667781; padding: 0 4px; }
.evo-kind-help { font-size: 13px; }
.evo-sticky-bar {
    position: sticky; bottom: 0; z-index: 5; background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default); padding: 12px 16px; margin-top: 16px;
}

/* ── Academia: horario semanal ─────────────────────────────────────────── */
.evo-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.evo-week-day { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; }
.evo-week-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; }
.evo-week-empty { font-size: 12px; }
.evo-class {
    display: block; width: 100%;
    text-align: left; border: 0; cursor: pointer; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.3;
    color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--c) 14%, transparent); border-left: 4px solid var(--c);
}
.evo-class small { display: block; color: var(--mud-palette-text-secondary); font-size: 11px; margin-top: 2px; }
.evo-class-off { opacity: .5; }
@media (max-width: 900px) { .evo-week { grid-template-columns: 1fr; } }

/* ── Reportes ──────────────────────────────────────────────────────────── */
.evo-hbar { height: 8px; border-radius: 999px; background: var(--mud-palette-background-gray); overflow: hidden; margin-top: 4px; }
.evo-hbar i { display: block; height: 100%; background: var(--mud-palette-primary); border-radius: 999px; }
.evo-heat { display: grid; gap: 3px; align-items: center; }
.evo-heat-h { font-size: 11px; text-align: center; color: var(--mud-palette-text-secondary); }
.evo-heat-d { font-size: 12px; color: var(--mud-palette-text-secondary); }
.evo-heat-c { display: block; height: 22px; border-radius: 4px; background: var(--mud-palette-primary); }

/* ── Primeros pasos ────────────────────────────────────────────────────── */
.evo-steps { display: grid; gap: 8px; }
.evo-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; }
.evo-step:hover { background: var(--mud-palette-action-default-hover); }
.evo-step-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 2px solid var(--mud-palette-lines-inputs); font-size: 12px; font-weight: 700; }
.evo-step.done .evo-step-dot { background: var(--mud-palette-success); border-color: var(--mud-palette-success); color: #fff; }
.evo-step.done b { text-decoration: line-through; opacity: .7; }

/* Modo kiosco (tablet del local) */
.evo-kiosk { min-height: 100vh; display: flex; flex-direction: column; background: var(--mud-palette-background); }
.evo-kiosk-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.evo-kiosk-logo { height: 40px; width: auto; border-radius: 8px; }
.evo-kiosk-title { font-weight: 800; font-size: 1.15rem; }
.evo-kiosk-main { flex: 1; display: flex; justify-content: center; padding: 32px 16px; }
.evo-kiosk-panel { width: 100%; max-width: 640px; }
.evo-kiosk-panel .mud-input { font-size: 1.4rem; }
.evo-kiosk-btn { min-width: min(100%, 360px); min-height: 64px; font-size: 1.2rem !important; }
.evo-kiosk-alert { font-size: 1.15rem; }
.evo-kiosk-foot { text-align: center; padding: 10px; font-size: .8rem; opacity: .6; }