/* =============================================================================
   Sistema de diseno visual de la aplicacion.
   Capa de componentes propios sobre Bootstrap 5 (no lo reemplaza): variables
   de color/espaciado + clases reutilizables (tarjetas, badges, progreso,
   grid de sellos, marco de QR, tabs tipo segmento, tiles de lista).
   Se incluye en TODOS los layouts (admin, empleado, cliente, publico/auth).
   ============================================================================= */

:root {
    /* =====================================================================
       MARCA -- Color Primario / Color Secundario, configurables por el
       negocio en Configuracion (business_settings.primary_color /
       .secondary_color). Los valores literales de aqui abajo son solo el
       "factory default" (para que la pagina se vea bien incluso antes de
       que cargue nada mas); en cada request, app/Views/partials/
       _branding_style.php redeclara este mismo :root con los valores
       reales calculados por App\Services\BrandingService, y por cascada
       CSS gana sobre estos defaults. Nunca hardcodear un color de marca
       en otra parte del CSS -- siempre a traves de estas variables.
       ===================================================================== */
    --bs-primary: #f6ddb0;
    --bs-primary-rgb: 246, 221, 176;

    /* .alert-primary usa estas 3 variables directamente (no se derivan
       de --bs-primary en tiempo real, Bootstrap las trae precompiladas) */
    --bs-primary-bg-subtle: rgba(246, 221, 176, .12);
    --bs-primary-text-emphasis: #f6ddb0;
    --bs-primary-border-subtle: rgba(246, 221, 176, .32);

    /* Bootstrap llama "secondary" a su propia variante contextual neutra
       (.badge.bg-secondary, .btn-secondary, .alert-secondary,
       .border-secondary, .text-bg-secondary) -- aqui se redirige
       exactamente a lo que el usuario pidio para "Color Secundario":
       bordes, etiquetas, tarjetas informativas, estados inactivos. No
       confundir con --bs-light-*/--bs-dark-* (esas son variantes
       neutras de SUPERFICIE, ver abajo). */
    --bs-secondary: #d4b678;
    --bs-secondary-rgb: 212, 182, 120;
    --bs-secondary-bg-subtle: rgba(212, 182, 120, .08);
    --bs-secondary-text-emphasis: #d4b678;
    --bs-secondary-border-subtle: rgba(212, 182, 120, .2);

    --color-primary: #f6ddb0;
    --color-primary-dark: #fbe9c9;
    --color-primary-tint: rgba(246, 221, 176, .14);
    /* Color de texto/icono legible sobre una superficie pintada con
       --color-primary (botones, navbar, badges) -- lo calcula
       BrandColor::contrastText() segun que tan claro/oscuro sea el
       color elegido, para que .btn-primary nunca quede ilegible. */
    --color-primary-contrast: #1f1f1f;
    --color-primary-contrast-rgb: 31, 31, 31;

    --color-secondary: #d4b678;
    --color-secondary-rgb: 212, 182, 120;
    --color-secondary-hover: #dcc593;
    --color-secondary-tint: rgba(212, 182, 120, .14);
    --color-secondary-contrast: #1f1f1f;

    /* =====================================================================
       SUPERFICIE -- fondo, tarjetas, texto e íconos del "shell" del
       sistema. Fijos a proposito, independientes de la marca: son el
       punto de enganche para un futuro modo oscuro/claro (un bloque
       "[data-theme]" redefiniria solo este grupo, nunca el de MARCA).
       ===================================================================== */
    --bs-body-bg: #1f1f1f;
    --bs-body-color: #f6ddb0;
    --bs-border-color: rgba(246, 221, 176, .16);

    /* .bg-light (badges, input-group-text, etc.) usa esta variable */
    --bs-light-rgb: 52, 52, 52;

    /* .alert-light / .alert-dark usan estas mismas 3 variables por cada
       variante (no se derivan de --bs-*-rgb en vivo). Neutras: no se
       mueven con la marca. */
    --bs-light-bg-subtle: rgba(246, 221, 176, .08);
    --bs-light-text-emphasis: #f6ddb0;
    --bs-light-border-subtle: rgba(246, 221, 176, .2);
    --bs-dark-bg-subtle: rgba(0, 0, 0, .3);
    --bs-dark-text-emphasis: #f6ddb0;
    --bs-dark-border-subtle: rgba(246, 221, 176, .2);

    /* --bs-secondary-color controla ".form-text" (los textos de ayuda bajo
       los campos, ej. "Minimo 8 caracteres") en todo el sistema; es texto
       estructural/de lectura, no un elemento de marca, por eso se queda
       ligado a la tinta (ink) fija en vez de al Color Secundario.
       --bs-tertiary-color cubre estados mas apagados (ej. texto
       deshabilitado). --bs-emphasis-color venia en negro puro (#000) y lo
       usan varios componentes nativos de Bootstrap. */
    --bs-secondary-color: rgba(246, 221, 176, .65);
    --bs-secondary-color-rgb: 246, 221, 176;
    --bs-tertiary-color: rgba(246, 221, 176, .4);
    --bs-tertiary-color-rgb: 246, 221, 176;
    --bs-emphasis-color: #f6ddb0;
    --bs-emphasis-color-rgb: 246, 221, 176;

    /* Tercer nivel de texto (deshabilitado), mas apagado que
       --color-ink-muted — para usarlo directamente en la propia interfaz
       (fuera de las variables nativas de Bootstrap de arriba). */
    --color-ink-disabled: rgba(246, 221, 176, .4);

    /* Colores de estado (activo/inactivo/eliminado, exitos y errores):
       se mantienen intactos a proposito, para no perder esa señal visual. */
    --color-success: #10b981;
    --color-success-tint: #e7f9f1;

    --color-warning: #f59e0b;
    --color-warning-tint: #fff4e0;

    --color-danger: #ef4444;
    --color-danger-tint: #fdecec;

    --color-ink: #f6ddb0;
    --color-ink-muted: #a89a82;
    --color-border: rgba(246, 221, 176, .16);
    --color-surface: #343434;
    --color-bg: #1f1f1f;
    /* Gradiente del sidebar (ver .sidebar mas abajo) -- tokenizado para
       que un futuro modo oscuro/claro tenga donde engancharse, mismos
       valores que antes, cero cambio visual hoy. */
    --color-sidebar-from: #262626;
    --color-sidebar-to: #181818;

    --radius-lg: 1.25rem;
    --radius-md: 1rem;
    --radius-sm: .65rem;
    --radius-pill: 999px;

    --shadow-soft: 0 10px 25px -8px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .18);
    --shadow-lift: 0 16px 32px -12px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .22);
}

* { scrollbar-width: thin; scrollbar-color: #6b6355 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #6b6355; border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }

body {
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.text-muted { color: var(--color-ink-muted) !important; }

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -.01em;
}

a { transition: color .15s ease-in-out; }

/* -----------------------------------------------------------------------
   Botones y enlaces: variante redondeada sobre los de Bootstrap, con un
   pequeno "lift" al pasar el mouse para que se sientan mas tactiles.
   ----------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform .12s ease-in-out, box-shadow .12s ease-in-out, background-color .12s ease-in-out, border-color .12s ease-in-out;
}

.btn-primary {
    /* Bootstrap trae el texto de .btn-primary fijo en blanco (#fff);
       sobre el nuevo fondo crema claro necesita texto oscuro para
       seguir siendo legible, en todos sus estados (normal/hover/foco/
       activo/deshabilitado), no solo el de reposo. */
    --bs-btn-color: var(--color-primary-contrast);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-contrast);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-active-bg: var(--color-primary-dark);
    --bs-btn-active-border-color: var(--color-primary-dark);
    --bs-btn-disabled-color: var(--color-primary-contrast);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), .45);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(var(--bs-primary-rgb), .65);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary-contrast);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-primary);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
    transform: translateY(-1px);
}

/* Bootstrap asume que ".btn-secondary" es un gris oscuro con texto
   blanco; con el Color Secundario del negocio (que puede ser claro)
   ese texto blanco fijo se vuelve poco legible, por eso se recalcula
   igual que ".btn-primary" arriba. */
.btn-secondary {
    --bs-btn-color: var(--color-secondary-contrast);
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-secondary-contrast);
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-active-color: var(--color-secondary-contrast);
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
    --bs-btn-disabled-color: var(--color-secondary-contrast);
    --bs-btn-disabled-bg: var(--color-secondary);
    --bs-btn-disabled-border-color: var(--color-secondary);
}

.btn-outline-secondary {
    --bs-btn-hover-color: var(--color-secondary-contrast);
    --bs-btn-active-color: var(--color-secondary-contrast);
}

.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover {
    transform: translateY(-1px);
}

.btn:active { transform: translateY(0) !important; }

.btn-lg, .btn.py-3 { box-shadow: var(--shadow-soft); }

/* Botones grandes de accion (pantallas de empleado: escanear, canjear, etc.) */
.btn-action {
    font-size: 1.1rem;
    padding: 1.35rem 1rem;
    border-radius: var(--radius-md);
}

/* -----------------------------------------------------------------------
   Tarjeta base ("surface"): fondo blanco, esquinas grandes, sombra suave
   ----------------------------------------------------------------------- */
.surface-card {
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .18s ease-in-out, transform .18s ease-in-out;
}

/* Unifica el resto de tarjetas Bootstrap (paneles del admin y del empleado
   que todavia usan la clase nativa .card) con el mismo lenguaje visual,
   sin tener que reescribir cada vista una por una. */
