:root { --a-oscuro: #3b1736; --a-primario: #b83280; --a-acento: #14b8a6; --a-fondo: #faf6f8; }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d9ea; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }
body { background: var(--a-fondo); -webkit-tap-highlight-color: transparent; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
body.con-nav { padding-bottom: 96px; }
@media (min-width: 992px) { body.con-nav { padding-bottom: 40px; } }
h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold { letter-spacing: -.01em; }
main { animation: aparecer .35s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
a, .btn, .lista-item, .atajo, .accion-grande, .nav-link, .tabbar a { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.bg-app { background: linear-gradient(135deg, var(--a-oscuro), #8f2465); }
.text-acento { color: var(--a-acento) !important; }
.btn { border-radius: 12px; font-weight: 600; }
.btn-sm { border-radius: 10px; }
.btn.rounded-circle { border-radius: 50% !important; }
.btn-acento { --bs-btn-bg: var(--a-acento); --bs-btn-border-color: var(--a-acento); --bs-btn-color: #1f2a2e; --bs-btn-hover-bg: #0d9488; --bs-btn-hover-border-color: #0d9488; --bs-btn-hover-color: #1f2a2e; --bs-btn-active-bg: #0f766e; --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #99f6e4; --bs-btn-disabled-border-color: #99f6e4; }
.btn-primary { --bs-btn-bg: var(--a-primario); --bs-btn-border-color: var(--a-primario); --bs-btn-hover-bg: #8f2465; --bs-btn-hover-border-color: #8f2465; }
.btn-primary:hover, .btn-acento:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(184,50,128,.25); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(184,50,128,.2); }
.navbar .nav-link { border-radius: 10px; margin: 0 2px; }
.navbar .nav-link:hover { background: rgba(255,255,255,.08); }
.navbar .nav-link.active { color: #fff !important; font-weight: 600; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 var(--a-acento); }
.card { border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(59,23,54,.08); }
.card-header { background: transparent; font-weight: 700; border-bottom: 1px solid #e9efee; }
.form-control, .form-select { border-radius: 10px; border-color: #d9e3e1; }
.form-control:focus, .form-select:focus { border-color: var(--a-primario); }
.input-group .btn { border-radius: 10px; }
.kpi { padding: 14px 16px; transition: transform .15s ease, box-shadow .15s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(59,23,54,.12); }
.kpi .v { font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .ic, .ic-box { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.table td, .text-tabular { font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table > thead > tr > th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 700; }
.table-hover > tbody > tr:hover > * { background-color: #f5f9f8; }
.spinner-border-sm { vertical-align: -1px; }
.vacio { padding: 48px 16px; text-align: center; color: #8b8fa3; }
.vacio > i { font-size: 2.6rem; display: block; margin-bottom: 10px; width: 72px; height: 72px; line-height: 72px; border-radius: 50%; background: #e6f4f2; color: var(--a-primario); margin-inline: auto; }
.min-w-0 { min-width: 0; }
.chart-box { position: relative; height: 260px; }
.lista-item { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #e9efee; color: inherit; text-decoration: none; }
.lista-item:last-child { border-bottom: 0; }
a.lista-item:hover { background: #f5f9f8; padding-left: 20px; }
.lista-item .ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; }
.badge { font-weight: 600; border-radius: 7px; }
.alert { border: 0; border-radius: 12px; }
.toast { border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(59,23,54,.15); }
.login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: radial-gradient(circle at 20% 20%, #8f2465, #3b1736 60%); }
.login-bg .card { border-radius: 20px; }

/* Barra inferior móvil */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff; border-top: 1px solid #e1e9e7; display: flex; justify-content: space-around; align-items: flex-end; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(59,23,54,.06); border-radius: 18px 18px 0 0; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; color: #9499ad; text-decoration: none; font-size: .68rem; font-weight: 600; gap: 2px; padding: 6px 0; border-radius: 10px; margin: 0 2px; }
.tabbar a i { font-size: 1.3rem; }
.tabbar a.active { color: var(--a-primario); background: #e6f4f2; }
.tabbar .centro { width: 62px; height: 62px; margin-top: -28px; border-radius: 50%; border: 4px solid var(--a-fondo); background: var(--a-acento); color: #fff; font-size: 1.6rem; box-shadow: 0 6px 16px rgba(245,158,11,.4); flex-shrink: 0; }
.fab { position: fixed; right: 24px; bottom: 24px; z-index: 1030; width: 60px; height: 60px; font-size: 1.6rem; align-items: center; justify-content: center; }
.hoja.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 18px 18px 0 0; }
@media (min-width: 768px) { .hoja.offcanvas-bottom { max-width: 900px; margin: 0 auto; } }
.accion-grande { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid; border-left-width: 4px !important; border-radius: 12px; color: inherit; text-decoration: none; background: #fff; height: 100%; }
.accion-grande:hover { background: #f5f9f8; }
.accion-grande .ic { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

/* Accesos rápidos inicio */
.atajo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 8px; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(59,23,54,.08); text-align: center; height: 100%; font-weight: 600; font-size: .9rem; }
.atajo i { font-size: 1.8rem; transition: transform .2s ease; }
.atajo:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,23,54,.1); }
.atajo:active i { transform: scale(1.25); }

/* Escáner */
.scan-visor { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 12px; overflow: hidden; }
.scan-visor video { width: 100% !important; height: 100% !important; object-fit: cover; }
.scan-visor #qr-shaded-region { border-color: rgba(0,0,0,.45) !important; }
.scan-linea { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 10px #ef4444; z-index: 5; animation: barrido 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes barrido { 0%,100% { transform: translateY(-40px); } 50% { transform: translateY(40px); } }
.scan-ultimo { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.5); animation: pop .25s ease; }
.scan-ultimo.error { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.5); }
@keyframes pop { from { transform: scale(.96); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.flash-ok { animation: flashok .8s ease; }
@keyframes flashok { from { background: #d1fae5; } to { background: transparent; } }

/* Documento en construcción */
.carrito-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e9efee; }
.carrito-item:last-child { border-bottom: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid #d1d5e0; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.qty button { border: 0; background: #f3f6f5; width: 34px; height: 36px; font-size: 1.1rem; }
.qty input { width: 64px; border: 0; text-align: center; font-weight: 600; height: 36px; font-variant-numeric: tabular-nums; }
.qty input:focus { outline: none; }
.precio-input { width: 110px; }
.barra-total { position: sticky; bottom: 84px; z-index: 10; }
@media (min-width: 992px) { .barra-total { bottom: 12px; } }
.buscador-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 320px; overflow: auto; }
.badge-stock { font-variant-numeric: tabular-nums; }
.json-datos { font-size: .75rem; background: #f3f6f5; border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-all; margin: 0; }

@media print {
  .navbar, .tabbar, .fab, .no-print, .toast-container { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* =====================================================================
   Tema v3 — mismo diseño que el manual: encabezados con degradado,
   un color por módulo, tarjetas suaves y pasos/tablas con color.
   ===================================================================== */
:root { --c: #b83280; --sombra: 0 10px 30px rgba(59,23,54,.08); }
body[data-pag="index"], body[data-pag="empresas"] { --c: #b83280; }
body[data-pag="servicios"], body[data-pag="servicio_form"], body[data-pag="portal"] { --c: #b83280; }
body[data-pag="citas"], body[data-pag="cita"], body[data-pag="cita_form"] { --c: #7c3aed; }
body[data-pag="agenda"], body[data-pag="profesionales"], body[data-pag="profesional_form"] { --c: #0d9488; }
body[data-pag="espera"] { --c: #d97706; }
body[data-pag="comisiones"] { --c: #16a34a; }
body[data-pag="clientes"], body[data-pag="cliente"] { --c: #db2777; }
body[data-pag="gastos"] { --c: #dc2626; }
body[data-pag="informes"] { --c: #0891b2; }
body[data-pag="usuarios"], body[data-pag="empresa"] { --c: #0891b2; }
body[data-pag="perfil"], body[data-pag="plataforma"] { --c: #7c3aed; }
body[data-pag="bitacora"] { --c: #ea580c; }
body { overflow-x: clip; }

/* Encabezado de página: sobre el fondo claro (sin franja de color bajo el menú) */
body.con-nav main h1 { font-weight: 800; letter-spacing: -.02em; }
/* Ícono del título como en las secciones del manual */
main h1 > .bi:first-child {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; margin-right: .45rem;
  font-size: 1.25rem; vertical-align: middle; color: #fff !important;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #3b1736));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 40%, transparent);
}

/* Tarjetas, KPIs y listas */
.card { border-radius: 18px; box-shadow: var(--sombra); }
.card-header { font-weight: 800; padding: .85rem 1.1rem; }
.card-header:first-child { border-radius: 18px 18px 0 0; }
.card-header > span:first-child > .bi, .card-header > .bi:first-child { color: var(--c); }
.kpi { border-top: 4px solid var(--c); }
.kpi .v { letter-spacing: -.02em; }
a.lista-item:hover { background: color-mix(in srgb, var(--c) 6%, #fff); }
.vacio > i { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }

/* Accesos rápidos de inicio con ícono en círculo */
.atajo { border-radius: 18px; box-shadow: var(--sombra); padding: 18px 8px; }
.atajo i { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, currentColor 14%, transparent); }
.atajo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(59,23,54,.14); }

/* Botones redondeados con degradado */
.btn:not(.input-group .btn):not(.rounded-circle) { border-radius: 999px; }
.btn-primary { background-image: linear-gradient(135deg, #b83280, #f472b6); border: 0; }
.btn-acento { background-image: linear-gradient(135deg, #fbbf24, #14b8a6); border: 0; color: #1f2a2e; box-shadow: 0 6px 16px rgba(245,158,11,.3); }
.btn-primary:hover { box-shadow: 0 8px 18px rgba(184,50,128,.35); }

/* Pestañas (documentos, contactos) */
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: #4b5068; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #3b1736)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 35%, transparent); }

/* Tablas con cabecera de color */
.table > thead > tr > th, .table > thead.table-light > tr > th { background: var(--c); color: #fff; border-color: transparent; }
.table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.table > thead > tr > th:last-child { border-top-right-radius: 10px; }
.table-striped > tbody > tr:nth-of-type(odd) > *, .table > tbody > tr:nth-child(even) > * { --bs-table-bg-type: color-mix(in srgb, var(--c) 4%, transparent); }

/* Alertas con barra lateral como las notas del manual */
.alert { border-left: 4px solid currentColor; }

/* Barra inferior y menú */
.tabbar a.active { color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--a-acento); }
.dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 14px 34px rgba(59,23,54,.18); padding: .4rem; }
.dropdown-item { border-radius: 9px; }
.dropdown-item.active, .dropdown-item:active { background: linear-gradient(135deg, #b83280, #f472b6); }

/* Ingreso y registro con el mismo fondo del manual */
.login-bg {
  background:
    radial-gradient(circle at 85% 10%, rgba(245,158,11,.45), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(45,212,191,.5), transparent 42%),
    linear-gradient(135deg, #3b1736 0%, #0f5f58 55%, #b83280 100%);
}
.login-bg .card { border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }

@media print {
  body.con-nav main > :first-child:not(.alert), body.con-nav main > .alert + :not(.alert) { margin: 0 0 1rem !important; padding: 0; background: none; color: #000; box-shadow: none; }
  body.con-nav main > :first-child:not(.alert) :is(h1, .h4, .h5) { color: #000; }
}

/* Pantallas de acceso */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; background:
    radial-gradient(circle at 85% 10%, rgba(245,158,11,.45), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(45,212,191,.5), transparent 42%),
    linear-gradient(135deg, #3b1736 0%, #0f5f58 55%, #b83280 100%); }
@media (min-width: 992px) { .auth { grid-template-columns: 1.1fr 1fr; } }
.auth-hero { color: #fff; align-items: center; padding: 48px clamp(32px, 5vw, 80px); }
.auth-hero-in { max-width: 520px; }
.auth-logo { border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.auth-h { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.auth-h span { background: linear-gradient(90deg, #99f6e4, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-p { color: rgba(255,255,255,.82); font-size: 1.08rem; margin: 14px 0 28px; }
.auth-lista { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.auth-lista li { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px 16px; }
.auth-lista i { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg, #14b8a6, #0d9488); }
.auth-lista li:nth-child(2) i { background: linear-gradient(135deg, #2dd4bf, #b83280); }
.auth-lista li:nth-child(3) i { background: linear-gradient(135deg, #f472b6, #db2777); }
.auth-lista b { display: block; }
.auth-lista span { color: rgba(255,255,255,.8); font-size: .92rem; line-height: 1.35; }
.auth-lista b { color: #fff; }
.auth-manual { color: #fff; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 18px; background: rgba(255,255,255,.1); }
.auth-manual:hover { background: rgba(255,255,255,.2); color: #fff; }
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: 26px; padding: 32px 28px; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: pop .35s ease; }
@media (max-width: 420px) { .auth-card { padding: 26px 18px; } }
.auth-card .input-group-text { background: #f3f6f5; border-color: #d9e3e1; color: #6b7280; border-radius: 14px 0 0 14px; }
.auth-card .input-group .form-control { border-color: #d9e3e1; }
.auth-card .form-floating > .form-control { border-radius: 14px; }
.auth-card .input-group > .form-floating > .form-control { border-radius: 0; }
.auth-card .input-group > .form-floating:last-child > .form-control { border-radius: 0 14px 14px 0; }
.btn-ver-clave { border: 1px solid #d9e3e1; border-left: 0; background: #fff; color: #6b7280; border-radius: 0 14px 14px 0 !important; padding: 0 16px; }
.btn-ver-clave:hover { color: var(--a-primario); background: #f3f6f5; }
.auth-sep { display: flex; align-items: center; gap: 10px; color: #9499ad; font-size: .82rem; margin: 22px 0 14px; }
.auth-sep:before, .auth-sep:after { content: ""; flex: 1; height: 1px; background: #e2eae8; }
.auth-ok { width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; display: grid; place-items: center; font-size: 2.4rem; color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 12px 26px rgba(245,158,11,.35); }
.auth-mal { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 12px 26px rgba(225,29,72,.35); }

/* =====================================================================
   Temas del mes: --t1 / --t2 (degradado) y --glow (brillo) vienen del body.
   ===================================================================== */
body { --t1: #3b1736; --t2: #0f5f58; --glow: #14b8a6; }
.bg-app { background: radial-gradient(circle at 92% -60%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 40%), linear-gradient(135deg, var(--t1), var(--t2)); }
.navbar.bg-app { border-bottom: 3px solid var(--glow); }
.auth, .login-bg {
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(45,212,191,.4), transparent 42%),
    linear-gradient(135deg, var(--t1) 0%, var(--t2) 60%, color-mix(in srgb, var(--t2) 70%, #b83280) 100%);
}
.tema-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid color-mix(in srgb, var(--glow) 60%, transparent); white-space: nowrap; }
a.tema-chip:hover { color: #fff; background: rgba(255,255,255,.22); }
.tema-saludo { display: inline-block; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid color-mix(in srgb, var(--glow) 60%, transparent); }
.auth-h span { background: linear-gradient(90deg, var(--glow), #99f6e4); -webkit-background-clip: text; background-clip: text; }

/* Decoraciones: arriba en las páginas internas; pantalla completa en el ingreso */
.deco { position: absolute; left: 0; right: 0; top: 0; height: 300px; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
body:not(.con-nav) .deco { position: fixed; height: 100vh; z-index: 0; -webkit-mask-image: none; mask-image: none; }
.auth-panel, .auth-hero { position: relative; z-index: 1; }
.deco span { position: absolute; left: var(--x); top: -40px; font-size: var(--s); opacity: var(--o); animation: var(--t) linear var(--d) infinite; will-change: transform; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.deco-cae span { animation-name: tema-cae; }
.deco-sube span { top: auto; bottom: -40px; animation-name: tema-sube; }
.deco-flota span { top: var(--y); animation-name: tema-flota; animation-timing-function: ease-in-out; animation-duration: calc(var(--t) / 2); }
body:not(.con-nav) .deco-cae span { --h: 105vh; }
body:not(.con-nav) .deco-sube span { --h: 105vh; }
@keyframes tema-cae { from { transform: translateY(0) rotate(0); } to { transform: translateY(var(--h, 340px)) rotate(var(--r)); } }
@keyframes tema-sube { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(-1 * var(--h, 340px))) rotate(calc(var(--r) / 4)); } }
@keyframes tema-flota { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(18px, -16px) rotate(calc(var(--r) / 10)); } }
@media (prefers-reduced-motion: reduce) { .deco span { animation: none; top: var(--y); bottom: auto; } }

/* Detalles especiales por mes */
body[data-tema="navidad"] .navbar.bg-app { border-bottom: 0; box-shadow: none; }
body[data-tema="navidad"] .navbar.bg-app::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px;
  background: radial-gradient(circle, #fbbf24 0 3px, transparent 4px) 0 0 / 28px 8px, radial-gradient(circle, #ef4444 0 3px, transparent 4px) 14px 0 / 28px 8px;
  animation: luces 1.2s steps(2) infinite; }
@keyframes luces { 50% { filter: hue-rotate(120deg) brightness(1.3); } }
body[data-tema="patrias"] .navbar.bg-app { border-bottom: 0; box-shadow: inset 0 -4px 0 #ef4444, inset 0 -7px 0 #fff; }
body[data-tema="halloween"] .tema-chip, body[data-tema="halloween"] .tema-saludo { box-shadow: 0 0 14px rgba(249,115,22,.55); }
@media print { .deco, .tema-chip { display: none !important; } }

/* =====================================================================
   v2: fotos, menú de módulos, etiquetas, ABC
   ===================================================================== */
.mini-foto { width: 40px; height: 40px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #f3f6f5; }
.foto-lista { object-fit: cover; padding: 0 !important; }
.foto-titulo { width: 48px; height: 48px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,.6); }
.foto-producto { flex-shrink: 0; width: 96px; height: 96px; border-radius: 18px; border: 2px dashed #c7cbe0; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: #f5f9f8; color: #8b8fa3; }
.foto-producto:hover { border-color: var(--c); color: var(--c); }
.foto-producto img { width: 100%; height: 100%; object-fit: cover; }
.foto-producto span { display: flex; flex-direction: column; align-items: center; font-size: 1.6rem; line-height: 1; }
.foto-producto small { font-size: .7rem; margin-top: 4px; }
.modulo-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 16px; text-decoration: none; color: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; background: #f5f9f8; height: 100%; }
.modulo-tile .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; }
.modulo-tile:hover, .modulo-tile.activo { background: #e6f4f2; }
.abc-A { background: #14b8a6; } .abc-B { background: #b83280; } .abc-C { background: #9499ad; }
.nav-item.dropdown .dropdown-menu { min-width: 250px; }

/* Etiquetas con código de barras */
.hoja-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { background: #fff; border: 1px dashed #c7cbe0; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2mm; overflow: hidden; text-align: center; color: #000; }
.etiqueta svg { max-width: 100%; height: auto; }
.et-nombre { font-size: 8pt; font-weight: 700; line-height: 1.1; max-height: 2.3em; overflow: hidden; }
.et-precio { font-size: 12pt; font-weight: 800; line-height: 1.1; }
.tam-50x25 .etiqueta { width: 50mm; height: 25mm; } .tam-50x25 .et-precio { font-size: 10pt; } .tam-50x25 svg { max-height: 12mm; }
.tam-40x30 .etiqueta { width: 40mm; height: 30mm; } .tam-40x30 svg { max-height: 15mm; }
.tam-60x40 .etiqueta { width: 60mm; height: 40mm; } .tam-60x40 svg { max-height: 20mm; } .tam-60x40 .et-precio { font-size: 15pt; }
.tam-a4 .etiqueta { width: 63mm; height: 33.9mm; } .tam-a4 svg { max-height: 16mm; }
@media print {
  body:has(.hoja-etiquetas) main > :not(.hoja-etiquetas) { display: none !important; }
  body:has(.hoja-etiquetas) main { padding: 0 !important; margin: 0 !important; max-width: none !important; animation: none; }
  .hoja-etiquetas { gap: 0; }
  .etiqueta { border: 0; border-radius: 0; break-inside: avoid; }
  .tam-50x25 .etiqueta, .tam-40x30 .etiqueta, .tam-60x40 .etiqueta { break-after: page; }
  .deco, .toast-container { display: none !important; }
}

/* Dentro del sistema: sin adornos animados ni chip del tema (solo en las pantallas de acceso) */
body.con-nav .deco { display: none !important; }
/* KPIs en dos columnas del teléfono: el monto no se parte en dos líneas */
@media (max-width: 575.98px) { .kpi .v { font-size: clamp(1rem, 5.2vw, 1.35rem); white-space: nowrap; } }

/* Factura de compra con datos del SII */
.prov-sii-card { position: relative; border: 1px solid #99f6e4; background: #f5f7ff; border-radius: 14px; padding: .7rem .8rem; margin-bottom: .6rem; }
.prov-sii-card .prov-cerrar { position: absolute; top: .5rem; right: .5rem; }
.sii-verif .sii-ok { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: .4rem .6rem; }
.sii-pend-prov .list-group-item, .sii-pend .list-group-item { font-size: .85rem; }
.sii-cuadra { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.sii-cuadra.ok { color: #0d9488; } .sii-cuadra.dif { color: #0f766e; }
[data-bs-theme="dark"] .prov-sii-card { background: rgba(20,184,166,.1); } [data-bs-theme="dark"] .sii-verif .sii-ok { background: rgba(245,158,11,.1); }

/* ---------- Menú «Más» del computador: panel por áreas ---------- */
.navbar .nav-item.dropdown .menu-mas { padding: 14px; border: 0; border-radius: 20px; min-width: 760px; margin-top: 10px !important;
  display: none; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
.navbar .nav-item.dropdown .menu-mas.show { display: grid; }
.menu-mas-col { min-width: 0; }
.menu-mas-tit { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8a8fa8; padding: 4px 10px 8px; border-bottom: 1px solid #e9efee; margin-bottom: 6px; }
.menu-mas-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: inherit; text-decoration: none; }
.menu-mas-item:hover, .menu-mas-item:focus { background: #f3f4fb; color: inherit; }
.menu-mas-item.active { background: #e6f6f4; }
.menu-mas-item .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; }
.menu-mas-item b { display: block; font-size: .88rem; font-weight: 700; line-height: 1.2; }
.menu-mas-item small { display: block; font-size: .74rem; color: #8a8fa8; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199.98px) { .navbar .nav-item.dropdown .menu-mas { min-width: 640px; } .menu-mas-item small { display: none; } }
[data-bs-theme="dark"] .menu-mas-tit { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .menu-mas-item:hover { background: rgba(255,255,255,.06); }

/* ---------- Pantallas de acceso: diseño fijo de la marca (sin tema del mes) ---------- */
.auth, .login-bg {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(245,158,11,.28), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(20,184,166,.45), transparent 60%),
    linear-gradient(140deg, #16133a 0%, #241f5c 55%, #2f2a7a 100%) !important;
}
.auth-hero { position: relative; overflow: hidden; }
.auth-hero:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.auth-hero-in { position: relative; }
.auth-h span { background: linear-gradient(90deg, #34d399, #5eead4) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; }
.auth-lista li { backdrop-filter: blur(4px); }
.auth-card { border-radius: 24px; padding: 36px 32px; box-shadow: 0 30px 80px rgba(8,6,30,.45); }
.auth-card h1 { letter-spacing: -.02em; }
/* Campos: el ícono, el texto y el botón se ven como un solo campo, con un único borde y foco */
.auth-card .input-group { border: 1.5px solid #e1e3ef; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; flex-wrap: nowrap; }
.auth-card .input-group:focus-within { border-color: #f472b6; box-shadow: 0 0 0 4px rgba(20,184,166,.14); }
.auth-card .input-group > .input-group-text, .auth-card .input-group > .form-floating > .form-control, .auth-card .input-group > .form-control,
.auth-card .input-group > .btn { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.auth-card .input-group > .input-group-text { padding-left: 16px; padding-right: 4px; color: #8a8fa8; }
.auth-card .input-group:focus-within > .input-group-text { color: #f472b6; }
.auth-card .input-group .form-floating > label { color: #8a8fa8; }
.auth-card .input-group .form-floating > .form-control:focus ~ label, .auth-card .input-group .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #f472b6; }
.auth-card .form-floating > .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset !important; }
.auth-card .btn-ver-clave { color: #8a8fa8; padding: 0 16px; }
.auth-card .btn-ver-clave:hover { color: #f472b6; }
@media (max-width: 991.98px) { .auth-card { padding: 30px 22px; } }

/* ---------- Notificaciones ---------- */
.notif-activar { border: 0; background: linear-gradient(135deg, #fff 0%, #fff5f5 100%); box-shadow: 0 6px 22px rgba(59,23,54,.07); }
.notif-activar.resaltar { box-shadow: 0 0 0 3px #fecaca, 0 6px 22px rgba(59,23,54,.07); }
.notif-estado { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 12px; background: #f3f6f5; font-size: .9rem; }
.notif-estado.bien { background: #ecfdf5; color: #065f46; } .notif-estado.mal { background: #fef2f2; color: #991b1b; } .notif-estado.info { background: #eff6ff; color: #1e40af; }
.notif-ios { margin-top: .8rem; padding: .7rem .9rem; border: 1px dashed #93c5fd; border-radius: 12px; font-size: .88rem; background: #f8fbff; }
.notif-qr { display: flex; gap: 1rem; align-items: center; }
.notif-qr .qr { width: 160px; height: 160px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 14px; padding: 8px; border: 1px solid #e2eae8; position: relative; }
.notif-qr .qr img, .notif-qr .qr canvas { width: 100% !important; height: auto !important; }
.notif-qr .qr.vencido img, .notif-qr .qr.vencido canvas { opacity: .12; }
.notif-qr .qr.vencido::after { content: 'Vencido'; position: absolute; font-weight: 800; color: #991b1b; }
#btnActivar.pulso { animation: notifPulso 1.6s ease-in-out infinite; }
@keyframes notifPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow: 0 0 0 10px rgba(220,38,38,0); } }
.notif-tabs .nav-link { font-weight: 600; }
.notif-ev { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; padding: .75rem 1rem; }
.notif-ev .ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: #eef4f3; color: #6b7086; font-size: 1.05rem; transition: all .15s; }
.notif-ev.on .ic { background: #fee2e2; color: #dc2626; }
.notif-ev .form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }
.notif-param { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .8rem; color: #5f6577; }
.notif-param input { width: 110px; }
.notif-guardar { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 5; text-align: center; margin-top: 1rem; }
@media (min-width: 992px) { .notif-guardar { bottom: 1rem; } }
.notif-guardar .btn { box-shadow: 0 10px 24px rgba(184,50,128,.35); }
.notif-bandeja .list-group-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem; }
.notif-bandeja .list-group-item.nueva { background: #fff7f7; border-left: 3px solid #dc2626; }
.notif-bandeja .ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: #e6f6f4; color: #b83280; }
.notif-bandeja .ic.ev-stock, .notif-bandeja .ic.ev-vencimientos, .notif-bandeja .ic.ev-ajuste { background: #fef3c7; color: #0f766e; }
.notif-bandeja .ic.ev-caja, .notif-bandeja .ic.ev-venta, .notif-bandeja .ic.ev-resumen, .notif-bandeja .ic.ev-devolucion, .notif-bandeja .ic.ev-descuento { background: #dcfce7; color: #15803d; }
.notif-bandeja .ic.ev-login, .notif-bandeja .ic.ev-usuarios, .notif-bandeja .ic.ev-plat { background: #f3e8ff; color: #7e22ce; }
.notif-bandeja .ic.ev-dte, .notif-bandeja .ic.ev-folios, .notif-bandeja .ic.ev-compra, .notif-bandeja .ic.ev-fiados { background: #fee2e2; color: #dc2626; }
.nv-campana .badge { font-size: .62rem; }
[data-bs-theme="dark"] .notif-activar { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .notif-estado, [data-bs-theme="dark"] .notif-ev .ic { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .notif-bandeja .list-group-item.nueva { background: rgba(220,38,38,.08); }
/* Actividad de la plataforma */
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.punto.vivo { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.act-dias .fila { display: grid; grid-template-columns: 78px 1fr auto; gap: .6rem; align-items: center; font-size: .84rem; padding: .18rem 0; }
.act-dias .barra { height: 10px; border-radius: 99px; background: #eef4f3; overflow: hidden; }
.act-dias .barra span { display: block; height: 100%; background: linear-gradient(90deg, #f472b6, #8b5cf6); border-radius: 99px; }
.act-dias .dia { color: #5f6577; }
/* Cargos y permisos */
.cargos-lista .list-group-item.active small { color: rgba(255,255,255,.8); }
.permisos-grupo { border: 1px solid #e9efee; border-radius: 14px; padding: .7rem .8rem; height: 100%; }
.permiso { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .3rem; border-radius: 10px; cursor: pointer; }
.permiso:hover { background: #f4f8f7; }
.permiso .form-check-input { margin-top: .2rem; flex: none; width: 1.15em; height: 1.15em; }
.permiso.fuera-plan b { color: #8b8fa3; }
[data-bs-theme="dark"] .permisos-grupo { border-color: rgba(255,255,255,.1); } [data-bs-theme="dark"] .permiso:hover { background: rgba(255,255,255,.05); }
/* Planes */
.plan-card { border: 1px solid #e2eae8; transition: transform .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(59,23,54,.1); }
.plan-card.destacado { border: 2px solid #b83280; }
.plan-card.actual { border: 2px solid #14b8a6; background: linear-gradient(180deg, #fffbeb, #fff 40%); }
[data-bs-theme="dark"] .plan-card.actual { background: rgba(245,158,11,.06); }
/* Soporte (superadmin) */
.sop { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100dvh - 210px); min-height: 480px; background: #fff; border-radius: 18px; box-shadow: 0 4px 18px rgba(59,23,54,.06); overflow: hidden; border: 1px solid #e9efee; }
.sop-lista { border-right: 1px solid #e9efee; display: flex; flex-direction: column; min-height: 0; }
.sop-filtros { padding: .8rem; border-bottom: 1px solid #e9efee; }
#sopTickets { overflow-y: auto; flex: 1; }
.sop-t { position: relative; padding: .7rem .9rem; } .sop-t.pend { background: #fffbeb; } .sop-t.active { background: #b83280 !important; }
.sop-punto { position: absolute; right: .8rem; bottom: .8rem; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; }
.sop-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sop-vacio { margin: auto; text-align: center; color: #8b8fa3; display: grid; gap: .3rem; padding: 2rem; } .sop-vacio i { font-size: 3rem; opacity: .5; }
.sop-cab { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid #e9efee; }
.sop-msgs { flex: 1; overflow-y: auto; padding: 1rem; background: #f5f6fb; display: flex; flex-direction: column; gap: .5rem; }
.sop-m { max-width: 75%; padding: .55rem .8rem; border-radius: 14px; background: #fff; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.05); white-space: pre-wrap; word-wrap: break-word; }
.sop-m.soporte { align-self: flex-end; background: #b83280; color: #fff; }
.sop-m small { display: block; font-size: .7rem; opacity: .65; margin-top: .2rem; } .sop-m audio { max-width: 260px; height: 36px; display: block; }
.sop-pie { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #e9efee; align-items: flex-end; } .sop-pie textarea { resize: none; }
.sop-nota { padding: 0 .9rem .6rem; color: #8b8fa3; }
@media (max-width: 991.98px) { .sop { grid-template-columns: 1fr; height: calc(100dvh - 230px); } .sop.con-chat .sop-lista { display: none; } .sop:not(.con-chat) .sop-chat { display: none; } }
[data-bs-theme="dark"] .sop { background: transparent; } [data-bs-theme="dark"] .sop-msgs { background: rgba(255,255,255,.03); } [data-bs-theme="dark"] .sop-m:not(.soporte) { background: rgba(255,255,255,.08); }
/* Chat de soporte: respuestas del asistente IA */
.sop-m.ia { background: #e6f6f4; border: 1px solid #e0e7ff; }
.sop-ia { display: block; font-size: .7rem; font-weight: 700; color: #b83280; margin-bottom: .15rem; }
[data-bs-theme="dark"] .sop-m.ia { background: rgba(20,184,166,.15); border-color: rgba(20,184,166,.3); } [data-bs-theme="dark"] .sop-ia { color: #5eead4; }
.sop-m.soporte .sop-ens { color: inherit; text-decoration: underline; }

/* Celular: en los indicadores el ícono va arriba y el monto ocupa todo el ancho (montos grandes como $1.158.824 se salían de la tarjeta) */
@media (max-width: 575.98px) {
  .kpi.flex-row { flex-direction: column !important; align-items: flex-start !important; gap: .45rem !important; }
  .kpi.flex-row .ic { width: 34px; height: 34px; font-size: 1.05rem; border-radius: 10px; }
  .kpi.flex-row > div { width: 100%; }
  .kpi .v { font-size: clamp(1rem, 5vw, 1.3rem); }
}

/* Franja de la demo pública */
.demo-franja { background: linear-gradient(90deg, #14b8a6, #f97316); color: #1f1300; font-size: .86rem; font-weight: 600; padding: .45rem 0; }
.demo-franja .container-xl { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.demo-franja span { flex: 1; min-width: 180px; }
.demo-franja .btn { padding: .2rem .8rem; font-size: .8rem; }

/* Guía de primeros pasos (inicio de empresas nuevas) */
.guia { border-top: 4px solid #f472b6; }
.guia-paso { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid #e1e9e7; border-radius: 12px; color: inherit; text-decoration: none; height: 100%; background: #fff; transition: border-color .15s, box-shadow .15s; }
.guia-paso:hover { border-color: #5eead4; box-shadow: 0 4px 12px rgba(184,50,128,.08); }
.guia-paso .ic { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e6f6f4; color: #b83280; }
.guia-paso b { display: block; font-size: .9rem; } .guia-paso small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.25; }
.guia-paso.hecho { background: #f6fef9; border-color: #bbf7d0; } .guia-paso.hecho .ic { background: #16a34a; color: #fff; } .guia-paso.hecho b { text-decoration: line-through; color: #6b7280; }

/* Configurar empresa: índice lateral, secciones con título y accesos a otros ajustes */
.ajustes-indice { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.ajustes-indice a { padding: .55rem .8rem; border-radius: 10px; color: #3b3f52; text-decoration: none; font-weight: 600; font-size: .92rem; }
.ajustes-indice a:hover { background: #e6f4f2; color: #3b1736; }
.ajustes-indice a i { width: 1.4rem; display: inline-block; color: #f472b6; }
.ajustes section { scroll-margin-top: 84px; }
.ajustes-tit { background: transparent; padding: .9rem 1rem .7rem; }
.ajustes-tit b { display: block; font-size: 1rem; } .ajustes-tit small { display: block; color: #6b7280; font-size: .82rem; margin-top: 2px; }
.ajustes-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; margin-bottom: .6rem; }
.ajustes-tile { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border: 1px solid #e1e9e7; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; height: 100%; transition: border-color .15s, box-shadow .15s; }
.ajustes-tile:hover { border-color: #5eead4; box-shadow: 0 4px 12px rgba(184,50,128,.08); }
.ajustes-tile .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: #e6f6f4; color: #b83280; font-size: 1.1rem; }
.ajustes-tile b { display: block; font-size: .92rem; } .ajustes-tile small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.3; }
.navbar-nav .nav-link { white-space: nowrap; }
.nv-nuevo { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
/* Pantallas medianas (992–1299 px): menú solo con íconos para que quepan Nuevo, chat, campana y empresa */
@media (min-width: 992px) and (max-width: 1299.98px) { .navbar .nv-txt { display: none; } .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; } }
@media (min-width: 1300px) and (max-width: 1439.98px) { .navbar .dropdown-toggle .text-truncate { max-width: 96px !important; } .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; } }
.dropdown-item .scs-n.scs-n-barra { position: static !important; float: right; margin-top: 2px; }

/* Formulario de producto: foto grande, banco de imágenes y margen */
.foto-grande { aspect-ratio: 1 / 1; border-radius: 16px; background: #f1f3f9; border: 1px dashed #cfd4e3; display: grid; place-items: center; overflow: hidden; }
.foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.foto-grande span { color: #9aa0b5; text-align: center; } .foto-grande span i { font-size: 2.6rem; display: block; } .foto-grande span small { font-weight: 600; }
.banco-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.banco-cats button { flex: none; border: 1px solid #e3e5ee; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: #3b3f52; }
.banco-cats button.on { background: #3b1736; border-color: #3b1736; color: #fff; }
.banco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.banco-sug { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.banco-item { border: 2px solid transparent; background: #fff; border-radius: 14px; padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(20,20,60,.08); transition: transform .1s, border-color .15s; }
.banco-item:hover { transform: translateY(-2px); border-color: #5eead4; } .banco-item.sel { border-color: #b83280; }
.banco-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.banco-item span { font-size: .72rem; font-weight: 600; padding: 4px 6px; color: #3b3f52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.margen { border-radius: 14px; padding: 12px 14px; background: #f4f8f7; color: #6b7280; font-size: .88rem; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; }
.margen > div small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; opacity: .8; }
.margen > div b { font-size: 1.35rem; font-weight: 800; color: inherit; font-variant-numeric: tabular-nums; }
.margen p { flex-basis: 100%; margin: 0; font-size: .8rem; }
.margen.bien { background: #ecfdf3; color: #166534; } .margen.bajo { background: #fffbeb; color: #92400e; } .margen.mal { background: #fef2f2; color: #b91c1c; }
.banco-item img { background: #eef0f7; }
/* Centro de informes */
.inf-tile em { display: inline-block; margin-top: 4px; font-style: normal; font-size: .74rem; font-weight: 700; color: #b83280; background: #e6f6f4; border-radius: 999px; padding: 1px 8px; }
.tabla-calor td { text-align: center; font-variant-numeric: tabular-nums; font-size: .8rem; } .tabla-calor td:first-child { text-align: left; font-weight: 600; }

/* Centro de informes: buscador, favoritos y tablas ordenables */
.inf-buscar { position: relative; width: 220px; max-width: 100%; } .inf-buscar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9499ad; font-size: .85rem; } .inf-buscar input { padding-left: 30px; }
.inf-col .inf-tile { padding-right: 2.4rem; }
.inf-fav { position: absolute; top: 6px; right: 12px; border: 0; background: none; color: #c3c6d4; padding: 2px 4px; line-height: 1; border-radius: 6px; }
.inf-fav:hover, .inf-fav:focus-visible { color: #14b8a6; } .inf-fav[aria-pressed="true"] { color: #14b8a6; }
.inf-tabla th.inf-ord { cursor: pointer; user-select: none; white-space: nowrap; } .inf-tabla th.inf-ord::after { content: '\2195'; opacity: .3; margin-left: 4px; font-size: .75em; }
.inf-tabla th.inf-ord[aria-sort="ascending"]::after { content: '\2191'; opacity: .9; } .inf-tabla th.inf-ord[aria-sort="descending"]::after { content: '\2193'; opacity: .9; }
.inf-tabla tfoot td { font-weight: 700; background: #f3f6f5; border-top: 2px solid #dfe2ee; white-space: nowrap; }
.inf-filtro { max-width: 260px; }
@media (max-width: 575px) { .inf-buscar { width: 100%; order: 3; } }
@media print { .inf-fav, .inf-filtro-wrap { display: none !important; } }

/* Opciones seleccionables (radio con tarjeta): tipo de promoción, tipo de producto, alcance */
.opcion { display: flex; gap: 10px; align-items: flex-start; height: 100%; margin: 0; padding: 11px 13px; border: 1.5px solid #dde7e5; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.opcion:hover { border-color: color-mix(in srgb, var(--a-primario) 45%, #dde7e5); }
.opcion .ic { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; background: #e6f4f2; color: var(--a-primario); }
.opcion b { display: block; font-size: .93rem; line-height: 1.25; }
.opcion small { display: block; color: #6b7280; font-size: .78rem; line-height: 1.3; margin-top: 2px; }
.opcion.compacta { align-items: center; padding: 8px 12px; }
.opcion.compacta .ic { width: 28px; height: 28px; font-size: .9rem; }
.btn-check:checked + .opcion { border-color: var(--a-primario); background: color-mix(in srgb, var(--a-primario) 6%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-primario) 14%, transparent); }
.btn-check:checked + .opcion .ic { background: var(--a-primario); color: #fff; }
.btn-check:focus-visible + .opcion { outline: 2px solid var(--a-primario); outline-offset: 2px; }
[data-bs-theme="dark"] .opcion { background: transparent; border-color: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .opcion .ic { background: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .btn-check:checked + .opcion { background: rgba(20,184,166,.12); }
/* Pasos numerados (explicaciones «¿cómo funciona?») */
.paso-num { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: .9rem; background: var(--a-primario); color: #fff; }
.sec-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--a-primario); color: #fff; font-size: .75rem; font-weight: 800; margin-right: 6px; vertical-align: 1px; }
.promo-resumen { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #14b8a6 9%, #fff); border: 1px solid color-mix(in srgb, #14b8a6 30%, #fff); font-size: .88rem; }
[data-bs-theme="dark"] .promo-resumen { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); }

/* Demo: módulos bloqueados se ven con candado (llevan a crear la cuenta) */
.demo-candado { opacity: .55; filter: grayscale(.7); }
.demo-candado:hover { opacity: .85; }
.menu-mas-item.demo-candado .bi-lock-fill, .nav-link.demo-candado .bi-lock-fill { color: #14b8a6; }

/* Sin internet: franja de aviso arriba, pantallas bloqueadas y menú atenuado (solo Vender y Caja siguen activos) */
.sinred-franja { position: sticky; top: 0; z-index: 1090; display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; background: #0f766e; color: #fff; font-size: .92rem; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.sinred-franja > .bi { font-size: 1.25rem; animation: sinred-pulso 1.6s ease-in-out infinite; }
.sinred-franja.volvio { background: #0f766e; }
.sinred-franja.volvio > .bi { animation: none; }
@keyframes sinred-pulso { 50% { opacity: .35; } }
.sinred-cortina { position: fixed; inset: 0; z-index: 1080; display: grid; place-items: center; padding: 16px; background: rgba(23, 20, 56, .92); backdrop-filter: blur(3px); color: #fff; text-align: center; }
.sinred-caja { max-width: 400px; width: 100%; }
body.sin-red .navbar-nav .nav-link:not([href$="pos.php"]):not([href$="caja.php"]),
body.sin-red .tabbar a, body.sin-red .tabbar .centro, body.sin-red .menu-mas-item, body.sin-red .modulo-tile,
body.sin-red .dropdown-menu .dropdown-item:not([href$="sin_conexion.php"]):not(button) { opacity: .4; filter: grayscale(1); }
body.sin-red .pos-modo.sinred-bloq { opacity: .35; filter: grayscale(1); }

/* =====================================================================
   CitaClaro: tarjetas de casas y artículos, galería, mapa y calendario
   ===================================================================== */
.prop-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.prop-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(59,23,54,.14); }
.prop-foto { position: relative; aspect-ratio: 4 / 3; background: #e6efed; }
.prop-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-estado { position: absolute; top: 10px; left: 10px; }
.prop-dest { position: absolute; top: 8px; right: 10px; color: #fbbf24; font-size: 1.2rem; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.prop-precio { position: absolute; left: 10px; bottom: 10px; background: rgba(59,23,54,.88); color: #fff; font-weight: 800; padding: 4px 10px; border-radius: 10px; font-size: .95rem; }
.prop-precio small { font-weight: 500; opacity: .8; }
.prop-datos { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: #4b5563; margin-top: 6px; }
.mapa { height: 320px; border-radius: 14px; z-index: 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.galeria .g-item { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #e6efed; }
.galeria .g-item img { width: 100%; height: 100%; object-fit: cover; }
.galeria .g-item .g-acc { position: absolute; inset: auto 6px 6px auto; display: flex; gap: 4px; }
.galeria .g-item .g-acc button { width: 30px; height: 30px; padding: 0; border-radius: 50% !important; }
.galeria .g-item.principal { outline: 3px solid #14b8a6; }
.galeria .g-subir { border: 2px dashed #b9cdc9; display: grid; place-items: center; color: #b83280; cursor: pointer; text-align: center; font-size: .85rem; font-weight: 600; }
.galeria .g-subir:hover { background: #eef7f5; }
.ficha-hero { position: relative; border-radius: 18px; overflow: hidden; background: #e6efed; aspect-ratio: 16 / 9; max-height: 440px; width: 100%; }
.ficha-hero img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
.ficha-mini img { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; cursor: pointer; opacity: .75; flex: none; }
.ficha-mini img.activa, .ficha-mini img:hover { opacity: 1; outline: 2px solid #b83280; }
.dato-grande { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; background: #f3f8f7; font-size: .8rem; color: #4b5563; }
.dato-grande b { font-size: 1.15rem; color: #1f2a2e; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: #eef4f3; border-radius: 16px; padding: 10px; min-height: 200px; }
.kanban-col.sobre { background: #dcefeb; outline: 2px dashed #b83280; }
.kanban-tit { font-weight: 800; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; }
.kanban-card { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(59,23,54,.1); cursor: grab; display: block; color: inherit; text-decoration: none; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.arrastrando { opacity: .5; }
.cal-dia { border-left: 4px solid var(--c); }
.recibo { max-width: 760px; margin: auto; }
@media print { .recibo { max-width: none; } .ay-btn, .scs-burbuja { display: none !important; } }

/* ===================== CitaClaro: agenda, avatares, servicios ===================== */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; object-fit: cover; flex: 0 0 auto; letter-spacing: 0; }
.alerta-alergia { background: #fef2f2; color: #991b1b; border-radius: 10px; padding: 6px 10px; font-size: .85rem; font-weight: 600; }
.ag-wrap { overflow: auto; max-height: calc(100vh - 210px); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(59,23,54,.08); }
.ag { display: grid; position: relative; min-width: 100%; }
.ag-cab { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #f1e6ec; padding: 8px 6px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ag-cab b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cab small { display: block; color: #8b8fa3; font-size: .72rem; }
.ag-horas { position: sticky; left: 0; z-index: 4; background: #fff; border-right: 1px solid #f1e6ec; }
.ag-esq { position: sticky; left: 0; top: 0; z-index: 6; background: #fff; border-bottom: 1px solid #f1e6ec; border-right: 1px solid #f1e6ec; }
.ag-hora { position: absolute; right: 6px; transform: translateY(-50%); font-size: .72rem; color: #8b8fa3; font-variant-numeric: tabular-nums; }
.ag-col { position: relative; border-right: 1px solid #f6eef2; }
.ag-linea { position: absolute; left: 0; right: 0; border-top: 1px solid #f6eef2; }
.ag-linea.media { border-top-style: dashed; border-top-color: #faf3f6; }
.ag-fuera { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #f7f4f6, #f7f4f6 6px, #fbf9fa 6px, #fbf9fa 12px); }
.ag-libre { position: absolute; left: 0; right: 0; display: block; z-index: 1; }
.ag-libre:hover { background: color-mix(in srgb, var(--pc, #b83280) 10%, transparent); }
.ag-libre:hover::after { content: '+ ' attr(data-h); position: absolute; left: 6px; top: 2px; font-size: .72rem; font-weight: 700; color: var(--pc, #b83280); }
.ag-cita { position: absolute; left: 4px; right: 4px; z-index: 2; border-radius: 10px; padding: 4px 8px; font-size: .78rem; line-height: 1.25; overflow: hidden; text-decoration: none; color: #1f2333;
  background: color-mix(in srgb, var(--pc) 14%, #fff); border-left: 4px solid var(--pc); box-shadow: 0 1px 2px rgba(59,23,54,.08); }
.ag-cita:hover { box-shadow: 0 6px 16px rgba(59,23,54,.15); z-index: 3; color: #1f2333; }
.ag-cita b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-cita span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #555a70; }
.ag-cita.pendiente { background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 6px, #fffbeb 6px, #fffbeb 12px); border-left-color: #f59e0b; }
.ag-cita.atendida { opacity: .7; }
.ag-cita.no_asistio { background: #fef2f2; border-left-color: #dc2626; text-decoration: line-through; opacity: .75; }
.ag-bloq { position: absolute; left: 4px; right: 4px; z-index: 2; border-radius: 10px; padding: 4px 8px; font-size: .75rem; color: #6b7280; background: repeating-linear-gradient(45deg, #eceaf0, #eceaf0 5px, #f5f4f7 5px, #f5f4f7 10px); overflow: hidden; }
.ag-ahora { position: absolute; left: 0; right: 0; border-top: 2px solid #e11d48; z-index: 4; pointer-events: none; }
.ag-ahora::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #e11d48; }
.dias-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dias-strip a { flex: 0 0 auto; min-width: 54px; text-align: center; padding: 6px 4px; border-radius: 14px; background: #fff; color: #3b3f52; text-decoration: none; box-shadow: 0 1px 2px rgba(59,23,54,.06); font-size: .75rem; }
.dias-strip a b { display: block; font-size: 1.05rem; }
.dias-strip a.activo { background: var(--c); color: #fff; }
.dias-strip a.hoy:not(.activo) { box-shadow: inset 0 0 0 2px var(--c); }
.serv-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #f3eaef; text-decoration: none; color: inherit; }
.serv-item:last-child { border-bottom: 0; }
.serv-item:hover { background: #fdf8fb; color: inherit; }
.serv-foto { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.4rem; }
.hora-btn { border: 1px solid #ead9e2; background: #fff; border-radius: 12px; padding: 8px 0; font-weight: 600; font-variant-numeric: tabular-nums; width: 100%; color: #3b3f52; }
.hora-btn:hover { border-color: var(--c); color: var(--c); }
.hora-btn.sel, .btn-check:checked + .hora-btn { background: var(--c); border-color: var(--c); color: #fff; }
.horas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.chip-serv { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); border-radius: 999px; padding: 4px 10px; font-size: .82rem; font-weight: 600; }
.horario-dia { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3eaef; }
.horario-dia:last-child { border-bottom: 0; }
.foto-ficha { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }

/* =====================================================================
   Diseño amigable CitaClaro (v4) — propio, distinto de StockClaro:
   barra lateral clara, letra redondeada, colores pastel y celular
   con barra flotante. Va al final para mandar sobre lo anterior.
   ===================================================================== */
:root {
  --rosa: #f0648c; --rosa-o: #d9466f; --lila: #8b7cf6; --menta: #22b39a; --durazno: #ff9f73; --sol: #f7b733; --cielo: #4aa8f0;
  --rosa-p: #ffe6ee; --lila-p: #eeebff; --menta-p: #dcf5ef; --durazno-p: #ffece3; --sol-p: #fff3d6; --cielo-p: #e2f1fd;
  --tinta: #3a2a3f; --suave: #8a7a8e; --linea: #f3e6ea; --a-fondo: #fff8f5;
  --a-primario: var(--rosa); --a-acento: var(--menta); --a-oscuro: var(--tinta);
  --c: var(--rosa); --sombra: 0 6px 22px rgba(240,100,140,.08), 0 1px 2px rgba(58,42,63,.05);
  --bs-body-color: var(--tinta); --bs-link-color: var(--rosa-o); --bs-link-color-rgb: 217,70,111; --bs-link-hover-color: var(--rosa);
  --bs-primary: var(--rosa); --bs-primary-rgb: 240,100,140;
}
body { font-family: 'Nunito', system-ui, -apple-system, sans-serif; color: var(--tinta); background: var(--a-fondo); font-size: 15.5px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-header, .kpi .v, .offcanvas-title, .barra-titulo { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600 !important; letter-spacing: 0; }
.fw-bold, b, strong { font-weight: 800; }
.text-secondary, .text-muted { color: var(--suave) !important; }
body[data-pag="index"], body[data-pag="empresas"], body[data-pag="clientes"], body[data-pag="cliente"] { --c: var(--rosa); }
body[data-pag="citas"], body[data-pag="cita"], body[data-pag="cita_form"], body[data-pag="perfil"], body[data-pag="plataforma"] { --c: var(--lila); }
body[data-pag="agenda"], body[data-pag="profesionales"], body[data-pag="profesional_form"], body[data-pag="comisiones"] { --c: var(--menta); }
body[data-pag="servicios"], body[data-pag="servicio_form"], body[data-pag="portal"], body[data-pag="espera"], body[data-pag="bitacora"] { --c: var(--durazno); }
body[data-pag="gastos"] { --c: #ef6b6b; }
body[data-pag="informes"], body[data-pag="usuarios"], body[data-pag="empresa"] { --c: var(--cielo); }

/* Colores pastel reutilizables (íconos del menú y tarjetas) */
.pc-rosa, .pc-danger { background: var(--rosa-p); color: var(--rosa-o); }
.pc-lila, .pc-primary { background: var(--lila-p); color: #6a5ae0; }
.pc-menta, .pc-success { background: var(--menta-p); color: #148a76; }
.pc-durazno { background: var(--durazno-p); color: #e2703f; }
.pc-sol, .pc-warning { background: var(--sol-p); color: #c88a0c; }
.pc-cielo, .pc-info { background: var(--cielo-p); color: #2a86cc; }

/* Barra lateral (computador) */
.lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 256px; z-index: 1035; flex-direction: column; gap: 6px; padding: 20px 14px 16px; background: #fff; border-right: 1px solid var(--linea); overflow-y: auto; scrollbar-width: none; }
@media (min-width: 992px) { body.con-lateral { padding-left: 256px; } }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; color: var(--tinta); }
.lateral-marca img { border-radius: 13px; box-shadow: 0 6px 14px rgba(240,100,140,.3); }
.lateral-marca span { font-family: 'Fredoka', sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.05; }
.lateral-marca small { display: block; font-family: 'Nunito', sans-serif; font-size: .72rem; font-weight: 700; color: var(--suave); }
.lateral-nueva { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 4px 10px; padding: 12px; border-radius: 16px; font-weight: 800; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--rosa), var(--durazno)); box-shadow: 0 10px 22px rgba(240,100,140,.32); transition: transform .15s ease, box-shadow .15s ease; }
.lateral-nueva:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(240,100,140,.4); }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.lateral-tit { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #b9a9b9; padding: 14px 12px 4px; }
.lateral-item { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 14px; color: #5d4d62; font-weight: 700; text-decoration: none; }
.lateral-item .ic { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; transition: transform .2s ease; }
.lateral-item:hover { background: #fff3f6; color: var(--tinta); }
.lateral-item:hover .ic { transform: rotate(-8deg) scale(1.08); }
.lateral-item.active { background: var(--rosa-p); color: var(--rosa-o); }
.lateral-item.active .ic { background: var(--rosa); color: #fff; box-shadow: 0 6px 14px rgba(240,100,140,.35); }
.lateral-portal { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, var(--lila-p), var(--rosa-p)); color: var(--tinta); text-decoration: none; font-size: .85rem; }
.lateral-portal > span:first-child { font-size: 1.5rem; }
.lateral-portal small { display: block; color: var(--suave); font-weight: 600; }
.lateral-portal:hover { color: var(--tinta); filter: saturate(1.2); }

/* Barra superior clara */
.barra-sup { background: rgba(255,248,245,.86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); padding: 10px 0 calc(10px); padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid transparent; z-index: 1030; }
.barra-marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); font-family: 'Fredoka', sans-serif; font-size: 1.3rem; font-weight: 600; }
.barra-marca img { border-radius: 11px; }
.barra-titulo { font-size: 1.15rem; color: var(--suave); }
.btn-redondo { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: #fff; color: var(--tinta); box-shadow: var(--sombra); font-size: 1.15rem; text-decoration: none; }
.btn-redondo:hover { color: var(--rosa); transform: translateY(-1px); }
.barra-yo { display: flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; box-shadow: var(--sombra); color: var(--tinta); }
.barra-yo b { font-size: .9rem; } .barra-yo small { font-size: .74rem; color: var(--suave); }
.barra-yo::after { margin-left: 2px; color: var(--suave); }
.avatar-yo { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; background: linear-gradient(135deg, var(--lila), var(--rosa)); }
@media (max-width: 767.98px) { .barra-yo { padding: 4px; } .barra-yo::after { display: none; } }
.tema-chip { background: var(--sol-p); color: var(--tinta); }
.demo-franja { background: linear-gradient(90deg, var(--lila), var(--rosa)); }

/* Títulos de página */
main h1 > .bi:first-child { border-radius: 16px; background: color-mix(in srgb, var(--c) 18%, #fff); color: var(--c) !important; box-shadow: none; }

/* Tarjetas */
.card { border-radius: 22px; box-shadow: var(--sombra); border: 1px solid #fbeef1; }
.card-header { border-bottom: 1px dashed var(--linea); font-weight: 600; }
.card-header:first-child { border-radius: 22px 22px 0 0; }
.kpi { border-top: 0; border-radius: 22px; }
.kpi .ic, .ic-box { border-radius: 15px; }
.kpi .l { text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--suave); font-weight: 700; }
.kpi .v { font-weight: 600; }
.lista-item { border-bottom: 1px dashed var(--linea); }
a.lista-item:hover { background: #fff6f8; }
.lista-item .ic { border-radius: 14px; }
.vacio > i { border-radius: 26px; }

/* Botones */
.btn { font-weight: 800; }
.btn-primary { --bs-btn-bg: var(--rosa); --bs-btn-border-color: var(--rosa); --bs-btn-hover-bg: var(--rosa-o); --bs-btn-hover-border-color: var(--rosa-o); --bs-btn-active-bg: var(--rosa-o); background-image: linear-gradient(135deg, var(--rosa), #f78aa7); box-shadow: 0 6px 16px rgba(240,100,140,.28); }
.btn-acento { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background-image: linear-gradient(135deg, var(--rosa), var(--durazno)); color: #fff; box-shadow: 0 8px 20px rgba(240,100,140,.3); }
.btn-outline-primary { --bs-btn-color: var(--rosa-o); --bs-btn-border-color: #f6b3c6; --bs-btn-hover-bg: var(--rosa-p); --bs-btn-hover-color: var(--rosa-o); --bs-btn-hover-border-color: #f6b3c6; --bs-btn-active-bg: var(--rosa-p); --bs-btn-active-color: var(--rosa-o); }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .22rem rgba(240,100,140,.18); }
.text-primary { color: var(--rosa-o) !important; }
.bg-primary { background-color: var(--rosa) !important; }
.bg-primary-subtle { background-color: var(--lila-p) !important; }
.form-control, .form-select { border-radius: 14px; border-color: #f0dfe4; background-color: #fffdfc; }
.form-check-input:checked { background-color: var(--rosa); border-color: var(--rosa); }
.nav-pills .nav-link { color: #6f5f73; }
.nav-pills .nav-link.active { background: var(--c); box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
.progress-bar.bg-success { background: linear-gradient(90deg, var(--menta), #6ee7c8) !important; }

/* Tablas: cabecera pastel en vez de bloque de color */
.table > thead > tr > th, .table > thead.table-light > tr > th { background: color-mix(in srgb, var(--c) 13%, #fff); color: color-mix(in srgb, var(--c) 70%, var(--tinta)); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.table-hover > tbody > tr:hover > * { background-color: #fff6f8; }

/* Avisos redondos sin barra lateral dura */
.alert { border-left: 0; border-radius: 18px; }
.alert-warning { background: var(--sol-p); color: #8a5d00; }
.alert-info { background: var(--cielo-p); color: #1f6597; }
.alert-success { background: var(--menta-p); color: #0e6b5b; }
.alert-danger { background: var(--rosa-p); color: #b23157; }
.badge { border-radius: 999px; padding: .38em .7em; }

/* Menús desplegables y hojas */
.dropdown-menu { border-radius: 18px; }
.dropdown-item { border-radius: 12px; font-weight: 600; }
.dropdown-item.active, .dropdown-item:active { background: var(--rosa-p); color: var(--rosa-o); }
.hoja.offcanvas-bottom { border-radius: 28px 28px 0 0; }
.hoja .offcanvas-header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: #ead9de; }
.hoja .offcanvas-header { position: relative; padding-top: 22px; }
.accion-grande { border: 0 !important; border-radius: 20px; background: #fff8f5; }
.accion-grande:hover { background: #fff0f3; }
.accion-grande .ic { border-radius: 16px; }
.modulo-tile .ic { border-radius: 18px; }

/* Barra inferior flotante (celular) */
.tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border: 0; border-radius: 26px; padding: 6px; background: #fff; box-shadow: 0 12px 34px rgba(58,42,63,.16); align-items: center; }
.tabbar a { color: #a898ab; font-size: .7rem; font-weight: 800; border-radius: 18px; padding: 7px 0; }
.tabbar a.active { color: var(--rosa-o); background: var(--rosa-p); }
.tabbar a.active i::before { transform: scale(1.1); }
.tabbar .centro { width: 58px; height: 58px; margin-top: -30px; border: 5px solid var(--a-fondo); background: linear-gradient(135deg, var(--rosa), var(--durazno)); box-shadow: 0 10px 22px rgba(240,100,140,.45); }
body.con-nav { padding-bottom: 110px; }
@media (min-width: 992px) { body.con-nav { padding-bottom: 40px; } }

/* Inicio: saludo, accesos y tarjetas pastel */
.hola { position: relative; overflow: hidden; border-radius: 28px; padding: 22px 22px 20px; background: linear-gradient(135deg, #ffe1ea 0%, #ffeede 55%, #efeaff 100%); }
.hola::after { content: ""; position: absolute; right: -40px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.45); }
.hola h1 { font-size: 1.55rem; margin: 0; position: relative; z-index: 1; }
.hola .sub { color: #7a6a7e; font-weight: 600; position: relative; z-index: 1; }
.hola-sig { position: relative; z-index: 1; margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.8); text-decoration: none; color: var(--tinta); }
.hola-sig:hover { color: var(--tinta); background: #fff; }
.hola-sig .hora { min-width: 64px; text-align: center; padding: 8px 6px; border-radius: 16px; background: var(--rosa); color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.2rem; line-height: 1; }
.hola-sig .hora small { display: block; font-family: 'Nunito', sans-serif; font-size: .66rem; font-weight: 700; opacity: .9; margin-top: 3px; }
.hola-sig .flecha { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa-p); color: var(--rosa-o); flex-shrink: 0; }
.hola-libre { position: relative; z-index: 1; margin-top: 14px; font-weight: 700; color: #7a6a7e; }
.atajo { border: 0; border-radius: 24px; padding: 16px 6px 14px; box-shadow: none; font-weight: 800; font-size: .86rem; color: var(--tinta); }
.atajo i { width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,.75) !important; font-size: 1.5rem; }
.atajo.pc-rosa i { color: var(--rosa-o) !important; } .atajo.pc-lila i { color: #6a5ae0 !important; } .atajo.pc-sol i { color: #c88a0c !important; } .atajo.pc-menta i { color: #148a76 !important; }
.atajo:hover { color: var(--tinta); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 10px 24px rgba(58,42,63,.08); }
.kpi.pc-rosa, .kpi.pc-lila, .kpi.pc-menta, .kpi.pc-cielo, .kpi.pc-sol, .kpi.pc-durazno { border: 0; box-shadow: none; color: var(--tinta) !important; }
.kpi[class*="pc-"] .ic { background: rgba(255,255,255,.75) !important; }
.kpi[class*="pc-"] .l { color: #6f5f73; }

/* Ingreso y registro: fondo claro con burbujas */
.auth, .login-bg { background: radial-gradient(circle at 12% 18%, #ffd3df 0, transparent 34%), radial-gradient(circle at 88% 12%, #e4ddff 0, transparent 32%), radial-gradient(circle at 80% 92%, #ffe2cf 0, transparent 36%), #fff8f5 !important; }
.auth-hero { color: var(--tinta) !important; }
.auth-hero:before { display: none; }
.auth-hero .auth-p, .auth-hero .auth-lista span { color: #6f5f73 !important; }
.auth-h span { background: linear-gradient(135deg, var(--rosa), var(--durazno)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.auth-card { border-radius: 30px !important; box-shadow: 0 24px 60px rgba(240,100,140,.14) !important; border: 1px solid #fbe7ed; }
.auth-lista i { background: var(--rosa-p) !important; color: var(--rosa-o) !important; }
.auth-lista li:nth-child(2) i { background: var(--lila-p) !important; color: #6a5ae0 !important; }
.auth-lista li:nth-child(3) i { background: var(--menta-p) !important; color: #148a76 !important; }
.auth-manual { color: var(--rosa-o) !important; }
.auth-card .input-group { border-radius: 16px; }

/* Agenda: bloques más suaves */
.ag-cita { border-radius: 12px; }
.dias-strip a { border-radius: 16px; }
.dias-strip a.activo { background: var(--rosa); border-color: var(--rosa); }
.hora-btn { border-radius: 14px; }
.hora-btn.sel, .btn-check:checked + .hora-btn { background: var(--rosa); border-color: var(--rosa); }

/* Celular: más aire, letras y botones más grandes */
@media (max-width: 991.98px) {
  main.container-xl { padding-left: 16px; padding-right: 16px; }
  .card { border-radius: 24px; }
  .lista-item { padding: 14px 16px; }
  .btn:not(.btn-sm) { padding-top: .6rem; padding-bottom: .6rem; }
  .hola { margin-left: -4px; margin-right: -4px; }
  .atajo { border-radius: 22px; font-size: .8rem; padding: 14px 4px 12px; }
  .atajo i { width: 48px; height: 48px; font-size: 1.4rem; }
}
@media print { .lateral, .barra-sup { display: none !important; } body.con-lateral { padding-left: 0 !important; } }
/* Elegir el negocio de ejemplo en demo.php */
.demo-rubros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-rubro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px; border-radius: 20px; border: 2px solid #f6e3e9; background: #fffaf8; cursor: pointer; transition: all .15s ease; height: 100%; }
.demo-rubro .emo { font-size: 1.8rem; line-height: 1.2; }
.demo-rubro b { font-size: .86rem; line-height: 1.15; }
.demo-rubro small { font-size: .7rem; color: var(--suave); line-height: 1.2; }
.demo-rubro:hover { border-color: #f6b3c6; transform: translateY(-2px); }
.btn-check:checked + .demo-rubro { border-color: var(--rosa); background: var(--rosa-p); box-shadow: 0 8px 20px rgba(240,100,140,.18); }
.btn-check:focus-visible + .demo-rubro { outline: 2px solid var(--rosa); outline-offset: 2px; }
@media (max-width: 991.98px) { main > a.alert { padding: .7rem .9rem; font-size: .9rem; border-radius: 18px; margin-bottom: .6rem; } main > a.alert > .bi:first-child { font-size: 1.1rem !important; } }
.cobro-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: var(--sombra); text-decoration: none; color: var(--tinta); border: 2px dashed #bfe9dd; }
.cobro-link:hover { color: var(--tinta); border-color: var(--menta); transform: translateY(-2px); }
.cobro-link .ic { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.cobro-link small { display: block; color: var(--suave); }
.cal-feed, .cal-ext { padding: 14px 0; border-bottom: 1px dashed var(--linea); }
.cal-feed:last-child, .cal-ext:last-of-type { border-bottom: 0; }
/* Tarjeta de sellos y estrellas */
.sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 6px 0 10px; }
.sellos span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed #f2c6d3; color: #c3b0bd; font-weight: 800; font-size: .8rem; }
.sellos span.on { background: linear-gradient(135deg, var(--rosa), var(--durazno)); border: 0; color: #fff; box-shadow: 0 4px 10px rgba(240,100,140,.3); }
.sellos.chica span { width: 22px; height: 22px; font-size: .62rem; border-width: 1.5px; }
.estrellas { color: #f7b733; letter-spacing: 1px; white-space: nowrap; }

/* Elegir diseño (Configurar empresa) */
.diseno-op { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 20px; border: 2px solid var(--linea); cursor: pointer; height: 100%; background: #fff; transition: all .15s ease; }
.diseno-op:hover { transform: translateY(-2px); }
.btn-check:checked + .diseno-op { border-color: var(--rosa); box-shadow: 0 8px 20px color-mix(in srgb, var(--rosa) 22%, transparent); }
.diseno-op .muestra { display: flex; height: 54px; border-radius: 14px; overflow: hidden; margin-bottom: 8px; }
.diseno-op .muestra i { flex: 1; background: var(--m1); } .diseno-op .muestra i:nth-child(2) { background: var(--m2); } .diseno-op .muestra i:nth-child(3) { background: var(--m3); }
.diseno-op small { color: var(--suave); }

/* =====================================================================
   Diseño «Barbería»: carbón, dorado y crema. Menú oscuro, letras firmes.
   ===================================================================== */
body.diseno-barber {
  --rosa: #c8963e; --rosa-o: #9a6e24; --rosa-p: #f4e9d4; --durazno: #e0b25c; --lila: #6b6258; --lila-p: #ece6dc; --menta: #3f8f6f; --menta-p: #e0efe7;
  --sol-p: #f6edd9; --cielo: #4d7ea8; --cielo-p: #e3ebf2; --durazno-p: #f6e8d6;
  --tinta: #1f1d24; --suave: #7a7268; --linea: #e6dfd3; --a-fondo: #f4f1ec;
  --sombra: 0 4px 16px rgba(31,29,36,.07); --bs-link-color: #9a6e24; --bs-link-color-rgb: 154,110,36; --bs-primary-rgb: 200,150,62;
}
body.diseno-barber h1, body.diseno-barber h2, body.diseno-barber h3, body.diseno-barber h4, body.diseno-barber h5, body.diseno-barber .h4, body.diseno-barber .h5, body.diseno-barber .h6,
body.diseno-barber .card-header, body.diseno-barber .kpi .v, body.diseno-barber .offcanvas-title, body.diseno-barber .barra-titulo, body.diseno-barber .lateral-marca span, body.diseno-barber .barra-marca { font-family: 'Oswald', 'Nunito', sans-serif; letter-spacing: .02em; }
body.diseno-barber .lateral { background: #1f1d24; border-right: 0; }
body.diseno-barber .lateral-marca, body.diseno-barber .lateral-marca span { color: #f3ece0; }
body.diseno-barber .lateral-marca small { color: #9d9488; font-family: 'Nunito', sans-serif; letter-spacing: 0; }
body.diseno-barber .lateral-tit { color: #8a8174; }
body.diseno-barber .lateral-item { color: #d8d0c4; }
body.diseno-barber .lateral-item .ic { background: rgba(255,255,255,.07) !important; color: #e0b25c !important; }
body.diseno-barber .lateral-item:hover { background: rgba(255,255,255,.06); color: #fff; }
body.diseno-barber .lateral-item.active { background: rgba(200,150,62,.16); color: #f0c873; }
body.diseno-barber .lateral-item.active .ic { background: #c8963e !important; color: #1f1d24 !important; box-shadow: none; }
body.diseno-barber .lateral-nueva { background: linear-gradient(135deg, #c8963e, #e0b25c); color: #1f1d24; box-shadow: 0 8px 18px rgba(200,150,62,.3); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; }
body.diseno-barber .lateral-portal { background: rgba(255,255,255,.06); color: #f3ece0; }
body.diseno-barber .lateral-portal small { color: #9d9488; }
body.diseno-barber .barra-sup { background: rgba(244,241,236,.9); }
@media (max-width: 991.98px) { body.diseno-barber .barra-sup { background: #1f1d24; } body.diseno-barber .barra-marca { color: #f3ece0; } body.diseno-barber .btn-redondo, body.diseno-barber .barra-yo { background: #2c2a32; color: #f3ece0; box-shadow: none; } }
body.diseno-barber .avatar-yo { background: linear-gradient(135deg, #c8963e, #9a6e24); color: #1f1d24; }
body.diseno-barber .card { border-radius: 14px; border: 1px solid #ebe4d8; }
body.diseno-barber .card-header:first-child { border-radius: 14px 14px 0 0; }
body.diseno-barber .btn-primary { background-image: linear-gradient(135deg, #c8963e, #d9a84c); color: #1f1d24; --bs-btn-color: #1f1d24; --bs-btn-hover-color: #1f1d24; box-shadow: 0 6px 14px rgba(200,150,62,.25); }
body.diseno-barber .btn-acento { background-image: linear-gradient(135deg, #1f1d24, #3a3640); color: #f0c873; }
body.diseno-barber .btn:not(.input-group .btn):not(.rounded-circle) { border-radius: 10px; }
body.diseno-barber .hola { background: linear-gradient(135deg, #1f1d24, #3a3640); color: #f3ece0; border-radius: 18px; }
body.diseno-barber .hola::after { background: rgba(200,150,62,.12); }
body.diseno-barber .hola .sub, body.diseno-barber .hola-libre { color: #c9bfb1; }
body.diseno-barber .hola-sig { background: rgba(255,255,255,.08); color: #f3ece0; }
body.diseno-barber .hola-sig .text-secondary { color: #b3a99b !important; }
body.diseno-barber .hola-sig .hora { background: #c8963e; color: #1f1d24; }
body.diseno-barber .hola-sig .flecha { background: rgba(200,150,62,.2); color: #f0c873; }
body.diseno-barber .atajo { border-radius: 14px; background: #fff !important; border: 1px solid #ebe4d8; }
body.diseno-barber .atajo i { background: #f4e9d4 !important; color: #9a6e24 !important; border-radius: 12px; }
body.diseno-barber .kpi[class*="pc-"] { background: #fff !important; border: 1px solid #ebe4d8; border-left: 4px solid #c8963e; }
body.diseno-barber .kpi[class*="pc-"] .ic { background: #f4e9d4 !important; color: #9a6e24 !important; }
body.diseno-barber .tabbar { background: #1f1d24; box-shadow: 0 12px 30px rgba(0,0,0,.3); border-radius: 18px; }
body.diseno-barber .tabbar a { color: #9d9488; border-radius: 12px; }
body.diseno-barber .tabbar a.active { background: rgba(200,150,62,.18); color: #f0c873; }
body.diseno-barber .tabbar .centro { background: linear-gradient(135deg, #c8963e, #e0b25c); color: #1f1d24; border-color: var(--a-fondo); box-shadow: 0 8px 18px rgba(200,150,62,.4); }
body.diseno-barber .demo-franja { background: linear-gradient(90deg, #1f1d24, #4a3f2c); }
body.diseno-barber .sellos span.on { background: linear-gradient(135deg, #c8963e, #e0b25c); }
body.diseno-barber .auth, body.diseno-barber .login-bg { background: radial-gradient(circle at 15% 15%, #e9dcc3 0, transparent 35%), #f4f1ec !important; }

/* =====================================================================
   Diseño «Spa natural»: salvia, arena y terracota. Sereno y elegante.
   ===================================================================== */
body.diseno-spa {
  --rosa: #5f8f78; --rosa-o: #47715e; --rosa-p: #e3eee8; --durazno: #c9805f; --durazno-p: #f5e6dc; --lila: #9b8bb0; --lila-p: #eeeaf2; --menta: #5f8f78; --menta-p: #e3eee8;
  --sol-p: #f4ecd9; --cielo: #6b93a8; --cielo-p: #e5eef2;
  --tinta: #33403a; --suave: #7d8a83; --linea: #e6dfd3; --a-fondo: #f6f3ee;
  --sombra: 0 2px 14px rgba(51,64,58,.06); --bs-link-color: #47715e; --bs-link-color-rgb: 71,113,94; --bs-primary-rgb: 95,143,120;
}
body.diseno-spa h1, body.diseno-spa h2, body.diseno-spa h3, body.diseno-spa .h4, body.diseno-spa .h5, body.diseno-spa .card-header, body.diseno-spa .kpi .v, body.diseno-spa .offcanvas-title,
body.diseno-spa .barra-titulo, body.diseno-spa .lateral-marca span, body.diseno-spa .barra-marca { font-family: 'Fraunces', Georgia, serif; font-weight: 600 !important; }
body.diseno-spa .lateral { background: #fbf9f5; border-right: 1px solid #ebe5da; }
body.diseno-spa .lateral-item.active { background: #e3eee8; color: #3d6452; }
body.diseno-spa .lateral-item.active .ic { background: #5f8f78; box-shadow: none; }
body.diseno-spa .lateral-item:hover { background: #f1ede5; }
body.diseno-spa .lateral-nueva { background: #5f8f78; box-shadow: 0 8px 18px rgba(95,143,120,.25); }
body.diseno-spa .lateral-portal { background: linear-gradient(135deg, #e3eee8, #f5e6dc); }
body.diseno-spa .avatar-yo { background: linear-gradient(135deg, #5f8f78, #c9805f); }
body.diseno-spa .card { border: 1px solid #ebe5da; box-shadow: none; border-radius: 24px; }
body.diseno-spa .btn-primary { background-image: none; background-color: #5f8f78; box-shadow: none; }
body.diseno-spa .btn-acento { background-image: linear-gradient(135deg, #5f8f78, #7fa892); box-shadow: 0 6px 16px rgba(95,143,120,.25); }
body.diseno-spa .hola { background: linear-gradient(135deg, #e3eee8 0%, #f3ebe0 60%, #f5e6dc 100%); }
body.diseno-spa .hola-sig .hora { background: #c9805f; }
body.diseno-spa .hola-sig .flecha { background: #f5e6dc; color: #a8603f; }
body.diseno-spa .atajo i { color: #47715e !important; }
body.diseno-spa .atajo.pc-sol i { color: #a8603f !important; }
body.diseno-spa .tabbar a.active { background: #e3eee8; color: #3d6452; }
body.diseno-spa .tabbar .centro { background: linear-gradient(135deg, #5f8f78, #c9805f); box-shadow: 0 8px 18px rgba(95,143,120,.35); }
body.diseno-spa .demo-franja { background: linear-gradient(90deg, #5f8f78, #c9805f); }
body.diseno-spa .sellos span.on { background: linear-gradient(135deg, #5f8f78, #c9805f); }
body.diseno-spa .table > thead > tr > th { background: #eef3ef; color: #47715e; }
body.diseno-spa .auth, body.diseno-spa .login-bg { background: radial-gradient(circle at 12% 18%, #dcebe2 0, transparent 34%), radial-gradient(circle at 88% 85%, #f2dccd 0, transparent 34%), #f6f3ee !important; }
body.diseno-barber .ay-btn { background: linear-gradient(135deg, #1f1d24, #3a3640) !important; color: #f0c873 !important; }
body.diseno-barber .ay-btn .ay-q { color: #9a6e24 !important; }
body.diseno-spa .ay-btn { background: linear-gradient(135deg, #5f8f78, #c9805f) !important; }
body.diseno-spa .ay-btn .ay-q { color: #47715e !important; }
.demo-disenos { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; margin-left: auto; }
.demo-disenos a { color: #fff; text-decoration: none; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.16); }
.demo-disenos a.on { background: #fff; color: var(--tinta); }
@media (max-width: 575.98px) { .demo-disenos { width: 100%; justify-content: center; margin: 4px 0; } }

/* =====================================================================
   Orden visual (2026-10-22): menos colores a la vez. Un solo acento
   (--rosa, que cada diseño redefine); el resto en blanco y gris suave.
   ===================================================================== */
/* Menú lateral: íconos sin fondo de color; solo el activo lleva acento */
.lateral { gap: 2px; }
.lateral-item { padding: 6px 10px; }
.lateral-item .ic { background: transparent !important; color: var(--suave) !important; width: 28px; height: 28px; font-size: 1.1rem; }
.lateral-item:hover .ic { color: var(--rosa-o) !important; transform: none; }
.lateral-item.active .ic { background: transparent !important; color: var(--rosa-o) !important; box-shadow: none; }
.lateral-tit { padding: 16px 12px 4px; }
body.diseno-barber .lateral-item .ic { background: transparent !important; color: #8a8174 !important; }
body.diseno-barber .lateral-item:hover .ic, body.diseno-barber .lateral-item.active .ic { background: transparent !important; color: #f0c873 !important; }

/* Indicadores: tarjeta blanca, ícono con el acento del diseño */
.kpi { background: #fff; }
.kpi .ic { background: var(--rosa-p); color: var(--rosa-o); }
.kpi .l { color: var(--suave); }

/* Pendientes de inicio: chips en una fila */
.pendientes { display: flex; flex-wrap: wrap; gap: 8px; }
.pend { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: var(--sombra); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.pend > .bi:first-child { color: var(--rosa-o); }
.pend > .bi:last-child { color: var(--suave); font-size: .8rem; }
.pend b { font-weight: 800; }
.pend.aviso { background: var(--sol-p); border-color: transparent; }
.pend.aviso > .bi:first-child { color: #b07800; }
.pend:hover { color: var(--tinta); border-color: var(--rosa); }
@media (max-width: 575.98px) { .pendientes { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; } }

/* Citas de hoy: hora en un solo color, el profesional con un punto de su color */
.hoy-hora { min-width: 56px; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--tinta); font-variant-numeric: tabular-nums; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 1px 0; vertical-align: middle; }
.lista-item .ic:not([style]) { background: #f6f1f2; color: var(--suave); }
body.diseno-barber .hoy-hora { font-family: 'Oswald', 'Nunito', sans-serif; }
body.diseno-spa .hoy-hora { font-family: 'Fraunces', Georgia, serif; }
/* Filtros de citas en el celular: una fila deslizable en vez de tres */
@media (max-width: 575.98px) { .filtros-citas { flex-wrap: nowrap !important; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; } .filtros-citas > * { flex-shrink: 0; white-space: nowrap; } .filtros-citas .form-select { margin-left: 0 !important; } }
/* QA usabilidad: botones «Guardar» de las tarjetas más fáciles de tocar en el celular */
@media (max-width: 575.98px) { .card-footer .btn-sm { padding: .5rem 1.1rem; font-size: .95rem; min-height: 40px; } }
/* Configurar empresa en pestañas: columna a la izquierda en el computador, fila deslizable en el celular */
.ajustes-tabs a { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.ajustes-tabs a.activa { background: var(--rosa-p); color: var(--rosa-o); }
.ajustes-tabs a.activa i { color: var(--rosa-o); }
@media (max-width: 991.98px) {
  .ajustes-tabs { position: static; flex-direction: row; overflow-x: auto; gap: 6px; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .ajustes-tabs::-webkit-scrollbar { display: none; }
  .ajustes-tabs a { flex-shrink: 0; background: #fff; border: 1px solid var(--linea); border-radius: 999px; padding: .5rem .9rem; min-height: 40px; }
  .ajustes-tabs a.activa { border-color: transparent; }
}
/* Nueva cita: buscador de servicios, atajos «más pedidos» y categorías plegables */
.serv-top { display: flex; flex-wrap: wrap; gap: 6px; }
.serv-top small { flex-basis: 100%; }
.serv-chip { border: 1px solid var(--linea); background: #fff; color: var(--tinta); border-radius: 999px; padding: .38rem .8rem; font-size: .86rem; font-weight: 600; min-height: 36px; }
.serv-chip.sel { background: var(--rosa-p); border-color: var(--rosa); color: var(--rosa-o); }
.serv-chip.sel::before { content: '✓ '; }
.serv-grupo { border-bottom: 1px solid var(--linea); }
.serv-grupo > summary { display: flex; align-items: center; gap: 8px; padding: .65rem .1rem; cursor: pointer; list-style: none; min-height: 44px; }
.serv-grupo > summary::-webkit-details-marker { display: none; }
.serv-grupo > summary::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .8rem; color: var(--suave); transition: transform .15s; }
.serv-grupo[open] > summary::before { transform: rotate(90deg); }
.serv-grupo .serv-item:last-child { border-bottom: 0 !important; }