.card {
    /* --bs-card-bg por defecto es igual a --bs-body-bg (el fondo de la
       pagina); se fija aparte para que la tarjeta se vea un tono mas
       clara que el fondo, como en la referencia. */
    --bs-card-bg: var(--color-surface);
    --bs-card-cap-bg: var(--color-surface);
    --bs-card-border-color: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-ink);
    border-radius: var(--radius-md);
    transition: box-shadow .18s ease-in-out, transform .18s ease-in-out;
}

.card.shadow-sm,
.card.shadow,
.card.shadow-lg {
    box-shadow: var(--shadow-soft) !important;
}

/* Algunas vistas fuerzan "bg-white" en el pie de tarjeta (paginacion de
   tablas); esa utilidad de Bootstrap trae !important, asi que necesita
   su propio contraataque para no quedar blanca sobre fondo oscuro. */
.card-footer.bg-white {
    background-color: var(--color-surface) !important;
    color: var(--color-ink);
}

/* Tarjetas pensadas para tocar/hacer clic (catalogos de admin, tarjetas del
   wallet del cliente): se levantan levemente al pasar el mouse. */
a.card:hover,
.card-hover:hover {
    box-shadow: var(--shadow-lift) !important;
    transform: translateY(-3px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
}

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-ink);
    border-radius: var(--radius-lg);
    border: 0;
    box-shadow: var(--shadow-lift);
}

/* El icono "X" de Bootstrap es un SVG oscuro pensado para fondos claros
   (queda practicamente invisible al 50% de opacidad sobre un modal
   oscuro). invert(1) lo vuelve blanco/claro; se sube la opacidad para
   que el area de clic sea facil de ubicar visualmente. */
.btn-close {
    filter: invert(1);
    opacity: .8;
}

.btn-close:hover {
    opacity: 1;
}

.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-ink);
}

.form-control,
.form-select {
    background-color: var(--color-bg);
    color: var(--color-ink);
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out;
}

/* El icono de flecha nativo de <select> viene con trazo oscuro fijo
   (pensado para fondos claros); se reemplaza por uno del mismo tono
   que el resto del texto para que siga siendo visible. */
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f6ddb0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control::placeholder {
    color: var(--color-ink-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg);
    color: var(--color-ink);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--color-primary-tint);
}

.input-group-text {
    border-color: var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-ink-muted);
}

/* Mismo caso que .card-footer.bg-white: algunas vistas fuerzan un fondo
   claro directamente en el HTML del icono adjunto al input. */
.input-group-text.bg-white,
.input-group-text.bg-light {
    background-color: var(--color-bg) !important;
    color: var(--color-ink-muted) !important;
}

.dropdown-menu {
    box-shadow: var(--shadow-lift);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-primary-tint);
    color: var(--color-ink);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary) !important;
    color: var(--color-primary-contrast) !important;
}

/* -----------------------------------------------------------------------
   Componentes nativos de Bootstrap cuyo CSS compilado trae el azul/gris
   por defecto "horneado" en la hoja de estilos (no derivan de --bs-primary
   en tiempo real como si lo hacen .btn-* o .list-group-*) -- se
   sobreescriben aqui explicitamente para que interruptores, checkboxes,
   radios, la barra de progreso, la paginacion, tabs y el acordeon usen
   siempre el Color Primario, sin importar cual elija el negocio.
   ----------------------------------------------------------------------- */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--color-primary-tint);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2831, 31, 31, .25%29'/%3e%3c/svg%3e");
}

.progress-bar {
    background-color: var(--color-primary);
}

.pagination .page-link {
    color: var(--color-primary);
}

.pagination .page-link:hover {
    color: var(--color-primary-dark);
    background-color: var(--color-primary-tint);
    border-color: var(--color-border);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.pagination .page-item.disabled .page-link {
    color: var(--color-ink-muted);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: var(--color-border);
    color: var(--color-primary);
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-primary-tint);
    color: var(--color-ink);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 .2rem var(--color-primary-tint);
}

.spinner-border,
.spinner-grow {
    color: var(--color-primary);
}

.toast {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

.toast-header {
    background-color: var(--color-surface);
    color: var(--color-ink);
    border-bottom-color: var(--color-border);
}

.badge {
    font-weight: 600;
}

/* .text-bg-primary/.text-bg-secondary (no usados hoy, previstos para
   futuros badges de marca) traen el texto fijo en blanco/negro segun el
   componente -- se recalcula con el contraste correcto para cualquier
   color que elija el negocio. */
.text-bg-primary {
    color: var(--color-primary-contrast) !important;
}

.text-bg-secondary {
    color: var(--color-secondary-contrast) !important;
}

/* Chips genericos de codigo/ID (numero de cliente, codigo de empleado,
   puntos/sellos requeridos, etc.) que usan "bg-light text-dark" en el
   HTML. Los badges de estado semantico (bg-warning text-dark = Inactivo,
   por ejemplo) NO quedan afectados porque el selector exige ambas clases
   junto con bg-light especificamente. */
.badge.bg-light.text-dark {
    background-color: rgba(246, 221, 176, .12) !important;
    color: var(--color-ink) !important;
}

.badge.bg-light.text-dark.border {
    border-color: var(--color-border) !important;
}

/* Encabezados de tabla ".table-light": Bootstrap trae estas 3 variables
   ya resueltas en valores fijos (no se derivan de --bs-body-bg en vivo),
   asi que hay que reasignarlas aqui. */
.table-light {
    --bs-table-color: var(--color-ink-muted);
    --bs-table-bg: var(--color-bg);
    --bs-table-border-color: var(--color-border);
}

/* -----------------------------------------------------------------------
   Tablas: cabecera discreta en mayusculas, filas con hover suave, sin
   bordes verticales duros — se ven mas a una tabla de producto moderna.
   ----------------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: var(--color-primary-tint);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--color-border);
}

.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--color-ink-muted);
    background-color: var(--color-bg);
    border-bottom: 0;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.table tbody tr {
    transition: background-color .12s ease-in-out;
}

.table td {
    vertical-align: middle;
    padding-top: .85rem;
    padding-bottom: .85rem;
}

/* -----------------------------------------------------------------------
   Tarjeta de estadistica (dashboards): icono circular de color + numero
   grande + etiqueta, con una franja de color sutil arriba.
   ----------------------------------------------------------------------- */
.stat-card {
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--stat-accent, var(--color-primary));
}

.stat-card .stat-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: .75rem;
    background: var(--color-primary-tint);
    background: color-mix(in srgb, var(--stat-accent, var(--color-primary)) 20%, var(--color-bg));
    color: var(--stat-accent, var(--color-primary));
}

.stat-card .stat-card-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
}

.stat-card .stat-card-label {
    color: var(--color-ink-muted);
    font-size: .82rem;
    font-weight: 600;
}

.stat-card .stat-card-trend {
    font-size: .78rem;
    font-weight: 600;
    margin-top: .15rem;
}

/* -----------------------------------------------------------------------
   Estados vacios: icono grande dentro de un circulo tenue, en vez de un
   simple icono suelto sobre el fondo.
   ----------------------------------------------------------------------- */
.empty-state { padding: 3rem 1.5rem; text-align: center; }

.empty-state .empty-state-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
   Filas de estadistica tipo "recibo": etiqueta a la izquierda, valor a la
   derecha en negrita, con divisor sutil entre filas consecutivas.
   ----------------------------------------------------------------------- */
.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 0;
}

.stat-row + .stat-row {
    border-top: 1px solid var(--color-border);
}

.stat-row .stat-row-label {
    color: var(--color-ink-muted);
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.stat-row .stat-row-value {
    font-weight: 700;
    font-size: 1.05rem;
}

.stat-row .stat-row-value.text-success { color: var(--color-success) !important; }

/* -----------------------------------------------------------------------
   Icono circular con fondo de color (usado junto a titulos/estadisticas)
   ----------------------------------------------------------------------- */
.icon-badge {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.icon-badge-sm { width: 1.9rem; height: 1.9rem; font-size: .95rem; }

.icon-badge-warning { background: var(--color-warning-tint); color: var(--color-warning); }
.icon-badge-success { background: var(--color-success-tint); color: var(--color-success); }
.icon-badge-primary { background: var(--color-primary-tint); color: var(--color-primary); }

/* -----------------------------------------------------------------------
   Insignia tipo "pill" de estado (ej. "Listo para Canjear")
   ----------------------------------------------------------------------- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: .92rem;
}

.badge-pill-success { background: var(--color-success-tint); color: var(--color-success); }
.badge-pill-warning { background: var(--color-warning-tint); color: #b45309; }
.badge-pill-muted { background: var(--color-bg); color: var(--color-ink-muted); }

/* -----------------------------------------------------------------------
   Barra de progreso delgada y redondeada
   ----------------------------------------------------------------------- */
.progress-thin {
    height: .5rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
}

.progress-thin .progress-bar {
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
}

/* Excepcion: la barra de progreso de sellos en la tarjeta wallet del
   cliente vive sobre el color de marca que el admin elige por programa
   (arbitrario, no forma parte de esta paleta) y necesita seguir siendo
   clara para contrastar contra cualquier color de fondo. */
.promo-card .progress-bar.bg-light,
.text-white .progress-bar.bg-light {
    background-color: rgba(255, 255, 255, .85) !important;
}

/* -----------------------------------------------------------------------
   Tiles de estadistica en 3 columnas (recompensas listas / completado / canjeado)
   ----------------------------------------------------------------------- */
.stat-tile {
    text-align: center;
    padding: .75rem .25rem;
}

.stat-tile .stat-tile-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .4rem;
    font-size: 1.05rem;
}

.stat-tile .stat-tile-value {
    font-weight: 700;
    font-size: 1.15rem;
    display: block;
}

.stat-tile .stat-tile-label {
    color: var(--color-ink-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* -----------------------------------------------------------------------
   Grid de casillas de sellos ("carta perforada" digital)
   ----------------------------------------------------------------------- */
.stamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
    gap: .6rem;
}

.stamp-cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.stamp-cell-filled {
    background: linear-gradient(135deg, var(--color-success), #0ea271);
    color: #fff;
    box-shadow: 0 6px 14px -4px rgba(16, 185, 129, .45);
}

.stamp-cell-empty {
    background: var(--color-bg);
    border: 1.5px dashed var(--color-border);
    color: var(--color-ink-muted);
}

/* -----------------------------------------------------------------------
   Marco decorativo para codigos QR (esquinas resaltadas estilo "escaner")
   ----------------------------------------------------------------------- */
.qr-frame {
    position: relative;
    display: inline-block;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--radius-md);
}

.qr-frame::before,
.qr-frame::after,
.qr-frame > .qr-corner-tl,
.qr-frame > .qr-corner-br {
    content: '';
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--color-primary);
}

.qr-frame::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.qr-frame::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.qr-frame > .qr-corner-tl { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.qr-frame > .qr-corner-br { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }

.qr-frame img {
    display: block;
    width: 100%;
    max-width: 260px;
    min-width: 200px;
    height: auto;
    image-rendering: pixelated;
}

/* -----------------------------------------------------------------------
   Tabs tipo "segmento" (ej. Progreso / Historial / Reglas)
   ----------------------------------------------------------------------- */
.segmented-tabs {
    display: flex;
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    padding: .3rem;
    gap: .25rem;
}

.segmented-tabs .nav-link {
    flex: 1;
    text-align: center;
    border-radius: var(--radius-pill);
    padding: .5rem .75rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--color-ink-muted);
    border: 0;
}

.segmented-tabs .nav-link.active {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 2px 6px rgba(20, 23, 31, .08);
}

/* -----------------------------------------------------------------------
   Tarjeta promocional / de recompensa con imagen o degradado de fondo
   ----------------------------------------------------------------------- */
.promo-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 9rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-soft);
}

.promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 23, 31, .05) 0%, rgba(20, 23, 31, .75) 100%);
}

.promo-card > * { position: relative; z-index: 1; }

.promo-card .promo-card-eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}

.promo-card .promo-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.promo-card .promo-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: .6rem;
    font-size: .72rem;
    opacity: .85;
}

/* -----------------------------------------------------------------------
   Tile de lista (ej. "Interacciones recientes" del panel de empleado)
   ----------------------------------------------------------------------- */
.list-tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
}

.list-tile + .list-tile { border-top: 1px solid var(--color-border); }

.list-tile .list-tile-title { font-weight: 600; font-size: .92rem; }
.list-tile .list-tile-subtitle { color: var(--color-ink-muted); font-size: .8rem; }
.list-tile .list-tile-chevron { color: var(--color-ink-muted); margin-left: auto; }

/* Igual que ".client-row": si ".list-tile" se usa directamente sobre un
   <a>/<button> (ej. resultados de busqueda de cliente, en vez de solo
   envolver contenido dentro de un <div>), evita que herede el azul
   subrayado por defecto de los enlaces. */
a.list-tile,
button.list-tile {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    text-decoration: none;
    color: inherit;
}

/* -----------------------------------------------------------------------
   Panel administrativo: sidebar con degradado sutil y estado activo con
   franja de color, en vez del bg-dark plano de Bootstrap por defecto.
   ----------------------------------------------------------------------- */
.sidebar {
    background: linear-gradient(180deg, var(--color-sidebar-from) 0%, var(--color-sidebar-to) 100%) !important;
}

/* El HTML del sidebar usa las utilidades de Bootstrap "text-white-50" /
   "text-white" para el estado inactivo/activo de cada enlace; se
   redirigen aqui a la paleta crema en vez de al blanco por defecto. */
.sidebar .text-white-50 {
    color: rgba(246, 221, 176, .55) !important;
}

.sidebar .nav-link.text-white,
.sidebar .text-white {
    color: var(--color-ink) !important;
}

.sidebar .border-secondary {
    border-color: var(--color-border) !important;
}

.sidebar .nav-link {
    border-radius: .6rem;
    padding: .65rem .9rem;
    margin-bottom: .15rem;
    font-size: .92rem;
    font-weight: 500;
    position: relative;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, padding-left .15s ease-in-out;
}

.sidebar .nav-link:hover:not(.disabled) {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--color-ink) !important;
    padding-left: 1.05rem;
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .22), rgba(var(--bs-primary-rgb), .05)) !important;
    font-weight: 700;
    border-left: 3px solid var(--color-primary);
    padding-left: calc(.9rem - 3px);
}

.sidebar .nav-link.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Panel administrativo en pantallas angostas: el sidebar (siempre 250px)
   se convierte en un panel deslizable oculto por defecto, con un boton de
   menu en la barra superior y un fondo oscuro para cerrarlo al tocar
   fuera. No afecta en nada el comportamiento en escritorio (min-width). */
.admin-sidebar-toggle {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .admin-sidebar-toggle { display: inline-flex; }

    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-lift);
    }

    .sidebar.is-open { transform: translateX(0); }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 1040;
    }

    .sidebar-backdrop.is-open { display: block; }
}

/* -----------------------------------------------------------------------
   Barras superiores que usan la utilidad "bg-white" de Bootstrap (header
   del admin, barra del portal del cliente): pasan a usar la superficie
   oscura, con su texto/botones ajustados a la paleta crema.
   ----------------------------------------------------------------------- */
.navbar.bg-white {
    background-color: var(--color-surface) !important;
}

.navbar.bg-white .navbar-brand,
.navbar.bg-white .fw-bold {
    color: var(--color-ink) !important;
}

.navbar.bg-white .btn-light {
    --bs-btn-color: var(--color-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-primary-contrast);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    border-color: var(--color-border);
}

/* -----------------------------------------------------------------------
   Barra del panel de empleado: usa un degradado con var(--color-primary).
   Su texto e iconos, pensados para sentarse ENCIMA de esa superficie
   (navbar-dark, btn-outline-light, text-white-50), usan el color de
   contraste calculado (claro u oscuro segun que tan claro/oscuro sea el
   primario elegido), para seguir siendo legibles con cualquier color.
   ----------------------------------------------------------------------- */
.navbar.navbar-dark {
    --bs-navbar-brand-color: var(--color-primary-contrast);
    --bs-navbar-color: rgba(var(--color-primary-contrast-rgb), .7);
    --bs-navbar-hover-color: var(--color-primary-contrast);
    --bs-navbar-active-color: var(--color-primary-contrast);
}

.navbar.navbar-dark .text-white-50 {
    color: rgba(var(--color-primary-contrast-rgb), .65) !important;
}

.navbar.navbar-dark .btn-outline-light {
    --bs-btn-color: var(--color-primary-contrast);
    --bs-btn-border-color: rgba(var(--color-primary-contrast-rgb), .45);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-contrast);
    --bs-btn-hover-border-color: var(--color-primary-contrast);
    --bs-btn-active-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary-contrast);
    --bs-btn-active-border-color: var(--color-primary-contrast);
}

/* SweetAlert2: el boton de confirmar usa confirmButtonColor (branding()
   ['primary']) en cada llamada; su texto por defecto es blanco, se
   ajusta al contraste calculado para seguir siendo legible. */
.swal2-confirm {
    color: var(--color-primary-contrast) !important;
}

/* =============================================================================
   Portal del cliente: experiencia tipo app movil (wallet).
   Misma paleta del resto del sistema — unicamente componentes nuevos de
   presentacion (tarjeta tipo wallet, barra inferior, boton flotante,
   animaciones discretas de entrada y retroalimentacion tactil al tocar).
   ============================================================================= */

@keyframes client-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* IMPORTANTE: sin "both" (ni "forwards"). Un fill-mode que retiene el
   "transform" del ultimo frame para siempre crea un contexto de
   apilamiento (stacking context) PERMANENTE en este elemento — y como
   los modales de Bootstrap (ver client/cards/show.php, rewards.php)
   viven dentro de <main class="client-app">, ese contexto atrapa al
   modal por debajo del backdrop que Bootstrap agrega aparte al <body>,
   dejando el boton de cerrar y el "clic afuera" sin poder recibir
   clics. Sin fill-mode, opacity/transform vuelven a sus valores base
   (1 / none) en cuanto la animacion termina — el mismo resultado
   visual, pero sin dejar un contexto de apilamiento activo. */
.client-app {
    animation: client-fade-up .35s ease;
}

/* Retroalimentacion tactil: cualquier elemento tocable se "hunde"
   levemente al presionarlo, como en una app nativa. */
.tap-scale {
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.tap-scale:active {
    transform: scale(.97);
}

/* -----------------------------------------------------------------------
   Barra superior minimal: solo marca + accesos rapidos, flotante sobre
   el contenido con un leve desenfoque.
   ----------------------------------------------------------------------- */
.client-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem .75rem;
    background: linear-gradient(180deg, var(--color-bg) 65%, transparent 100%);
    backdrop-filter: blur(6px);
}

.client-topbar .client-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-ink);
    letter-spacing: -.01em;
}

.client-topbar .client-brand .client-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.client-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    position: relative;
    text-decoration: none;
}

.client-icon-btn .client-badge-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--color-bg);
}

/* -----------------------------------------------------------------------
   Contenido: deja aire arriba/abajo y espacio para la barra inferior fija.
   ----------------------------------------------------------------------- */
.client-main {
    padding: .25rem 1.1rem calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

.client-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0 .65rem;
}

.client-section-title h2 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-ink);
}

.client-section-title a {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

/* -----------------------------------------------------------------------
   Carrusel de tarjetas (cuando el cliente tiene mas de una)
   ----------------------------------------------------------------------- */
.wallet-carousel {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .2rem .1rem .9rem;
    margin: 0 -.1rem;
    scrollbar-width: none;
}

.wallet-carousel::-webkit-scrollbar { display: none; }

.wallet-carousel .wallet-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    color: var(--color-ink-muted);
    background: var(--color-surface);
}

.wallet-carousel .wallet-chip.active {
    color: var(--color-primary-contrast);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* -----------------------------------------------------------------------
   Tarjeta principal tipo wallet: mas grande, con relieve sutil y una
   textura decorativa (circulos) para que se sienta "premium" sin
   depender de una imagen.
   ----------------------------------------------------------------------- */
.wallet-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 1.5rem;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-lift);
    isolation: isolate;
}

.wallet-card::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto auto;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    z-index: -1;
}

.wallet-card::after {
    content: '';
    position: absolute;
    inset: auto auto -55% -15%;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    z-index: -1;
}

.wallet-card .wallet-card-eyebrow {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
    font-weight: 600;
}

.wallet-card .wallet-card-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.wallet-card .wallet-card-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.wallet-card .wallet-card-metric {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.wallet-card .wallet-card-progress {
    height: .45rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.wallet-card .wallet-card-progress > span {
    display: block;
    height: 100%;
    background: #fff;
    border-radius: var(--radius-pill);
}

.wallet-card .wallet-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.wallet-card .wallet-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    opacity: .92;
}

/* Boton principal "Mostrar mi QR": grande, pildora, con el mismo glow
   crema del resto del sistema. */
.qr-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1rem;
    margin: 1rem 0 1.4rem;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 24px -8px rgba(var(--bs-primary-rgb), .5);
    transition: box-shadow .2s ease, transform .15s ease;
}

.qr-cta:hover { box-shadow: 0 14px 30px -8px rgba(var(--bs-primary-rgb), .7); }
.qr-cta:active { transform: scale(.98); }

/* -----------------------------------------------------------------------
   "Hero" del Dashboard: agrupa el saludo del cliente + el Wallet y los
   centra como bloque dentro de una franja de alto fluido (clamp con vh),
   para que el Wallet se sienta el protagonista de la pantalla sin quedar
   pegado al encabezado, en cualquier tamano de pantalla — sin margenes
   fijos ni valores distintos por dispositivo. Si el contenido es mas
   alto que el minimo (pantallas muy bajas), el flex simplemente crece;
   nunca se recorta.
   ----------------------------------------------------------------------- */
.client-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(26rem, 56vh, 36rem);
    gap: clamp(1.5rem, 4vh, 3rem);
}

/* =============================================================================
   Wallet de programas de fidelizacion (Dashboard): MISMA estructura,
   tamanos, posiciones, sombras, animaciones y estados de hover que el
   componente de referencia (tarjetas bancarias apiladas saliendo de una
   cartera). Unicamente se traduce el CONTENIDO (programa/tipo/progreso/
   recompensa en vez de banco/holder/numero) y se prefijan las clases con
   "walletp-" para que no choquen con el ".card" global de Bootstrap que
   ya usa el resto del sistema (admin/empleado) — sin ese prefijo, las
   1000+ reglas de ".card" de app.css se mezclarian con estas y romperian
   ambos lados. Ningun valor visual (medidas, colores, curvas, delays) se
   modifico respecto del original.
   ============================================================================= */
.walletp-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 1.5rem;
}

.walletp {
    position: relative;
    width: 280px;
    height: 230px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: transform 0.4s ease;
}

.walletp:hover { transform: translateY(-5px); }

@keyframes walletp-slide-in {
    0% { transform: translateY(-100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.walletp-back {
    position: absolute;
    bottom: 0;
    width: 280px;
    height: 200px;
    background: #1e341e;
    border-radius: 22px 22px 60px 60px;
    z-index: 5;
    box-shadow:
        inset 0 25px 35px rgba(0, 0, 0, 0.4),
        inset 0 5px 15px rgba(0, 0, 0, 0.5);
}

.walletp-card {
    position: absolute;
    width: 260px;
    height: 140px;
    left: 10px;
    border-radius: 16px;
    padding: 18px;
    color: white;
    display: block;
    text-decoration: none;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 -4px 15px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        /* "bottom" solo cambia en movil (el swipe rota que tarjeta
           tiene cual clase slot-N, ver el JS al final de la vista) —
           en escritorio el slot de cada tarjeta nunca cambia, asi que
           esta linea queda inerte ahi. Sin ella, la rotacion en movil
           saltaria de golpe en vez de deslizarse. */
        bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        z-index 0s;
    animation: walletp-slide-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.walletp-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.walletp-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: .5rem;
}

.walletp-card-top span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.walletp-card-icon { font-size: 1.1rem; opacity: .85; flex-shrink: 0; }

.walletp-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: .5rem;
}

.walletp-card-info { min-width: 0; }
.walletp-card-info-right { text-align: right; }

.walletp-label {
    font-size: 8px;
    opacity: 0.7;
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
}

.walletp-value {
    font-size: 10px;
    font-weight: 500;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 105px;
}

.walletp-card.slot-1 { bottom: 90px; z-index: 10; animation-delay: 0.1s; }
.walletp-card.slot-2 { bottom: 65px; z-index: 20; animation-delay: 0.2s; }
.walletp-card.slot-3 { bottom: 40px; z-index: 30; animation-delay: 0.3s; }

/* Pocket (cartera verde): tamano/forma/posicion identicos al original */
.walletp-pocket {
    position: absolute;
    bottom: 0;
    width: 280px;
    height: 160px;
    z-index: 40;
    filter: drop-shadow(0 15px 25px rgba(20, 40, 20, 0.4));
    /* La cartera es puramente decorativa (SVG + texto), pero su z-index
       (40/50) queda por encima de la tarjeta frontal (z-index 30) en la
       franja donde se superponen. Sin esto, esa franja del enlace de la
       tarjeta queda inutilizable: el clic lo intercepta la cartera en
       vez de navegar a la tarjeta. */
    pointer-events: none;
}

.walletp-pocket-content {
    position: absolute;
    top: 45px;
    width: 100%;
    text-align: center;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.walletp-balance-stars {
    color: #839e7b;
    font-size: 24px;
    letter-spacing: 4px;
    transition: 0.3s;
}

.walletp-balance-real {
    color: #a7c59e;
    font-size: 22px;
    font-weight: 600;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 10px);
    transition: 0.3s;
    white-space: nowrap;
}

/* Hover del grupo: cada tarjeta sube y rota levemente para "abanicarse" */
.walletp:hover .slot-1, .walletp.is-open .slot-1 { transform: translateY(-75px) rotate(-3deg); }
.walletp:hover .slot-2, .walletp.is-open .slot-2 { transform: translateY(-45px) rotate(2deg); }
.walletp:hover .slot-3, .walletp.is-open .slot-3 { transform: translateY(-10px); }

/* Hover individual: la tarjeta senalada pasa al frente */
.walletp-card:hover {
    z-index: 100 !important;
    transition-delay: 0s !important;
}

.walletp:hover .slot-1:hover, .walletp.is-open .slot-1:hover { transform: translateY(-60px) scale(1.05) rotate(0); }
.walletp:hover .slot-2:hover, .walletp.is-open .slot-2:hover { transform: translateY(-70px) scale(1.05) rotate(0); }
.walletp:hover .slot-3:hover, .walletp.is-open .slot-3:hover { transform: translateY(-60px) scale(1.05) rotate(0); }

.walletp:hover .walletp-balance-stars, .walletp.is-open .walletp-balance-stars { opacity: 0; }
.walletp:hover .walletp-balance-real, .walletp.is-open .walletp-balance-real {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Botón que reemplaza el texto "Hover to see Balance" del original */
.walletp-viewall-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 20px;
    padding: .65rem 1.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(var(--bs-primary-rgb), .5);
    transition: box-shadow .2s ease, transform .15s ease;
}

.walletp-viewall-link:hover {
    box-shadow: 0 14px 30px -8px rgba(var(--bs-primary-rgb), .7);
    transform: translateY(-2px);
    color: var(--color-primary-contrast);
}

.walletp-viewall-link:active { transform: scale(.98); }

/* -----------------------------------------------------------------------
   Contenido comun de las tarjetas wallet (usado tanto en la pila del
   Dashboard como en la grilla de "Mis Tarjetas"): nombre del negocio,
   recompensa destacada y estado — sin numero de tarjeta ni nada bancario.
   ----------------------------------------------------------------------- */
.wallet-card .wallet-card-business {
    font-size: .78rem;
    opacity: .85;
    margin-top: .15rem;
}

.wallet-card .wallet-card-reward {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .85rem;
    font-size: .78rem;
    font-weight: 600;
    opacity: .95;
}

.wallet-card .wallet-card-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .76rem;
    font-weight: 700;
}

/* -----------------------------------------------------------------------
   Pagina "Mis Tarjetas": todas las tarjetas del cliente sin limite, con
   buscador. Reutiliza .programs-grid / .wallet-card ya existentes.
   ----------------------------------------------------------------------- */
.wallet-search {
    position: relative;
    margin-bottom: 1.1rem;
}

.wallet-search i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--color-ink-muted);
    pointer-events: none;
}

.wallet-search input.form-control {
    padding-left: 2.6rem;
    border-radius: var(--radius-pill);
}

.wallet-card.card-hidden { display: none; }

/* =============================================================================
   "Siguenos y Contactanos" (Portal del Cliente): mismo componente HTML/CSS
   proporcionado (circulos con tooltip y relleno de color al hover), solo
   con las clases renombradas con el prefijo "social-contact-" — el
   original usaba ".tooltip", que es tambien el nombre de un componente
   nativo de Bootstrap (con su propio z-index/display/opacity por
   defecto) ya cargado en todo el sitio; con el mismo nombre chocarian.
   Ningun valor (medidas, colores, curvas, tiempos) se modifico.
   ============================================================================= */
.social-contact-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.social-contact-item {
    margin: 10px 10px;
    position: relative;
}

.social-contact-item .social-contact-tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #000;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.social-contact-item:hover .social-contact-tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}

.social-contact-item a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #4d4d4d;
    background-color: #fff;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.social-contact-item a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
    color: white;
}

.social-contact-item a i {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    line-height: 1;
}

.social-contact-item a .social-contact-fill {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

.social-contact-item a:hover .social-contact-fill {
    height: 100%;
}

.social-contact-item a[data-social="whatsapp"] .social-contact-fill,
.social-contact-item a[data-social="whatsapp"] ~ .social-contact-tooltip {
    background-color: #128c7e;
}

.social-contact-item a[data-social="facebook"] .social-contact-fill,
.social-contact-item a[data-social="facebook"] ~ .social-contact-tooltip {
    background-color: #3b5998;
}

.social-contact-item a[data-social="instagram"] .social-contact-fill,
.social-contact-item a[data-social="instagram"] ~ .social-contact-tooltip {
    background: linear-gradient(45deg, #405de6, #5b51db, #b33ab4, #c135b4, #e1306c, #fd1f1f);
}

.social-contact-item a[data-social="tiktok"] .social-contact-fill,
.social-contact-item a[data-social="tiktok"] ~ .social-contact-tooltip {
    background-color: #000000;
}

.social-contact-item a[data-social="youtube"] .social-contact-fill,
.social-contact-item a[data-social="youtube"] ~ .social-contact-tooltip {
    background-color: #ff0000;
}

.social-contact-item a[data-social="website"] .social-contact-fill,
.social-contact-item a[data-social="website"] ~ .social-contact-tooltip {
    background-color: #0ea5e9;
}

.social-contact-item a[data-social="maps"] .social-contact-fill,
.social-contact-item a[data-social="maps"] ~ .social-contact-tooltip {
    background-color: #ea4335;
}

.social-contact-item a[data-social="call"] .social-contact-fill,
.social-contact-item a[data-social="call"] ~ .social-contact-tooltip {
    background-color: #22c55e;
}

/* -----------------------------------------------------------------------
   Barra de navegacion inferior, fija, tipo app nativa.
   ----------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: .5rem .5rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .35);
    z-index: 30;
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    flex: 1;
    padding: .35rem 0;
    font-size: .68rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color .15s ease;
}

.bottom-nav a i {
    font-size: 1.25rem;
    line-height: 1;
}

.bottom-nav a.active {
    color: var(--color-primary);
}

/* -----------------------------------------------------------------------
   Fichas de recompensa / historial mas "tocables": bordes redondeados,
   leve elevacion al presionar.
   ----------------------------------------------------------------------- */
.client-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem;
    border-radius: var(--radius-md);
}

.client-row + .client-row {
    margin-top: .5rem;
}

button.client-row,
a.client-row {
    width: 100%;
    text-align: left;
    border: 0;
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
}

/* -----------------------------------------------------------------------
   Grupo de acciones rapidas (Ver QR / Historial / Recompensas)
   ----------------------------------------------------------------------- */
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.1rem .5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
}

.quick-action i { font-size: 1.35rem; color: var(--color-primary); }

.quick-action.quick-action-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.quick-action:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

/* -----------------------------------------------------------------------
   Grid de "Tus programas de fidelizacion": una columna en celular,
   varias en tablet/escritorio — el mismo markup se acomoda solo.
   ----------------------------------------------------------------------- */
.programs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* -----------------------------------------------------------------------
   Historial en linea de tiempo: icono + linea conectora vertical entre
   movimientos consecutivos.
   ----------------------------------------------------------------------- */
.timeline {
    position: relative;
}

.timeline-item {
    position: relative;
    display: flex;
    gap: .9rem;
    padding: .1rem 0 1.4rem;
}

.timeline-item:last-child { padding-bottom: .1rem; }

.timeline-item .timeline-marker {
    position: relative;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.2rem;
    top: 2.6rem;
    bottom: -.4rem;
    width: 2px;
    background: var(--color-border);
}

.timeline-item .timeline-body {
    flex: 1;
    padding-top: .25rem;
}

/* -----------------------------------------------------------------------
   Perfil del cliente: avatar circular con inicial, y secciones
   plegables para no saturar la pantalla principal.
   ----------------------------------------------------------------------- */
.profile-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    border: 2px solid var(--color-primary);
    overflow: hidden;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 600;
    text-align: left;
}

.profile-action-btn i:first-child {
    font-size: 1.15rem;
    color: var(--color-primary);
    width: 1.5rem;
    text-align: center;
}

.profile-action-btn .bi-chevron-down {
    margin-left: auto;
    transition: transform .2s ease;
    color: var(--color-ink-muted);
}

.profile-action-btn[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.profile-action-btn.profile-action-danger {
    color: var(--color-danger);
    border-color: rgba(239, 68, 68, .3);
}

.profile-action-btn.profile-action-danger i:first-child { color: var(--color-danger); }

/* Ancho base del portal del cliente (celular): unica fuente de verdad
   para este valor, para que las media queries de mas abajo (que vienen
   despues en el archivo, y por lo tanto ganan la cascada) puedan
   ampliarlo en tablet/escritorio sin competir con un <style> inline. */
body.client-body { max-width: 480px; margin: 0 auto; }

/* -----------------------------------------------------------------------
   Navegacion de escritorio: oculta en celular, sustituye a la barra
   inferior en pantallas grandes con una barra superior mas completa.
   ----------------------------------------------------------------------- */
.desktop-nav {
    display: none;
}

/* -----------------------------------------------------------------------
   Responsive: celular (base) -> tablet -> escritorio. El portal deja de
   estar limitado a 480px y aprovecha el espacio en pantallas grandes,
   con la barra inferior reemplazada por navegacion en la barra superior.
   ----------------------------------------------------------------------- */
@media (min-width: 768px) {
    body.client-body { max-width: 720px; }

    .programs-grid { grid-template-columns: repeat(2, 1fr); }

    .bottom-nav { display: none; }

    .client-main { padding-bottom: 2.5rem; }

    .desktop-nav {
        display: flex;
        align-items: center;
        gap: .3rem;
    }

    .desktop-nav a {
        display: flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem .9rem;
        border-radius: var(--radius-pill);
        font-size: .85rem;
        font-weight: 600;
        color: var(--color-ink-muted);
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }

    .desktop-nav a:hover {
        background: var(--color-primary-tint);
        color: var(--color-ink);
    }

    .desktop-nav a.active {
        background: var(--color-primary);
        color: var(--color-primary-contrast);
    }
}

@media (min-width: 1100px) {
    body.client-body { max-width: 960px; }

    .programs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 380px) {
    .quick-actions-grid { gap: .4rem; }
}

.quick-action.quick-action-primary i { color: var(--color-primary-contrast); }

/* Boton "Canjear" dentro de cada tarjeta de recompensa disponible */
.reward-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}

/* =============================================================================
   Panel del empleado: experiencia tipo POS, pensada para usarse de pie,
   con una mano, sobre el mostrador. Misma paleta oscura/crema del resto
   del sistema (el fondo global ya es oscuro, ver "body" arriba) — aqui
   solo se agregan la barra superior plana (antes tenia un degradado
   crema que no combinaba con el resto de los paneles) y los componentes
   de botones grandes tipo POS.
   ============================================================================= */
.employee-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.employee-topbar .employee-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-ink);
    letter-spacing: -.01em;
    text-decoration: none;
}

.employee-brand .employee-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

/* -----------------------------------------------------------------------
   Logo del negocio dentro de los paneles (Admin / Empleado / Cliente).
   Solo se pinta cuando el negocio tiene un logo cargado en Configuracion
   (ver business_identity()); si no, cada layout conserva su icono +
   "Fiderly". No aplica a la PWA, al login ni al Super Administrador.
   Mantiene la proporcion original (object-fit: contain), soporta PNG con
   transparencia (sin fondo ni filtros) y acota el alto/ancho para no
   romper el Header ni el Sidebar en ningun tamano de pantalla.
   ----------------------------------------------------------------------- */
.brand-logo {
    display: block;
    width: auto;
    object-fit: contain;
    background: transparent;
}

/* Marca Fiderly de reserva: solo visible si la <img> del logo falla al
   cargar (onerror). El selector [hidden] gana la cascada sin !important,
   asi que mientras el logo carga bien este bloque NO ocupa espacio. */
.brand-fallback {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.brand-fallback[hidden] {
    display: none;
}

.brand-logo--sidebar {
    max-height: 40px;
    max-width: 190px;
}

.brand-logo--topbar {
    max-height: 32px;
    max-width: 150px;
}

@media (max-width: 575.98px) {
    .brand-logo--topbar {
        max-height: 28px;
        max-width: 120px;
    }
}

.employee-user-name {
    font-size: .85rem;
    color: var(--color-ink-muted);
    font-weight: 600;
}

.employee-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
}

.employee-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.25rem 1.1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
    .employee-main { max-width: 900px; padding-top: 1.75rem; }
}

/* -----------------------------------------------------------------------
   Boton hero "Escanear QR": la accion principal del panel, siempre
   visible arriba de todo, grande y dificil de fallar con el pulgar.
   ----------------------------------------------------------------------- */
.pos-scan-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-contrast);
    text-decoration: none;
    box-shadow: 0 14px 32px -10px rgba(var(--bs-primary-rgb), .45);
    transition: box-shadow .2s ease, transform .15s ease;
}

.pos-scan-cta:hover { box-shadow: 0 18px 38px -10px rgba(var(--bs-primary-rgb), .6); color: var(--color-primary-contrast); }
.pos-scan-cta:active { transform: scale(.99); }

.pos-scan-cta .pos-scan-icon {
    width: 3.4rem;
    height: 3.4rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(var(--color-primary-contrast-rgb), .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.pos-scan-cta .pos-scan-title { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.pos-scan-cta .pos-scan-subtitle { font-size: .82rem; opacity: .8; }

/* -----------------------------------------------------------------------
   Grid de acciones secundarias grandes (Buscar cliente / Nuevo cliente /
   Historial): tocables comodamente con una sola mano, nunca deformadas.
   ----------------------------------------------------------------------- */
.pos-action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.pos-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pos-action-btn i {
    font-size: 1.9rem;
    color: var(--color-primary);
}

.pos-action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lift);
    color: var(--color-ink);
}

.pos-action-btn:active { transform: scale(.98); }

/* -----------------------------------------------------------------------
   Boton grande "Detener escaneo": siempre visible mientras la camara
   esta activa, para poder salir de inmediato sin depender de un QR
   valido ni de la navegacion del sistema operativo.
   ----------------------------------------------------------------------- */
.pos-stop-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: 1.1rem;
    margin-top: 1rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-danger);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 10px 24px -10px rgba(239, 68, 68, .55);
    transition: box-shadow .2s ease, transform .15s ease;
}

.pos-stop-scan-btn:hover { box-shadow: 0 14px 30px -10px rgba(239, 68, 68, .7); }
.pos-stop-scan-btn:active { transform: scale(.98); }

/* -----------------------------------------------------------------------
   Botones de accion grandes dentro de la ficha del cliente escaneado
   (registrar compra / agregar sello / canjear) — mismo lenguaje visual
   que .pos-action-btn, pero ocupando todo el ancho de su columna.
   ----------------------------------------------------------------------- */
.pos-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: 1.3rem 1rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(var(--bs-primary-rgb), .5);
    transition: box-shadow .2s ease, transform .15s ease, opacity .15s ease;
}

.pos-card-action i { font-size: 1.7rem; }
.pos-card-action:hover { box-shadow: 0 14px 30px -8px rgba(var(--bs-primary-rgb), .7); color: var(--color-primary-contrast); }
.pos-card-action:active { transform: scale(.98); }

.pos-card-action.pos-card-action-outline {
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.pos-card-action.pos-card-action-outline i { color: var(--color-primary); }

.pos-card-action:disabled,
.pos-card-action[disabled] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* =============================================================================
   Registro unificado de cliente (empleado): carrusel horizontal de
   tarjetas de fidelizacion seleccionables. El input real es un checkbox
   (accesible, sin depender de JS para el estado), visualmente oculto
   pero enfocable; ":checked" en el hermano dirige el borde iluminado, el
   check y la elevacion — el JS solo actualiza el contador, nunca el
   estado de seleccion en si.
   ============================================================================= */
.selectable-card-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: .3rem .1rem 1rem;
    margin-bottom: .5rem;
    scrollbar-width: thin;
}

.selectable-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    cursor: pointer;
    margin: 0;
}

.selectable-card-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.selectable-card-body {
    position: relative;
    min-height: 220px;
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    color: #fff;
    border: 2px solid transparent;
    box-shadow: var(--shadow-soft);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.selectable-card-input:checked + .selectable-card-body {
    border-color: var(--color-primary);
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -12px rgba(var(--bs-primary-rgb), .55);
}

.selectable-card-check {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: scale(.5);
    transition: transform .2s ease, opacity .2s ease;
}

.selectable-card-input:checked + .selectable-card-body .selectable-card-check {
    opacity: 1;
    transform: scale(1);
}

.selectable-card-eyebrow {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    opacity: .8;
}

.selectable-card-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: .2rem 0 .5rem;
}

.selectable-card-desc {
    font-size: .78rem;
    opacity: .85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selectable-card-reward {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: .78rem;
    font-weight: 600;
}

.selectable-card-business {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    opacity: .8;
    margin: -.3rem 0 .5rem;
}

/* =============================================================================
   Asistente de autorregistro publico (/registro): pantalla completa, un solo
   <form> con varios paneles mostrados/ocultados por JS (regwizForm en
   registration/create.php). Ningun paso intermedio toca el servidor; solo
   "Finalizar registro" hace el POST real. Reutiliza los tokens de color y
   el patron ".selectable-card-*" ya usado en el alta de empleado.
   ============================================================================= */
.regwiz {
    width: 100%;
    display: flex;
    justify-content: center;
}

.regwiz-shell {
    width: 100%;
    max-width: 540px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lift);
    padding: 1.75rem 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.regwiz-shell:has([data-panel="cards"].is-active) {
    max-width: 640px;
}

.regwiz-progress { margin-bottom: 1.25rem; }

.regwiz-progress-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    overflow: hidden;
}

.regwiz-progress-fill {
    height: 100%;
    width: 33.33%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-pill);
    transition: width .35s ease;
}

.regwiz-progress-label {
    margin-top: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.regwiz-panel {
    display: none;
}

.regwiz-panel.is-active {
    display: block;
}

@keyframes regwiz-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.regwiz-panel.regwiz-fade-in {
    animation: regwiz-fade-in .35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.regwiz-back {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: background .2s ease, color .2s ease;
}

.regwiz-back:hover { background: var(--color-primary-tint); color: var(--color-primary); }

.regwiz-hero { text-align: center; padding: .5rem 0 1.5rem; }

.regwiz-hero-logo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: 0 auto 1.1rem;
    display: block;
    box-shadow: var(--shadow-soft);
}

.regwiz-hero-mark {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-primary-contrast);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    box-shadow: var(--shadow-soft);
}

.regwiz-hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: .6rem;
}

.regwiz-hero-text {
    color: var(--color-ink-muted);
    font-size: .92rem;
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.5;
}

.regwiz-step-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: .25rem;
}

.regwiz-step-subtitle {
    color: var(--color-ink-muted);
    font-size: .85rem;
    margin-bottom: 1.25rem;
}

.regwiz-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-contrast);
    font-weight: 700;
    padding: .85rem 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
    margin-top: .5rem;
}

.regwiz-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--color-primary-contrast); }
.regwiz-btn-primary:active { transform: translateY(0) scale(.98); }

.regwiz-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    font-weight: 600;
    padding: .8rem 1.5rem;
    margin-top: .75rem;
    text-decoration: none;
    transition: background .2s ease;
}

.regwiz-btn-secondary:hover { background: var(--color-primary-tint); color: var(--color-ink); }

.regwiz-login-hint {
    text-align: center;
    color: var(--color-ink-muted);
    font-size: .82rem;
    margin-top: 1.1rem;
    margin-bottom: 0;
}

.regwiz-login-hint a { color: var(--color-primary); font-weight: 600; }

/* Carrusel de tarjetas: reutiliza .selectable-card-scroll / .selectable-card
   (ya definidas arriba); aqui solo se agregan las flechas discretas y los
   puntos de posicion, que la version del empleado no necesitaba. */
.regwiz-carousel { position: relative; }

.regwiz-carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: var(--shadow-soft);
    transition: background .2s ease, color .2s ease;
}

.regwiz-carousel-arrow:hover { background: var(--color-primary); color: var(--color-primary-contrast); }
.regwiz-carousel-arrow-prev { left: -.6rem; }
.regwiz-carousel-arrow-next { right: -.6rem; }

.regwiz-carousel-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin: -.2rem 0 .9rem;
}

.regwiz-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background .2s ease, width .2s ease;
}

.regwiz-carousel-dot.is-active { background: var(--color-primary); width: 16px; border-radius: var(--radius-pill); }

.regwiz-selected-count {
    text-align: center;
    font-size: .82rem;
    color: var(--color-ink-muted);
    margin-bottom: .5rem;
}

.regwiz-field { margin-bottom: 1.1rem; transition: transform .05s ease; }

.regwiz-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    margin-bottom: .4rem;
}

.regwiz-input {
    width: 100%;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    padding: .75rem .9rem;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.regwiz-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem var(--color-primary-tint);
}

.regwiz-input.is-valid { border-color: var(--color-success); }
.regwiz-input.is-invalid { border-color: var(--color-danger); }

.regwiz-field-msg {
    min-height: 1.1rem;
    font-size: .76rem;
    margin-top: .35rem;
}

.regwiz-field-msg.is-error { color: var(--color-danger); }
.regwiz-field-msg.is-ok { color: var(--color-success); }

@keyframes regwiz-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.regwiz-field.regwiz-shake { animation: regwiz-shake .4s ease; }

.regwiz-note {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    background: var(--color-primary-tint);
    color: var(--color-ink-muted);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    font-size: .78rem;
    line-height: 1.4;
    margin-bottom: .5rem;
}

.regwiz-note i { color: var(--color-primary); margin-top: .15rem; }

.regwiz-summary-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}

.regwiz-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
}

.regwiz-summary-row + .regwiz-summary-row { border-top: 1px solid var(--color-border); }

.regwiz-summary-row-cards { align-items: flex-start; flex-direction: column; gap: .5rem; }

.regwiz-summary-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-ink-muted);
    font-size: .82rem;
    font-weight: 600;
    flex-shrink: 0;
}

.regwiz-summary-value {
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

.regwiz-summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    width: 100%;
}

.regwiz-summary-pill {
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    padding: .3rem .75rem;
    font-size: .76rem;
    font-weight: 700;
}

/* Pantalla de confirmacion final (/registro/exito) */
.regwiz-shell-success { text-align: center; }

.regwiz-success-badge {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-success), #0ea271);
    color: #fff;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem auto 1.3rem;
    animation: regwiz-success-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes regwiz-success-pop {
    from { transform: scale(.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.regwiz-success-actions { margin-top: 1.5rem; }

@media (min-width: 768px) {
    .regwiz-carousel-arrow { display: flex; }
}

@media (max-width: 576px) {
    .regwiz-shell { padding: 1.4rem 1.1rem 1.6rem; border-radius: var(--radius-md); }
    .regwiz-hero-title { font-size: 1.25rem; }
}

/* =============================================================================
   Centro de Ayuda (/admin/acerca-de): pantalla de bienvenida con 3 tarjetas
   de manuales, mas el visor de manuales en si (indice lateral + contenido).
   Prefijo "helpcenter-" para la portada, "manualv-" para el visor, evitando
   colisionar con clases genericas de Bootstrap.
   ============================================================================= */
.helpcenter-hero {
    text-align: center;
    padding: 1rem 1rem 2rem;
    max-width: 640px;
    margin: 0 auto;
}

.helpcenter-hero-logo {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md);
    object-fit: cover;
    margin: 0 auto 1.1rem;
    display: block;
    box-shadow: var(--shadow-soft);
}

.helpcenter-hero-mark {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-primary-contrast);
    font-size: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    box-shadow: var(--shadow-soft);
}

.helpcenter-hero-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: .2rem;
}

.helpcenter-hero-version {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    padding: .25rem .8rem;
    font-size: .74rem;
    font-weight: 700;
    margin: .4rem 0 .6rem;
}

.helpcenter-hero-maker {
    color: var(--color-ink-muted);
    font-size: .82rem;
    margin-bottom: .75rem;
}

.helpcenter-hero-maker strong { color: var(--color-ink); }

.helpcenter-hero-desc {
    color: var(--color-ink-muted);
    font-size: .95rem;
    line-height: 1.55;
}

.helpcenter-section-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    margin: .5rem 0 1.5rem;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .78rem;
}

/* Tarjetas grandes de manuales */
.helpcenter-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform .22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .22s ease;
    border: 1px solid transparent;
}

.helpcenter-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
    border-color: var(--color-border);
}

.helpcenter-card-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

.helpcenter-card:hover .helpcenter-card-icon {
    transform: scale(1.08);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.helpcenter-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: .6rem;
}

.helpcenter-card-desc {
    color: var(--color-ink-muted);
    font-size: .88rem;
    line-height: 1.55;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.helpcenter-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-primary-contrast);
    font-weight: 700;
    padding: .65rem 1.4rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.helpcenter-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    color: var(--color-primary-contrast);
}

.helpcenter-info-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem 1.5rem;
}

.helpcenter-info-card-title {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
    margin-bottom: .5rem;
}

.helpcenter-footer {
    text-align: center;
    padding-top: 1.75rem;
    margin-top: .5rem;
    border-top: 1px solid var(--color-border);
}

.helpcenter-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-ink-muted);
    font-size: .82rem;
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s ease;
}

.helpcenter-footer-credit:hover { opacity: 1; color: var(--color-ink-muted); }
.helpcenter-footer-credit img { height: 20px; width: auto; }
.helpcenter-footer-credit strong { color: var(--color-ink); }

/* -----------------------------------------------------------------------
   Visor de manuales: indice lateral (sticky) + contenido, con buscador
   que filtra capitulos y Bootstrap Scrollspy resaltando el capitulo
   visible. En movil, el indice se mueve a un Offcanvas de Bootstrap.
   ----------------------------------------------------------------------- */
.manualv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .manualv-header { flex-direction: column; align-items: stretch; }
    .manualv-header .d-flex.align-items-center.gap-2 { justify-content: space-between; }
}

.manualv-header-title { display: flex; align-items: center; gap: .75rem; }

.manualv-header-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.manualv-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    border-radius: var(--radius-pill);
    padding: .5rem 1rem;
    font-size: .82rem;
    font-weight: 600;
}

.manualv-shell { display: flex; align-items: flex-start; gap: 1.75rem; }

.manualv-toc {
    flex: 0 0 260px;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem;
}

.manualv-search { position: relative; margin-bottom: .85rem; }

.manualv-search i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-muted);
    font-size: .85rem;
}

.manualv-search input {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    padding: .5rem .9rem .5rem 2.1rem;
    font-size: .82rem;
}

.manualv-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .15rem var(--color-primary-tint);
}

.manualv-toc-nav { display: flex; flex-direction: column; gap: .15rem; }

.manualv-toc-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--color-ink-muted);
    font-size: .83rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: .5rem .65rem;
    transition: background .15s ease, color .15s ease;
}

.manualv-toc-nav .nav-link i { font-size: .9rem; width: 1.1rem; text-align: center; }

.manualv-toc-nav .nav-link:hover { background: var(--color-primary-tint); color: var(--color-ink); }

.manualv-toc-nav .nav-link.active {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.manualv-toc-empty {
    color: var(--color-ink-muted);
    font-size: .8rem;
    padding: .5rem .65rem;
}

.manualv-content { flex: 1 1 auto; min-width: 0; }

.manualv-chapter {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem 1.75rem 2rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 90px;
}

.manualv-chapter-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.manualv-chapter-title i {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.manualv-chapter-lead {
    color: var(--color-ink-muted);
    font-size: .92rem;
    margin: .75rem 0 1.1rem;
    line-height: 1.6;
}

.manualv-chapter p { line-height: 1.65; margin-bottom: .9rem; }
.manualv-chapter p:last-child { margin-bottom: 0; }

.manualv-chapter ul, .manualv-chapter ol { line-height: 1.65; margin-bottom: 1rem; padding-left: 1.2rem; }
.manualv-chapter li { margin-bottom: .35rem; }

.manualv-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0;
}

.manualv-steps { list-style: none; padding-left: 0; counter-reset: manualv-step; }

.manualv-steps li {
    counter-increment: manualv-step;
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: .9rem;
}

.manualv-steps li::before {
    content: counter(manualv-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manualv-callout {
    display: flex;
    gap: .75rem;
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-tint);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    margin: 1.1rem 0;
    font-size: .85rem;
    line-height: 1.55;
}

.manualv-callout i { font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; color: var(--color-primary); }
.manualv-callout strong { display: block; margin-bottom: .15rem; color: var(--color-ink); }

.manualv-callout-warning {
    border-left-color: var(--color-danger);
    background: var(--color-danger-tint);
}

.manualv-callout-warning i { color: var(--color-danger); }

.manualv-callout-tip {
    border-left-color: var(--color-success);
    background: var(--color-success-tint);
}

.manualv-callout-tip i { color: var(--color-success); }

.manualv-faq-item { border-bottom: 1px solid var(--color-border); }
.manualv-faq-item:last-child { border-bottom: none; }

.manualv-faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .9rem 0;
    font-weight: 700;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.manualv-faq-question i { color: var(--color-ink-muted); transition: transform .2s ease; flex-shrink: 0; }
.manualv-faq-question[aria-expanded="true"] i { transform: rotate(180deg); }
.manualv-faq-answer { color: var(--color-ink-muted); font-size: .88rem; line-height: 1.6; padding-bottom: 1rem; }

.manualv-search-empty {
    text-align: center;
    color: var(--color-ink-muted);
    padding: 3rem 1rem;
}

@media (max-width: 991px) {
    .manualv-toc { display: none; }
    .manualv-shell { display: block; }
}

@media (min-width: 992px) {
    .manualv-mobile-toggle { display: none; }
}

/* =============================================================================
   Aviso de Privacidad / documentos legales (LFPDPPP): nota al pie del
   login, casilla de consentimiento del autorregistro, pie de pagina de
   los 3 paneles, seccion "Privacidad" de Mi perfil, y el encabezado del
   propio visor del Aviso (app/Views/legal/privacy.php), que reutiliza el
   cuerpo .manualv-shell/.manualv-chapter ya definido arriba.
   ============================================================================= */

/* Nota al pie del login compartido (app/Views/auth/login.php) */
.auth-legal-note {
    order: 3;
    width: 100%;
    margin: .5rem 0 0;
    text-align: center;
    font-size: .74rem;
    line-height: 1.5;
    color: rgba(246, 221, 176, .55);
}

.auth-legal-note a {
    color: var(--color-primary);
    text-decoration: underline;
}

.auth-legal-note a:hover { color: var(--color-primary-dark); }

/* Casilla obligatoria del autorregistro (app/Views/registration/create.php) */
.regwiz-consent {
    margin: .25rem 0 1rem;
}

.regwiz-consent-check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}

.regwiz-consent-check + .regwiz-consent-check {
    margin-top: .55rem;
}

.regwiz-consent-check input {
    margin-top: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.regwiz-consent-check a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Pie de pagina con enlaces legales, reutilizado en los layouts de
   Cliente, Empleado y Administrador. */
.app-legal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: .78rem;
    color: var(--color-ink-muted);
}

.app-legal-footer a {
    color: var(--color-ink-muted);
    text-decoration: none;
}

.app-legal-footer a:hover { color: var(--color-primary); text-decoration: underline; }

/* Seccion "Privacidad" del perfil del cliente (variante movil, ver
   app/Views/profile/edit.php) */
.profile-section-title {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
    margin: 1.1rem 0 .4rem .2rem;
}

/* -----------------------------------------------------------------------
   Visor de documentos legales (Aviso de Privacidad, Terminos Clientes,
   Terminos Negocios, Politica de Cookies) -- app/Views/legal/*.php.
   Reutiliza el cuerpo .manualv-shell/.manualv-toc/.manualv-chapter ya
   definido arriba para el Centro de Ayuda; aqui solo se agrega lo propio
   de estas 4 paginas: el contenedor con ancho maximo de lectura, el
   encabezado, el pie de pagina y el boton flotante de volver arriba.
   ----------------------------------------------------------------------- */

/* Contenedor general: limita el ancho en pantallas grandes para que el
   indice + el texto no se estiren de borde a borde. El texto en si va
   mas angosto todavia (.manualv-content, mas abajo) para una linea de
   lectura comoda. */
.legalv-page {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 .25rem;
}

/* Ancla usada por el boton "Ir al inicio" del encabezado -- desplazamiento
   suave gracias a scroll-behavior:smooth (mas abajo), sin JavaScript. */
#legalTop { display: block; scroll-margin-top: 20px; }

.legalv-hero {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    text-align: center;
}

/* Marca de Fiderly (logo + nombre), distinta del icono grande del
   documento -- el usuario pidio ambos elementos por separado. */
.legalv-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: var(--color-ink-muted);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
}

.legalv-brand:hover { color: var(--color-primary); }

.legalv-brand-mark {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-tint);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.legalv-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-primary-contrast);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-soft);
}

.legalv-hero-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: .6rem;
}

.legalv-hero-desc {
    color: var(--color-ink-muted);
    font-size: .96rem;
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto .9rem;
}

.legalv-hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.legalv-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    padding: .3rem .8rem;
    font-size: .74rem;
    font-weight: 700;
}

.legalv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.legalv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-primary-contrast);
    font-weight: 700;
    font-size: .85rem;
    padding: .6rem 1.3rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.legalv-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
    color: var(--color-primary-contrast);
}

/* Botones secundarios del encabezado ("Volver", "Ir al inicio"): mismo
   tamano que el boton principal, pero discretos -- no deben competir
   visualmente con "Imprimir". */
.legalv-action-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink-muted);
    font-weight: 600;
    font-size: .85rem;
    padding: .6rem 1.2rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.legalv-action-btn-outline:hover {
    background: var(--color-primary-tint);
    color: var(--color-ink);
    border-color: transparent;
}

.legalv-intro {
    max-width: 900px;
    margin: 0 auto 1.75rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem 1.5rem;
    color: var(--color-ink-muted);
    line-height: 1.65;
    font-size: .92rem;
}

.legalv-intro strong { color: var(--color-ink); }

.legalv-subtitle {
    font-size: 1rem;
    font-weight: 800;
    margin: 1.25rem 0 .5rem;
    color: var(--color-primary);
}

.legalv-deflist {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: .75rem 0;
}

.legalv-deflist dt {
    color: var(--color-ink-muted);
    font-weight: 600;
    font-size: .85rem;
}

.legalv-deflist dd {
    margin: 0;
    font-weight: 600;
}

.legalv-pending-card {
    max-width: 520px;
    margin: 0 auto 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2.5rem 2rem;
    text-align: center;
}

.legalv-pending-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}

/* Ancho maximo de lectura pedido explicitamente (~900px), aplicado solo
   dentro de las paginas legales -- no afecta al visor de manuales del
   Centro de Ayuda, que vive dentro del panel administrativo y ya esta
   acotado por su propio layout. */
.legalv-page .manualv-content { max-width: 900px; }

.legalv-page .manualv-chapter {
    margin-bottom: 1.75rem;
}

.legalv-page .manualv-chapter-title {
    padding-bottom: .85rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--color-border);
}

/* Pie de pagina de las 4 paginas legales: logo del fabricante, version
   del sistema y enlaces a los 4 documentos. */
.legalv-footer {
    max-width: 900px;
    margin: 2.5rem auto 0;
    padding: 1.5rem 0 .5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.legalv-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-ink-muted);
    font-size: .8rem;
    text-decoration: none;
}

.legalv-footer-brand:hover { color: var(--color-ink); }
.legalv-footer-brand strong { color: var(--color-ink); }
.legalv-footer-logo { height: 22px; width: auto; opacity: .9; }

.legalv-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--color-ink-muted);
}

.legalv-footer-links a { color: var(--color-ink-muted); text-decoration: none; }
.legalv-footer-links a:hover { color: var(--color-primary); text-decoration: underline; }

/* Boton flotante "volver arriba": oculto hasta que _docviewer_scripts.php
   le agrega ".is-visible" tras bajar lo suficiente. */
.legalv-fab-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1030;
}

.legalv-fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.legalv-fab-top:hover { background: var(--color-primary-dark); }
.legalv-fab-top:active { transform: scale(.94); }

/* Desplazamiento suave al usar el indice o el boton "Ir al inicio",
   acotado a las paginas legales (no cambia el comportamiento del resto
   del sistema). */
html:has(.legalv-page) { scroll-behavior: smooth; }

@media (max-width: 991px) {
    .manualv-shell:has(.legalv-hero) { display: block; }
}

@media (max-width: 576px) {
    .legalv-hero-title { font-size: 1.4rem; }
    .legalv-footer { flex-direction: column; text-align: center; justify-content: center; }
    .legalv-footer-links { justify-content: center; }
    .legalv-fab-top { right: 1rem; bottom: 1rem; width: 2.7rem; height: 2.7rem; font-size: 1.1rem; }
}

/* Version imprimible / "Guardar como PDF": solo el texto del documento,
   sin cromo de la aplicacion ni controles. */
@media print {
    .legalv-hero-actions,
    .legalv-brand,
    .manualv-toc,
    .manualv-mobile-toggle,
    .offcanvas,
    .legalv-footer,
    .legalv-fab-top,
    .app-legal-footer,
    .ast3c-credit {
        display: none !important;
    }

    body.public-canvas { background: #fff !important; display: block; }
    .legalv-page { max-width: none; }
    .manualv-shell { display: block; }
    .manualv-content { width: 100%; max-width: none; }
    .manualv-chapter {
        background: #fff;
        color: #000;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-bottom: 1.5rem;
        page-break-inside: avoid;
    }
    .manualv-chapter-title { color: #000; border-bottom-color: #ccc; }
    .manualv-chapter-title i { background: none; color: #000; }
    .legalv-hero-title, .legalv-hero-desc, .legalv-intro, .legalv-deflist dd,
    .legalv-intro strong, .legalv-subtitle, .legalv-meta-pill {
        color: #000;
    }
    .legalv-intro { background: #fff; box-shadow: none; border: 1px solid #ccc; }
    .legalv-meta-pill { background: #fff; border: 1px solid #ccc; }
}

/* Bootstrap ".list-group": igual que ".table-light" arriba, sus variables
   de color traen valores claros fijos que no se derivan de --bs-body-bg,
   asi que hay que reasignarlas para que combinen con el tema oscuro. Ya
   se usaba en admin/clients/edit.php y admin/reports/by-client.php sin
   este ajuste (el hover quedaba en blanco); se corrige aqui de una vez
   para los tres usos existentes, no solo para la seccion "Privacidad". */
.list-group {
    --bs-list-group-color: var(--color-ink);
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-action-color: var(--color-ink);
    --bs-list-group-action-hover-color: var(--color-ink);
    --bs-list-group-action-hover-bg: var(--color-primary-tint);
    --bs-list-group-action-active-color: var(--color-ink);
    --bs-list-group-action-active-bg: var(--color-primary-tint);
    --bs-list-group-disabled-color: var(--color-ink-muted);
    --bs-list-group-disabled-bg: transparent;
    --bs-list-group-active-color: var(--color-primary-contrast);
    --bs-list-group-active-bg: var(--color-primary);
    --bs-list-group-active-border-color: var(--color-primary);
}