/* ========================================
   PORTAL DO CLIENTE - Estilo Minimalista
   ======================================== */

/* ========================================
   CSS VARIABLES — M3 Expressive Tokens
   Mapeamento semântico via dps-design-tokens.css
   
   Requer: dps-design-tokens.css carregado antes deste arquivo.
   ======================================== */

/* Tokens semânticos do portal, mapeados para M3 (via dps-design-tokens.css) */
.dps-client-portal,
.dps-client-portal-access-page,
.dps-chat-widget {
    /* Cores primárias */
    --dps-primary: var(--dps-color-primary);
    --dps-primary-hover: var(--dps-color-primary-hover);
    --dps-primary-active: var(--dps-color-primary-pressed);
    --dps-primary-light: var(--dps-color-primary-container);
    
    /* Cores de estado */
    --dps-success: var(--dps-color-success);
    --dps-success-bg: var(--dps-color-success-container);
    --dps-warning: var(--dps-color-warning);
    --dps-warning-bg: var(--dps-color-warning-container);
    --dps-warning-text: var(--dps-color-on-warning-container);
    --dps-danger: var(--dps-color-error);
    --dps-danger-bg: var(--dps-color-error-container);
    --dps-info: var(--dps-color-primary);
    --dps-error: var(--dps-color-error);
    --dps-error-bg: var(--dps-color-error-container);
    
    /* Cores neutras */
    --dps-white: var(--dps-color-surface-container-lowest);
    --dps-gray-50: var(--dps-color-surface-bright);
    --dps-gray-100: var(--dps-color-surface-container-low);
    --dps-gray-200: var(--dps-color-surface-container);
    --dps-gray-300: var(--dps-color-surface-container-high);
    --dps-gray-400: var(--dps-color-outline);
    --dps-gray-500: var(--dps-color-on-surface-variant);
    --dps-gray-600: var(--dps-color-on-surface-variant);
    --dps-gray-700: var(--dps-color-on-surface);
    --dps-gray-800: var(--dps-color-on-surface);
    --dps-gray-900: var(--dps-color-on-surface);
    
    /* Bordas */
    --dps-border-color: var(--dps-color-outline-variant);
    
    /* Sombras */
    --dps-shadow-sm: var(--dps-elevation-1);
    --dps-shadow: var(--dps-elevation-2);
    --dps-shadow-md: var(--dps-elevation-3);
    --dps-shadow-lg: var(--dps-elevation-4);
    
    /* Tipografia */
    --dps-font-base: var(--dps-font-body);
    --dps-font-mono: var(--dps-font-mono);
}

/* ========================================
   TELA DE ACESSO (Portal Access Screen)
   M3 Expressive — Acolhedor, moderno, confiável
   ======================================== */

/* Animação de entrada M3 Expressive para o card principal */
@keyframes dps-access-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Feedback de sucesso — pulse verde M3 */
@keyframes dps-access-success-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(26, 122, 58, 0.3); }
    70%  { box-shadow: 0 0 0 10px rgba(26, 122, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 122, 58, 0); }
}

/* Reset de escopo — isola de estilos globais do tema WordPress */
.dps-client-portal-access-page,
.dps-client-portal-access-page *,
.dps-client-portal-access-page *::before,
.dps-client-portal-access-page *::after {
    box-sizing: border-box;
}

.dps-client-portal-access-page {
    max-width: 480px;
    margin: var(--dps-space-10) auto;
    padding: 0 var(--dps-space-5);
    font-family: var(--dps-font-body);
    color: var(--dps-gray-700);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* Reset de elementos HTML dentro do escopo — previne override de tema */
.dps-client-portal-access-page h1,
.dps-client-portal-access-page h2,
.dps-client-portal-access-page p {
    margin: 0;
    padding: 0;
    border: none;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.dps-client-portal-access-page a {
    color: inherit;
    text-decoration: none;
}

.dps-client-portal-access-page form {
    margin: 0;
    padding: 0;
}

.dps-client-portal-access-page input,
.dps-client-portal-access-page input[type="email"],
.dps-client-portal-access-page button {
    font-family: inherit;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dps-portal-access {
    width: 100%;
}

.dps-portal-access__card {
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-large);
    padding: var(--dps-space-10) var(--dps-space-8);
    box-shadow: var(--dps-elevation-2);
    animation: dps-access-card-enter
               var(--dps-motion-duration-medium-2)
               var(--dps-motion-easing-emphasized-decelerate)
               both;
}

.dps-portal-access__logo {
    font-size: 56px;
    text-align: center;
    margin: 0 0 var(--dps-space-6);
    line-height: 1;
}

.dps-portal-access__title {
    font-family: var(--dps-font-display);
    font-size: var(--dps-typescale-headline-small-size);
    font-weight: var(--dps-typescale-headline-small-weight);
    color: var(--dps-gray-700);
    text-align: center;
    margin: 0 0 var(--dps-space-3);
    line-height: var(--dps-typescale-headline-small-line);
}

.dps-portal-access__description {
    font-size: var(--dps-typescale-body-large-size);
    color: var(--dps-gray-500);
    line-height: var(--dps-typescale-body-large-line);
    text-align: center;
    margin: 0 0 var(--dps-space-7);
}

.dps-portal-access__error {
    background-color: var(--dps-warning-bg);
    border-left: 3px solid var(--dps-warning);
    border-radius: var(--dps-shape-small);
    padding: var(--dps-space-4);
    margin: 0 0 var(--dps-space-6);
}

.dps-portal-access__error p {
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-warning-text);
    line-height: 1.5;
    margin: 0;
}

.dps-portal-access__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--dps-primary);
    color: var(--dps-color-on-primary);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    text-align: center;
    text-decoration: none;
    padding: var(--dps-space-3) var(--dps-space-6);
    border: none;
    border-radius: var(--dps-shape-button);
    cursor: pointer;
    line-height: 1.2;
    transition: all var(--dps-motion-hover);
    box-shadow: var(--dps-elevation-button);
}

.dps-portal-access__button:hover {
    background-color: var(--dps-primary-hover);
    color: var(--dps-color-on-primary);
    box-shadow: var(--dps-elevation-2);
}

.dps-portal-access__button:active {
    background-color: var(--dps-primary-active);
    box-shadow: var(--dps-elevation-1);
}

.dps-portal-access__button--disabled {
    background-color: var(--dps-gray-200);
    color: var(--dps-gray-400);
    cursor: not-allowed;
    box-shadow: none;
}

.dps-portal-access__button--disabled:hover {
    background-color: var(--dps-gray-200);
    box-shadow: none;
}

.dps-portal-access__note {
    font-size: var(--dps-typescale-body-small-size);
    color: var(--dps-gray-500);
    text-align: center;
    margin: var(--dps-space-5) 0 0;
    line-height: 1.5;
}

.dps-portal-access__note--error {
    color: var(--dps-danger);
}

/* Feedback de solicitação de acesso — M3 */
.dps-portal-access__feedback {
    font-size: var(--dps-typescale-body-medium-size);
    text-align: center;
    margin: var(--dps-space-3) 0 0;
    padding: var(--dps-space-3) var(--dps-space-4);
    border-radius: var(--dps-shape-small);
    background-color: var(--dps-success-bg);
    color: var(--dps-success);
    line-height: 1.5;
    animation: dps-access-card-enter
               var(--dps-motion-duration-short-4)
               var(--dps-motion-easing-emphasized-decelerate)
               both;
}

.dps-portal-access__feedback--success {
    background-color: var(--dps-success-bg);
    color: var(--dps-success);
    animation: dps-access-success-pulse 1.5s ease-out;
}

.dps-portal-access__feedback--error {
    background-color: var(--dps-error-bg);
    color: var(--dps-error);
}

/* Seção de email para solicitar acesso */
.dps-portal-access__email-section {
    margin: 0 0 var(--dps-space-7);
}

.dps-portal-access__subtitle {
    font-family: var(--dps-font-display);
    font-size: var(--dps-typescale-title-medium-size);
    font-weight: var(--dps-typescale-title-medium-weight);
    color: var(--dps-gray-700);
    text-align: center;
    margin: 0 0 var(--dps-space-2);
    line-height: var(--dps-typescale-title-medium-line);
}

.dps-portal-access__email-description {
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-gray-500);
    text-align: center;
    margin: 0 0 var(--dps-space-4);
    line-height: var(--dps-typescale-body-medium-line);
}

.dps-portal-access__email-form {
    width: 100%;
}

.dps-portal-access__email-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--dps-space-3);
    width: 100%;
}

.dps-portal-access__email-input {
    width: 100%;
    min-width: 0;
    padding: 14px var(--dps-space-4);
    font-size: var(--dps-typescale-body-large-size);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    outline: none;
    transition: border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
    background: var(--dps-white);
    color: var(--dps-gray-700);
    line-height: 1.4;
    height: auto;
}

.dps-portal-access__email-input:focus {
    border-color: var(--dps-primary);
    box-shadow: 0 0 0 3px var(--dps-primary-light);
}

.dps-portal-access__email-input::placeholder {
    color: var(--dps-gray-400);
}

.dps-portal-access__email-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--dps-space-3) var(--dps-space-6);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    color: var(--dps-color-on-primary);
    background-color: var(--dps-primary);
    border: none;
    border-radius: var(--dps-shape-button);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    transition: all var(--dps-motion-hover);
    box-shadow: var(--dps-elevation-button);
}

.dps-portal-access__email-button:hover {
    background-color: var(--dps-primary-hover);
    box-shadow: var(--dps-elevation-2);
}

.dps-portal-access__email-button:disabled {
    background-color: var(--dps-gray-300);
    cursor: not-allowed;
    box-shadow: none;
}

/* Seção de WhatsApp */
.dps-portal-access__whatsapp-section {
    padding-top: var(--dps-space-4);
    transition: all var(--dps-motion-enter);
}

.dps-portal-access__whatsapp-section--highlight {
    background-color: var(--dps-warning-bg);
    border-radius: var(--dps-shape-medium);
    padding: var(--dps-space-4);
    margin-top: var(--dps-space-4);
    animation: dps-access-card-enter
               var(--dps-motion-duration-short-4)
               var(--dps-motion-easing-emphasized-decelerate)
               both;
}

.dps-portal-access__divider {
    font-size: var(--dps-typescale-body-small-size);
    color: var(--dps-gray-400);
    text-align: center;
    margin: var(--dps-space-3) 0 var(--dps-space-4);
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dps-space-3);
}

.dps-portal-access__divider::before,
.dps-portal-access__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dps-border-color);
}

.dps-portal-access__whatsapp-description {
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-gray-500);
    text-align: center;
    margin: 0 0 var(--dps-space-3);
}

.dps-portal-access__button--secondary {
    background-color: #25d366;
}

.dps-portal-access__button--secondary:hover {
    background-color: #1fb355;
}

/* Responsivo para formulário de email */
@media (max-width: 480px) {
    .dps-portal-access__card {
        padding: var(--dps-space-7) var(--dps-space-5);
        border-radius: var(--dps-shape-large);
    }
}

/* Acessibilidade: respeitar preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
    .dps-portal-access__card,
    .dps-portal-access__feedback,
    .dps-portal-access__feedback--success,
    .dps-portal-access__whatsapp-section--highlight {
        animation: none;
    }
}

/* ========================================
   PORTAL PRINCIPAL
   ======================================== */

.dps-client-portal {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dps-portal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dps-space-4);
}

.dps-portal-header__main {
    min-width: 0;
}

.dps-portal-header__actions {
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
    margin-left: auto;
}

/* Título principal H1 */
.dps-portal-title {
    margin: 0 0 var(--dps-space-2) 0;
    font-size: var(--dps-typescale-headline-small-size);
    font-weight: var(--dps-typescale-headline-small-weight);
    color: var(--dps-gray-700);
    line-height: 1.3;
}

/* ========================================
   BREADCRUMB / NAVEGAÇÃO
   Contexto de onde o cliente está
   ======================================== */

.dps-portal-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-3) 0;
    margin-bottom: var(--dps-space-2);
    font-size: var(--dps-typescale-body-medium-size);
    color: var(--dps-gray-600);
    flex-wrap: wrap;
}

.dps-portal-breadcrumb__item {
    color: var(--dps-gray-600);
}

.dps-portal-breadcrumb__item--active {
    color: var(--dps-gray-800);
    font-weight: 500;
}

.dps-portal-breadcrumb__separator {
    color: var(--dps-gray-400);
    user-select: none;
}

/* Link de avaliação discreto no breadcrumb */
.dps-portal-review-link {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-2) var(--dps-space-3);
    background: var(--dps-gray-100);
    color: var(--dps-gray-600);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-large);
    font-size: var(--dps-typescale-label-small-size);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--dps-motion-hover);
}

.dps-portal-review-link:hover {
    background: var(--dps-warning-bg);
    color: var(--dps-warning-text);
    border-color: var(--dps-warning);
}

.dps-portal-review-icon {
    font-size: var(--dps-typescale-body-medium-size);
    line-height: 1;
}

.dps-portal-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dps-space-2) var(--dps-space-4);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-full);
    background: var(--dps-white);
    color: var(--dps-gray-700);
    font-size: var(--dps-typescale-label-small-size);
    text-decoration: none;
    transition: all var(--dps-motion-hover);
}

.dps-portal-logout:hover {
    border-color: var(--dps-primary);
    color: var(--dps-primary);
}

.dps-portal-logout:focus-visible {
    outline: 2px solid var(--dps-primary);
    outline-offset: 2px;
}

.dps-portal-review-text {
    display: inline;
}

@media (max-width: 480px) {
    .dps-portal-review-text {
        display: none;
    }
    
    .dps-portal-review-link {
        padding: var(--dps-space-2) var(--dps-space-3);
    }
}

/* ========================================
   NAVEGAÇÃO POR TABS
   Com badges de notificação
   ======================================== */

/* Wrapper com gradientes de overflow para scroll mobile */
.dps-portal-tabs-wrapper {
    position: relative;
}

.dps-portal-tabs-wrapper::before,
.dps-portal-tabs-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dps-portal-tabs-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--dps-gray-50), transparent);
    border-radius: var(--dps-shape-small) 0 0 0;
}

.dps-portal-tabs-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--dps-gray-50), transparent);
    border-radius: 0 var(--dps-shape-small) 0 0;
}

.dps-portal-tabs-wrapper.has-scroll-left::before {
    opacity: 1;
}

.dps-portal-tabs-wrapper.has-scroll-right::after {
    opacity: 1;
}

.dps-portal-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-bottom: none;
    border-radius: var(--dps-shape-small) var(--dps-shape-small) 0 0;
    list-style: none;
}

.dps-portal-tabs__item {
    flex: 1;
    min-width: 0;
}

.dps-portal-tabs__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-4) var(--dps-space-5);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--dps-gray-500);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--dps-typescale-body-medium-size);
    cursor: pointer;
    transition: background var(--dps-motion-hover), color var(--dps-motion-hover), border-color var(--dps-motion-hover);
    white-space: nowrap;
    width: 100%;
}

.dps-portal-tabs__link:hover {
    background: var(--dps-primary-light);
    color: var(--dps-primary);
}

.dps-portal-tabs__link:focus-visible {
    outline: 2px solid var(--dps-primary);
    outline-offset: -2px;
    z-index: 1;
}

.dps-portal-tabs__link.is-active {
    background: var(--dps-white);
    color: var(--dps-primary);
    border-bottom-color: var(--dps-primary);
    font-weight: 600;
}

.dps-portal-tabs__link.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dps-portal-tabs__icon {
    font-size: var(--dps-typescale-title-medium-size);
    line-height: 1;
}

.dps-portal-tabs__text {
    display: inline;
}

/* Badge de notificação nas tabs */
.dps-portal-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--dps-space-2);
    background: var(--dps-danger);
    color: var(--dps-color-on-primary);
    border-radius: var(--dps-shape-full);
    font-size: var(--dps-typescale-label-small-size);
    font-weight: 500;
    line-height: 1;
    margin-left: var(--dps-space-1);
}

.dps-portal-tabs__link.is-active .dps-portal-tabs__badge {
    background: var(--dps-primary);
}

/* Badge especial para fidelidade (pontos) */
.dps-portal-tabs__badge--loyalty {
    background: var(--dps-warning);
    min-width: auto;
    padding: 0 var(--dps-space-2);
}

.dps-portal-tabs__link.is-active .dps-portal-tabs__badge--loyalty {
    background: var(--dps-warning);
}

.dps-portal-tabs__loading {
    display: none;
    position: absolute;
    top: var(--dps-space-2);
    right: var(--dps-space-2);
    align-items: center;
    gap: var(--dps-space-2);
    padding: 2px var(--dps-space-2);
    font-size: var(--dps-typescale-label-small-size);
    color: var(--dps-gray-600);
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-full);
}

.dps-portal-tabs.is-loading .dps-portal-tabs__loading {
    display: inline-flex;
}

.dps-portal-tabs__loading::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--dps-gray-300);
    border-top-color: var(--dps-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Container de conteúdo das tabs */
.dps-portal-tab-content {
    position: relative;
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-top: none;
    border-radius: 0 0 var(--dps-shape-small) var(--dps-shape-small);
    padding: var(--dps-space-6);
}

.dps-portal-tab-content.is-loading {
    opacity: 0.92;
}

/* Painéis individuais */
.dps-portal-tab-panel {
    display: none;
}

.dps-portal-tab-panel.is-active {
    display: block;
    animation: fadeIn var(--dps-motion-enter);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .dps-portal-tab-panel.is-active {
        animation: none;
    }
}

/* Navegação interna (fallback/scroll) */
.dps-portal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    margin-bottom: 1rem;
}

.dps-portal-nav__link {
    padding: 0.5rem 1rem;
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    color: var(--dps-gray-700);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--dps-motion-hover);
}

.dps-portal-nav__link:hover {
    background: var(--dps-primary);
    color: var(--dps-color-on-primary);
    border-color: var(--dps-primary);
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* ========================================
   WIDGET DE CHAT
   ======================================== */

.dps-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Botão flutuante do chat */
.dps-chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    border: none;
    box-shadow: var(--dps-elevation-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dps-motion-enter), box-shadow var(--dps-motion-enter);
    color: #fff;
    font-size: 24px;
}

.dps-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--dps-elevation-4);
}

.dps-chat-toggle:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-chat-toggle__icon {
    transition: transform var(--dps-motion-enter);
}

.dps-chat-toggle.is-open .dps-chat-toggle__icon {
    transform: rotate(45deg);
}

/* Badge de mensagens não lidas */
.dps-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--dps-danger);
    color: #fff;
    border-radius: var(--dps-shape-medium);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.dps-chat-badge:empty {
    display: none;
}

/* Janela do chat */
.dps-chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: 480px;
    max-height: calc(100vh - 120px);
    background: var(--dps-white);
    border-radius: var(--dps-shape-large);
    box-shadow: var(--dps-elevation-5);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.dps-chat-window.is-open {
    display: flex;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header do chat */
.dps-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    color: #fff;
}

.dps-chat-header__info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dps-chat-header__avatar {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dps-chat-header__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.dps-chat-header__status {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dps-chat-header__status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--dps-success);
    border-radius: 50%;
}

.dps-chat-header__close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dps-motion-hover);
}

.dps-chat-header__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.dps-chat-header__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Área de mensagens */
.dps-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--dps-gray-50);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dps-chat-message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: var(--dps-shape-large);
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

.dps-chat-message--client {
    background: var(--dps-primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.dps-chat-message--admin {
    background: var(--dps-white);
    color: var(--dps-gray-700);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--dps-border-color);
}

.dps-chat-message__time {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.7;
}

.dps-chat-message--client .dps-chat-message__time {
    text-align: right;
}

/* Estado vazio do chat */
.dps-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--dps-gray-500);
}

.dps-chat-empty__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.dps-chat-empty__text {
    font-size: 14px;
}

/* Input de mensagem */
.dps-chat-input {
    padding: 16px;
    background: var(--dps-white);
    border-top: 1px solid var(--dps-border-color);
}

.dps-chat-input__form {
    display: flex;
    gap: 8px;
}

.dps-chat-input__field {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-large);
    font-size: 14px;
    outline: none;
    transition: border-color var(--dps-motion-hover);
}

.dps-chat-input__field:focus {
    border-color: var(--dps-primary);
}

.dps-chat-input__field::placeholder {
    color: var(--dps-gray-400);
}

.dps-chat-input__send {
    width: 44px;
    height: 44px;
    background: var(--dps-primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dps-motion-hover);
}

.dps-chat-input__send:hover {
    background: var(--dps-primary-hover);
}

.dps-chat-input__send:disabled {
    background: var(--dps-gray-300);
    cursor: not-allowed;
}

/* Loading spinner no chat */
.dps-chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dps-chat-loading__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--dps-border-color);
    border-top-color: var(--dps-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Seções do portal */
/* ================================================
   SEÇÕES DO PORTAL
   Hierarquia visual clara e espaçamento adequado
   ================================================ */
.dps-portal-section {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-card);
    padding: var(--dps-space-6);
    margin-bottom: var(--dps-space-6);
    box-shadow: var(--dps-elevation-1);
}

.dps-portal-section h2 {
    margin-top: 0;
    margin-bottom: var(--dps-space-5);
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    color: var(--dps-color-on-surface);
    letter-spacing: -0.01em;
    line-height: var(--dps-typescale-title-large-line-height, 28px);
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
}

.dps-portal-section h3 {
    margin-top: var(--dps-space-8);
    margin-bottom: var(--dps-space-4);
    font-size: var(--dps-typescale-title-medium-size, 16px);
    font-weight: var(--dps-typescale-title-medium-weight, 500);
    color: var(--dps-color-on-surface);
}

/* Ícones nos títulos de seção */
.dps-portal-section h2::before {
    font-size: var(--dps-typescale-headline-small-size, 24px);
    line-height: 1;
}

/* Seções com destaque especial */
.dps-portal-section.dps-portal-next {
    border-color: var(--dps-color-primary);
    border-width: 1px;
    border-left: 3px solid var(--dps-color-primary);
    background: var(--dps-color-surface-container-lowest);
}

.dps-portal-section.dps-portal-finances {
    border-color: var(--dps-color-warning);
    border-width: 1px;
    border-left: 3px solid var(--dps-color-warning);
}

/* Feedback visual - Notices */
.dps-portal-notice {
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 4px solid;
    border-radius: var(--dps-shape-small);
    background: var(--dps-white);
    box-shadow: var(--dps-elevation-1);
    font-size: 15px;
    font-weight: 500;
}

.dps-portal-notice--success {
    border-left-color: var(--dps-success);
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-portal-notice--error {
    border-left-color: var(--dps-danger);
    background: var(--dps-danger-bg);
    color: var(--dps-danger);
}

.dps-portal-notice--info {
    border-left-color: var(--dps-primary);
    background: var(--dps-primary-light);
    color: var(--dps-primary-active);
}

/* Alerts */
/* ================================================
   ALERTS E AVISOS
   Com melhor destaque visual e acessibilidade
   ================================================ */
.dps-alert {
    padding: 16px 20px;
    margin-bottom: 24px;
    border-left: 4px solid;
    border-radius: var(--dps-shape-small);
    background: var(--dps-white);
    box-shadow: var(--dps-elevation-1);
    font-size: 15px;
    line-height: 1.6;
}

.dps-alert__content {
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Alert de Warning com mais destaque */
.dps-alert--warning {
    border-left-color: var(--dps-warning);
    background: var(--dps-warning-bg);
    color: var(--dps-warning-text);
}

.dps-alert--warning .dps-alert__content {
    font-weight: 600;
}

/* Alert de Success */
.dps-alert--success {
    border-left-color: var(--dps-success);
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

/* ================================================
   CARD DE PRÓXIMO AGENDAMENTO
   Destaque visual para informação importante
   ================================================ */
/* Lista de agendamentos futuros */
.dps-appointments-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--dps-space-3);
}

.dps-appointment-card {
    display: flex;
    flex-direction: column;
    padding: var(--dps-space-4);
    padding-bottom: 0;
    background: var(--dps-color-primary-container);
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 3px solid var(--dps-color-primary);
    border-radius: var(--dps-shape-card);
    box-shadow: var(--dps-elevation-1);
}

.dps-appointment-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 56px;
    padding: var(--dps-space-2);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border-radius: var(--dps-shape-small);
    flex-shrink: 0;
}

.dps-appointment-card__day {
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    line-height: 1;
}

.dps-appointment-card__month {
    font-size: var(--dps-typescale-body-small-size, 12px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    text-transform: uppercase;
    margin-top: var(--dps-space-1);
    letter-spacing: 0.05em;
    opacity: 0.95;
}

.dps-appointment-card__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--dps-space-1);
    justify-content: center;
    min-width: 0;
}

.dps-appointment-card__body {
    display: flex;
    align-items: flex-start;
    gap: var(--dps-space-4);
}

.dps-appointment-card__time,
.dps-appointment-card__pet,
.dps-appointment-card__services {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface);
    line-height: 1.4;
}

.dps-appointment-card__time {
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
    font-size: var(--dps-typescale-body-medium-size, 14px);
}

.dps-appointment-card__status {
    display: inline-block;
    padding: var(--dps-space-1) var(--dps-space-3);
    background: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface);
    border-radius: var(--dps-shape-extra-small);
    font-size: var(--dps-typescale-label-medium-size, 12px);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    align-self: flex-start;
}

.dps-appointment-card__footer {
    display: flex;
    justify-content: center;
    gap: var(--dps-space-2);
    margin-top: var(--dps-space-3);
    padding: var(--dps-space-3) 0 var(--dps-space-4);
    border-top: 1px solid var(--dps-color-outline-variant);
}

.dps-appointment-card__footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dps-space-1);
    padding: var(--dps-space-2) var(--dps-space-3);
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-button);
    color: var(--dps-color-on-surface);
    font-size: var(--dps-typescale-label-medium-size, 12px);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), transform var(--dps-motion-hover);
    min-height: 36px;
    box-sizing: border-box;
    line-height: 1.2;
}

.dps-appointment-card__footer-btn:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline);
    transform: translateY(-1px);
}

.dps-appointment-card__footer-btn:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* Legacy .dps-appointment-card__action (kept for backward compat) */
.dps-appointment-card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    margin-top: var(--dps-space-1);
    padding: var(--dps-space-2) var(--dps-space-4);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border-radius: var(--dps-shape-button);
    text-decoration: none;
    font-weight: var(--dps-typescale-label-large-weight, 500);
    font-size: var(--dps-typescale-label-large-size, 14px);
    align-self: flex-start;
    transition: background-color var(--dps-motion-hover), transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
    min-height: 36px;
}

.dps-appointment-card__action:hover {
    background: var(--dps-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--dps-elevation-3);
}

/* Weekday no card de data */
.dps-appointment-card__weekday {
    font-size: var(--dps-typescale-body-small-size, 12px);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
    text-transform: uppercase;
    margin-top: 2px;
    opacity: 0.85;
    letter-spacing: 0.05em;
}

/* Badges de hoje/amanhã */
.dps-appointment-card__badge {
    display: inline-block;
    padding: var(--dps-space-1) var(--dps-space-2);
    border-radius: var(--dps-shape-badge);
    font-size: var(--dps-typescale-body-small-size, 12px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--dps-space-1);
}

.dps-appointment-card__badge--today {
    background: var(--dps-color-error-container);
    color: var(--dps-color-error);
    animation: pulse-badge 2s ease-in-out infinite;
    will-change: transform;
}

.dps-appointment-card__badge--tomorrow {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Actions container no card */
.dps-appointment-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dps-space-2);
    margin-top: var(--dps-space-3);
    padding-top: var(--dps-space-3);
    border-top: 1px solid var(--dps-color-outline-variant);
}

.dps-appointment-card__action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-1);
    padding: var(--dps-space-2) var(--dps-space-3);
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-extra-small);
    color: var(--dps-color-on-surface);
    font-size: var(--dps-typescale-body-small-size, 12px);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
    text-decoration: none;
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), color var(--dps-motion-hover);
}

.dps-appointment-card__action-btn:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-primary);
    color: var(--dps-color-primary);
}

.dps-appointment-card__action-btn:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* Status variations */
.dps-appointment-card__status--confirmado,
.dps-appointment-card__status--agendado {
    background: var(--dps-color-success-container);
    color: var(--dps-color-success);
}

.dps-appointment-card__status--pendente {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

/* ================================================
   ESTADO VAZIO
   Mensagens amigáveis e orientativas
   ================================================ */
.dps-empty-state {
    text-align: center;
    padding: var(--dps-space-10) var(--dps-space-5);
    background: var(--dps-color-surface-container-low);
    border-radius: var(--dps-shape-card);
    border: 2px dashed var(--dps-color-outline-variant);
}

.dps-empty-state--appointment {
    padding: var(--dps-space-8) var(--dps-space-6);
}

.dps-empty-state__icon {
    font-size: 72px;
    margin-bottom: var(--dps-space-4);
    opacity: 0.8;
}

.dps-empty-state__title {
    margin: 0 0 var(--dps-space-2) 0;
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    color: var(--dps-color-on-surface);
}

.dps-empty-state__message {
    font-size: var(--dps-typescale-body-large-size, 16px);
    color: var(--dps-color-on-surface-variant);
    margin-bottom: var(--dps-space-5);
    line-height: 1.6;
    font-weight: var(--dps-typescale-body-large-weight, 400);
}

.dps-empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-3) var(--dps-space-6);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border-radius: var(--dps-shape-button);
    text-decoration: none;
    font-weight: var(--dps-typescale-label-large-weight, 500);
    font-size: var(--dps-typescale-label-large-size, 14px);
    transition: all var(--dps-motion-hover);
    min-height: 48px;
}

.dps-empty-state__action:hover {
    background: var(--dps-color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-2);
}

/* ================================================
   AVALIAÇÕES (CTA + PROVA SOCIAL)
   Layout moderno com métricas, formulário e cards
   ================================================ */
.dps-portal-reviews {
    display: grid;
    gap: 24px;
}

.dps-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-800);
}

.dps-section-title__icon {
    font-size: 28px;
}

.dps-section-subtitle {
    margin: 0 0 20px;
    color: var(--dps-gray-600);
    font-size: 15px;
}

/* Métricas Cards */
.dps-reviews-metrics {
    margin-bottom: 8px;
}

.dps-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.dps-metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-2);
}

.dps-metric-card--highlight {
    background: linear-gradient(135deg, var(--dps-warning-bg) 0%, var(--dps-warning-bg) 100%);
    border-color: var(--dps-warning-bg);
}

.dps-metric-card__icon {
    font-size: 28px;
    line-height: 1;
}

.dps-metric-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-metric-card__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--dps-gray-800);
    line-height: 1.1;
}

.dps-metric-card__label {
    font-size: 13px;
    color: var(--dps-gray-600);
    font-weight: 500;
}

/* Grid de duas colunas: Formulário + Google CTA */
.dps-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Card de formulário interno */
.dps-review-form-card {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-large);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dps-review-form-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dps-review-form-card__icon {
    font-size: 36px;
    line-height: 1;
}

.dps-review-form-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-800);
}

.dps-review-form-card__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--dps-gray-600);
}

/* Agradecimento para quem já avaliou */
.dps-review-form-card__thanks {
    text-align: center;
    padding: 32px 16px;
}

.dps-review-form-card__thanks-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.dps-review-form-card__thanks-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-800);
    margin: 0 0 8px;
}

.dps-review-form-card__thanks-hint {
    font-size: 14px;
    color: var(--dps-gray-600);
    margin: 0;
}

/* Formulário de avaliação interna */
.dps-review-internal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Seletor de estrelas interativo */
.dps-star-rating-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-star-rating-label {
    font-weight: 600;
    color: var(--dps-gray-700);
    font-size: 14px;
}

.dps-star-rating-selector {
    display: flex;
    gap: 4px;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.dps-star-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dps-star-label {
    font-size: 36px;
    color: var(--dps-gray-300);
    cursor: pointer;
    transition: color var(--dps-motion-press), transform var(--dps-motion-press);
    line-height: 1;
}

.dps-star-label:hover,
.dps-star-label:hover ~ .dps-star-label {
    color: var(--dps-warning);
    transform: scale(1.1);
}

.dps-star-input:checked ~ .dps-star-label {
    color: var(--dps-warning);
}

.dps-star-input:focus-visible + .dps-star-label {
    outline: 2px solid var(--dps-primary);
    outline-offset: 2px;
    border-radius: var(--dps-shape-extra-small);
}

.dps-star-rating-hint {
    font-size: 12px;
    color: var(--dps-gray-500);
}

/* Campo de comentário */
.dps-review-comment-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dps-review-comment-field label {
    font-weight: 600;
    color: var(--dps-gray-700);
    font-size: 14px;
}

.dps-review-comment-field textarea {
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
    padding: 12px 14px;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-review-comment-field textarea:focus {
    border-color: var(--dps-primary);
    box-shadow: 0 0 0 3px var(--dps-primary-light);
    outline: none;
}

.dps-char-counter {
    font-size: 12px;
    color: var(--dps-gray-500);
    text-align: right;
}

/* Botão de envio */
.dps-btn-submit-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--dps-success) 0%, var(--dps-success) 100%);
    color: #fff;
    border: none;
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--dps-elevation-2);
    transition: all var(--dps-motion-hover);
}

.dps-btn-submit-review:hover {
    background: linear-gradient(135deg, var(--dps-success) 0%, var(--dps-success) 100%);
    transform: translateY(-1px);
    box-shadow: var(--dps-elevation-3);
}

.dps-btn-submit-review .dps-btn-icon {
    font-size: 18px;
}

.dps-btn-submit-review:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-btn-submit-review:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Card do Google Reviews */
.dps-review-google-card {
    background: linear-gradient(135deg, var(--dps-primary-light) 0%, var(--dps-primary-light) 100%);
    border: 1px solid var(--dps-primary-light);
    border-radius: var(--dps-shape-large);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dps-review-google-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dps-review-google-card__logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dps-google-g {
    font-size: 42px;
    font-weight: 700;
    background: linear-gradient(135deg, #4285f4 25%, #ea4335 25%, #ea4335 50%, #fbbc04 50%, #fbbc04 75%, #34a853 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Product Sans', sans-serif;
}

.dps-review-google-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-800);
}

.dps-review-google-card__subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--dps-gray-600);
}

.dps-review-google-card__content {
    flex: 1;
}

.dps-review-google-card__text {
    margin: 0 0 16px;
    color: var(--dps-gray-700);
    line-height: 1.6;
    font-size: 14px;
}

.dps-review-google-card__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-review-google-card__step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--dps-gray-700);
}

.dps-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--dps-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.dps-review-google-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-top: auto;
}

.dps-review-google-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    color: #fff;
    border-radius: var(--dps-shape-small);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: var(--dps-elevation-3);
    transition: all var(--dps-motion-hover);
}

.dps-review-google-btn:hover {
    background: linear-gradient(135deg, var(--dps-primary-hover) 0%, var(--dps-primary-active) 100%);
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-4);
    color: #fff;
}

.dps-review-google-btn:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-review-google-btn__icon {
    font-size: 20px;
}

.dps-review-google-card__hint {
    margin: 0;
    font-size: 13px;
    color: var(--dps-gray-500);
}

/* Seção de Prova Social */
.dps-review-social {
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-large);
    padding: 24px;
    display: grid;
    gap: 20px;
}

.dps-review-social__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dps-review-social__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-800);
}

.dps-review-social__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--dps-warning-bg) 0%, var(--dps-warning-bg) 100%);
    border: 1px solid var(--dps-warning-bg);
    border-radius: var(--dps-shape-large);
}

.dps-review-social__badge-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--dps-gray-800);
}

.dps-stars {
    color: var(--dps-warning);
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1;
}

/* Lista de avaliações */
.dps-review-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dps-review-card {
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
    background: var(--dps-gray-50);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-review-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-2);
}

.dps-review-card__stars {
    display: flex;
    align-items: center;
}

.dps-review-card__author {
    font-weight: 600;
    color: var(--dps-gray-800);
    margin: 0;
    font-size: 15px;
}

.dps-review-card__quote {
    margin: 0;
    color: var(--dps-gray-700);
    line-height: 1.6;
    font-size: 14px;
    font-style: italic;
    border-left: 3px solid var(--dps-primary);
    padding-left: 12px;
}

.dps-review-card__date {
    font-size: 12px;
    color: var(--dps-gray-500);
    display: block;
}

/* Empty state compacto */
.dps-empty-state--compact {
    padding: 32px 20px;
    text-align: center;
}

.dps-empty-state--compact .dps-empty-state__icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.dps-empty-state--compact .dps-empty-state__message {
    font-size: 16px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-empty-state--compact .dps-empty-state__hint {
    margin-top: 8px;
    font-size: 14px;
    color: var(--dps-gray-600);
}

/* Responsividade */
@media (max-width: 900px) {
    .dps-reviews-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .dps-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-star-label {
        font-size: 32px;
    }
    
    .dps-review-form-card,
    .dps-review-google-card {
        padding: 20px;
    }
    
    .dps-review-list {
        grid-template-columns: 1fr;
    }
    
    .dps-review-social__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================================
   RESUMO FINANCEIRO
   Card destacado para pendências ou status positivo
   ================================================ */
.dps-financial-summary {
    display: flex;
    align-items: center;
    gap: var(--dps-space-5);
    padding: var(--dps-space-5);
    background: var(--dps-color-warning-container);
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 3px solid var(--dps-color-warning);
    border-radius: var(--dps-shape-card);
    margin-bottom: var(--dps-space-5);
    box-shadow: var(--dps-elevation-1);
}

.dps-financial-summary--positive {
    background: var(--dps-color-success-container);
    border-left-color: var(--dps-color-success);
    box-shadow: var(--dps-elevation-1);
}

.dps-financial-summary__icon {
    font-size: 48px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-financial-summary__content {
    flex: 1;
}

.dps-financial-summary__title {
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    color: var(--dps-color-on-surface);
    margin-bottom: var(--dps-space-1);
}

.dps-financial-summary__amount {
    font-size: var(--dps-typescale-headline-small-size, 24px);
    font-weight: var(--dps-typescale-headline-small-weight, 400);
    color: var(--dps-color-warning);
    line-height: 1.2;
}

.dps-financial-summary--positive .dps-financial-summary__amount {
    color: var(--dps-color-success);
}

.dps-financial-summary__message {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface-variant);
    margin-top: var(--dps-space-1);
}

.dps-financial-summary__action .button {
    min-height: 48px;
    padding: var(--dps-space-3) var(--dps-space-6);
    font-weight: var(--dps-typescale-label-large-weight, 500);
}

/* Detalhes financeiros (toggle) */
.dps-financial-details {
    margin-top: var(--dps-space-5);
}

/* Botão "Pagar Tudo" */
.dps-financial-pay-all {
    margin-top: var(--dps-space-5);
    padding-top: var(--dps-space-5);
    border-top: 1px solid var(--dps-color-outline-variant);
}

.dps-financial-pay-all__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dps-space-4);
}

.dps-financial-pay-all__label {
    font-size: var(--dps-typescale-body-large-size, 16px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
}

.dps-financial-pay-all__amount {
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    color: var(--dps-color-warning);
}

.dps-btn-pay-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--dps-space-3) var(--dps-space-6);
    min-height: 40px;
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border: none;
    border-radius: var(--dps-shape-button);
    font-size: var(--dps-typescale-label-large-size, 14px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    cursor: pointer;
    transition: all var(--dps-motion-hover);
}

.dps-btn-pay-all:hover {
    background: var(--dps-color-primary-hover);
    box-shadow: var(--dps-elevation-2);
}

.dps-btn-pay-all:focus-visible {
    outline: 2px solid var(--dps-color-on-primary);
    outline-offset: 2px;
}

/* Seção colapsável */
.dps-collapsible .dps-collapsible__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.dps-collapsible .dps-collapsible__header:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
    border-radius: var(--dps-shape-extra-small);
}

.dps-collapsible .dps-collapsible__header h2 {
    margin-bottom: 0;
}

.dps-collapsible__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dps-color-on-surface-variant);
    transition: transform var(--dps-motion-expand);
}

.dps-collapsible.is-collapsed .dps-collapsible__icon {
    transform: rotate(-90deg);
}

.dps-collapsible.is-collapsed .dps-collapsible__content {
    display: none;
}

.dps-collapsible .dps-collapsible__content {
    margin-top: var(--dps-space-5);
}

@media (max-width: 640px) {
    .dps-financial-summary {
        flex-direction: column;
        text-align: center;
    }
    
    .dps-financial-summary__icon {
        font-size: 64px;
    }
    
    .dps-financial-summary__action {
        width: 100%;
    }
    
    .dps-financial-summary__action .button {
        width: 100%;
    }
}

/* ================================================
   SUGESTÕES CONTEXTUAIS
   Cards com dicas baseadas no histórico do cliente
   ================================================ */
.dps-portal-suggestions {
    background: var(--dps-color-primary-container);
    border-left: 3px solid var(--dps-color-primary);
}

.dps-suggestion-card {
    display: flex;
    align-items: flex-start;
    gap: var(--dps-space-4);
    padding: var(--dps-space-4);
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-small);
    margin-bottom: var(--dps-space-3);
}

.dps-suggestion-card:last-child {
    margin-bottom: 0;
}

.dps-suggestion-card__icon {
    font-size: var(--dps-typescale-headline-large-size, 32px);
    line-height: 1;
    flex-shrink: 0;
}

.dps-suggestion-card__content {
    flex: 1;
}

.dps-suggestion-card__message {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface);
    margin: 0 0 var(--dps-space-3) 0;
    line-height: 1.6;
}

.dps-suggestion-card__cta {
    margin: 0;
}

.dps-suggestion-card__button {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-2) var(--dps-space-5);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border-radius: var(--dps-shape-button);
    text-decoration: none;
    font-weight: var(--dps-typescale-label-large-weight, 500);
    font-size: var(--dps-typescale-label-large-size, 14px);
    transition: all var(--dps-motion-hover);
    min-height: 44px;
}

.dps-suggestion-card__button:hover {
    background: var(--dps-color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--dps-elevation-3);
}

.dps-suggestion-card__button:focus-visible {
    outline: 2px solid var(--dps-color-on-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .dps-suggestion-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .dps-suggestion-card__icon {
        font-size: 48px;
    }
    
    .dps-suggestion-card__button {
        width: 100%;
        justify-content: center;
    }
}

/* Tabelas */
.dps-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.dps-table th,
.dps-table td {
    border-bottom: 1px solid var(--dps-border-color);
    padding: 0.75rem;
    text-align: left;
}

.dps-table thead {
    background: var(--dps-gray-50);
}

.dps-table th {
    font-weight: 600;
    color: var(--dps-gray-700);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dps-table td {
    color: var(--dps-gray-700);
}

/* Botão de pagamento */
.dps-btn-pay {
    background: var(--dps-success) !important;
    border-color: var(--dps-success) !important;
    color: #fff !important;
}

.dps-btn-pay:hover {
    background: var(--dps-success) !important;
    border-color: var(--dps-success) !important;
}

.dps-btn-pay:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* Fieldsets */
.dps-fieldset {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    padding: 20px;
    margin-bottom: 1.5rem;
}

.dps-fieldset__legend {
    font-weight: 600;
    color: var(--dps-gray-700);
    font-size: 16px;
    padding: 0 8px;
}

/* Formulários */
.dps-portal-form input[type="text"],
.dps-portal-form input[type="email"],
.dps-portal-form input[type="tel"],
.dps-portal-form input[type="date"],
.dps-portal-form select,
.dps-portal-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    font-size: 16px;
}

.dps-portal-form input:focus,
.dps-portal-form select:focus,
.dps-portal-form textarea:focus {
    outline: none;
    border-color: var(--dps-primary);
}

.dps-submit-btn {
    position: relative;
}

.dps-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dps-submit-btn.is-loading::after {
    content: "...";
    animation: loading 1s infinite;
}

@keyframes loading {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* Grid responsivo para formulários */
.dps-form-row {
    display: grid;
    gap: 16px;
    margin-bottom: 12px;
}

.dps-form-row--2col {
    grid-template-columns: 1fr 1fr;
}

.dps-form-row--3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.dps-form-col {
    margin: 0;
}

/* Upload de arquivo estilizado */
.dps-file-upload {
    margin-bottom: 12px;
}

.dps-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.dps-file-upload__label {
    display: inline-block;
    padding: 10px 20px;
    background: var(--dps-gray-50);
    border: 2px dashed var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    cursor: pointer;
    transition: all var(--dps-motion-hover);
}

.dps-file-upload__label:hover {
    border-color: var(--dps-primary);
    background: var(--dps-primary-light);
}

.dps-file-upload__text {
    display: inline-block;
}

.dps-file-upload__preview {
    margin-top: 12px;
    max-width: 200px;
}

.dps-file-upload__preview img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dps-shape-extra-small);
    border: 1px solid var(--dps-border-color);
}

/* ========================================
   GALERIA DE FOTOS - LAYOUT MODERNO (Revisão Jan/2026)
   Refatorado para seguir padrão das abas Avaliações e Fidelidade
   ======================================== */

/* Container principal */
.dps-portal-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header da galeria */
.dps-gallery-header {
    margin-bottom: 8px;
}

.dps-gallery-header .dps-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 8px 0;
}

.dps-gallery-header .dps-section-title__icon {
    font-size: 28px;
}

.dps-gallery-header .dps-section-subtitle {
    font-size: 15px;
    color: var(--dps-gray-500);
    margin: 0;
}

/* Cards de Métricas */
.dps-gallery-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dps-gallery-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 20px;
    transition: box-shadow var(--dps-motion-hover);
}

.dps-gallery-metric-card:hover {
    box-shadow: var(--dps-shadow-sm);
}

.dps-gallery-metric-card--highlight {
    background-color: var(--dps-primary-light);
    border-color: var(--dps-primary);
    border-left: 4px solid var(--dps-primary);
}

.dps-gallery-metric-card__icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-gallery-metric-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dps-gallery-metric-card__value {
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-900);
    line-height: 1.2;
}

.dps-gallery-metric-card__label {
    font-size: 14px;
    color: var(--dps-gray-500);
}

/* Filtro por Pet */
.dps-gallery-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    background-color: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
}

.dps-gallery-filter__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-gray-700);
}

.dps-gallery-filter__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dps-gallery-filter__btn {
    padding: 8px 16px;
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-large);
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-gray-600);
    cursor: pointer;
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), color var(--dps-motion-hover);
}

.dps-gallery-filter__btn:hover {
    background-color: var(--dps-gray-100);
    color: var(--dps-gray-800);
}

.dps-gallery-filter__btn:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

.dps-gallery-filter__btn.is-active {
    background-color: var(--dps-primary);
    border-color: var(--dps-primary);
    color: var(--dps-white);
}

/* Container de conteúdo */
.dps-gallery-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Card de Pet */
.dps-gallery-pet-card {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
    transition: box-shadow var(--dps-motion-hover);
}

.dps-gallery-pet-card:hover {
    box-shadow: var(--dps-shadow-sm);
}

.dps-gallery-pet-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background-color: var(--dps-gray-50);
    border-bottom: 1px solid var(--dps-border-color);
}

.dps-gallery-pet-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0;
}

.dps-gallery-pet-card__icon {
    font-size: 20px;
}

.dps-gallery-pet-card__content {
    padding: 20px;
}

/* Grid de Fotos */
.dps-gallery-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Item de Foto */
.dps-gallery-photo {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-gallery-photo:hover {
    transform: translateY(-2px);
    box-shadow: var(--dps-shadow-md);
}

.dps-gallery-photo--profile {
    border-left: 4px solid var(--dps-primary);
}

.dps-gallery-photo--grooming {
    border-left: 4px solid var(--dps-success);
}

.dps-gallery-photo__link {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.dps-gallery-photo__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dps-motion-enter);
}

.dps-gallery-photo:hover .dps-gallery-photo__img {
    transform: scale(1.05);
}

.dps-gallery-photo__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dps-motion-enter);
}

.dps-gallery-photo:hover .dps-gallery-photo__overlay {
    opacity: 1;
}

.dps-gallery-photo__zoom {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.dps-gallery-photo__info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-gallery-photo__label {
    font-size: 13px;
    color: var(--dps-gray-600);
    line-height: 1.3;
}

.dps-gallery-photo__actions {
    display: flex;
    gap: 8px;
}

.dps-gallery-photo__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--dps-shape-small);
    background-color: var(--dps-gray-100);
    color: var(--dps-gray-600);
    text-decoration: none;
    transition: background-color var(--dps-motion-hover), color var(--dps-motion-hover);
}

.dps-gallery-photo__action:hover {
    background-color: var(--dps-gray-200);
    color: var(--dps-gray-800);
}

.dps-gallery-photo__action:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

.dps-gallery-photo__action--whatsapp:hover {
    background-color: var(--dps-success);
    color: var(--dps-white);
}

.dps-gallery-photo__action--download:hover {
    background-color: var(--dps-primary);
    color: var(--dps-white);
}

.dps-gallery-photo__action-icon {
    font-size: 18px;
}

/* Pet sem fotos */
.dps-gallery-pet-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.dps-gallery-pet-card__empty-icon {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 16px;
}

.dps-gallery-pet-card__empty-text {
    font-size: 16px;
    color: var(--dps-gray-600);
    margin: 0 0 8px 0;
}

.dps-gallery-pet-card__empty-hint {
    font-size: 14px;
    color: var(--dps-gray-400);
    margin: 0;
}

/* Nota informativa */
.dps-gallery-info {
    padding: 16px 20px;
    background-color: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
}

.dps-gallery-info__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--dps-gray-600);
    margin: 0;
}

.dps-gallery-info__icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Estado vazio da galeria */
.dps-gallery-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background-color: var(--dps-gray-50);
    border: 2px dashed var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    text-align: center;
}

.dps-gallery-empty-state__icon {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 20px;
}

.dps-gallery-empty-state__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 8px 0;
}

.dps-gallery-empty-state__message {
    font-size: 15px;
    color: var(--dps-gray-500);
    margin: 0 0 8px 0;
    max-width: 400px;
}

.dps-gallery-empty-state__hint {
    font-size: 14px;
    color: var(--dps-gray-400);
    margin: 0 0 24px 0;
}

.dps-gallery-empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--dps-primary);
    color: var(--dps-white);
    text-decoration: none;
    border-radius: var(--dps-shape-small);
    font-weight: 500;
    font-size: 15px;
    transition: background-color var(--dps-motion-hover);
}

.dps-gallery-empty-state__action:hover {
    background-color: var(--dps-primary-hover);
    color: var(--dps-white);
}

/* Responsividade da Galeria */
@media (max-width: 768px) {
    .dps-gallery-metrics {
        grid-template-columns: 1fr 1fr;
    }
    
    .dps-gallery-metric-card {
        padding: 16px;
    }
    
    .dps-gallery-metric-card__icon {
        font-size: 28px;
    }
    
    .dps-gallery-metric-card__value {
        font-size: 20px;
    }
    
    .dps-gallery-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dps-gallery-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }
    
    .dps-gallery-pet-card__header {
        padding: 12px 16px;
    }
    
    .dps-gallery-pet-card__content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .dps-gallery-metrics {
        grid-template-columns: 1fr;
    }
    
    .dps-gallery-photo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .dps-gallery-photo__info {
        padding: 8px;
    }
    
    .dps-gallery-photo__label {
        font-size: 12px;
    }
    
    .dps-gallery-photo__action {
        width: 32px;
        height: 32px;
    }
    
    .dps-gallery-photo__action-icon {
        font-size: 16px;
    }
}

/* Legado: mantém compatibilidade com estruturas antigas */
.dps-portal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.dps-portal-photo-item {
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    padding: 0.75rem;
    text-align: center;
}

.dps-share-whatsapp {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--dps-success);
    color: #fff;
    border-radius: var(--dps-shape-extra-small);
    text-decoration: none;
    font-weight: 500;
}

.dps-share-whatsapp:hover {
    background: var(--dps-success);
}

/* ========================================
   LIGHTBOX - Visualização ampliada de fotos
   Galeria de Fotos - Janeiro 2026
   ======================================== */

.dps-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.dps-lightbox.is-active {
    display: flex;
}

.dps-lightbox__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
}

.dps-lightbox__container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.dps-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--dps-white);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dps-motion-hover);
}

.dps-lightbox__close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.dps-lightbox__close:focus-visible {
    outline: 2px solid var(--dps-white);
    outline-offset: 2px;
}

.dps-lightbox__img {
    max-width: 100%;
    max-height: calc(90vh - 80px);
    border-radius: var(--dps-shape-small);
    box-shadow: var(--dps-elevation-5);
}

.dps-lightbox__caption {
    margin-top: 16px;
    font-size: 16px;
    color: var(--dps-white);
    text-align: center;
}

.dps-lightbox__actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.dps-lightbox__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background-color: var(--dps-primary);
    color: var(--dps-white);
    text-decoration: none;
    border-radius: var(--dps-shape-small);
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--dps-motion-hover);
}

.dps-lightbox__btn:hover {
    background-color: var(--dps-primary-hover);
    color: var(--dps-white);
}

/* Responsividade do Lightbox */
@media (max-width: 768px) {
    .dps-lightbox__container {
        max-width: 95vw;
    }
    
    .dps-lightbox__close {
        top: -44px;
        width: 36px;
        height: 36px;
        font-size: 28px;
    }
    
    .dps-lightbox__caption {
        font-size: 14px;
        padding: 0 16px;
    }
}

/* ========================================
   CENTRAL DE MENSAGENS - LAYOUT MODERNO
   Refatorado para seguir padrão das abas Avaliações e Fidelidade
   ======================================== */

/* Container principal */
.dps-portal-messages {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards de Métricas */
.dps-messages-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dps-messages-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 20px;
    transition: box-shadow var(--dps-motion-hover);
}

.dps-messages-metric-card:hover {
    box-shadow: var(--dps-shadow-sm);
}

.dps-messages-metric-card--highlight {
    background-color: var(--dps-primary-light);
    border-color: var(--dps-primary);
    border-left: 4px solid var(--dps-primary);
}

.dps-messages-metric-card__icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-messages-metric-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dps-messages-metric-card__value {
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-900);
    line-height: 1.2;
}

.dps-messages-metric-card__label {
    font-size: 14px;
    color: var(--dps-gray-500);
}

/* Grid Layout: Caixa de Entrada + Formulário */
.dps-messages-grid {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 400px);
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .dps-messages-grid {
        grid-template-columns: 1fr;
    }
}

/* Caixa de Entrada (Inbox) */
.dps-messages-inbox {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
}

.dps-messages-inbox__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--dps-gray-50);
    border-bottom: 1px solid var(--dps-border-color);
}

.dps-messages-inbox__icon {
    font-size: 28px;
    line-height: 1;
}

.dps-messages-inbox__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-900);
    margin: 0 0 4px 0;
}

.dps-messages-inbox__subtitle {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0;
}

/* Lista de Mensagens */
.dps-portal-messages__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 500px;
    overflow-y: auto;
}

/* Estilo individual de mensagem */
.dps-portal-message {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--dps-white);
    border-bottom: 1px solid var(--dps-gray-100);
    transition: background-color var(--dps-motion-hover);
}

.dps-portal-message:hover {
    background-color: var(--dps-gray-50);
}

.dps-portal-message:last-child {
    border-bottom: none;
}

.dps-portal-message--unread {
    background-color: var(--dps-primary-light);
}

.dps-portal-message--unread:hover {
    background-color: var(--dps-primary-light);
}

/* Avatar do remetente */
.dps-portal-message__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    background-color: var(--dps-gray-100);
}

.dps-portal-message--admin .dps-portal-message__avatar {
    background-color: var(--dps-primary-light);
}

.dps-portal-message--client .dps-portal-message__avatar {
    background-color: var(--dps-success-bg);
}

/* Corpo da mensagem */
.dps-portal-message__body {
    flex: 1;
    min-width: 0;
}

/* Badge de não lida */
.dps-portal-message__unread-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--dps-primary);
    color: var(--dps-white);
    border-radius: var(--dps-shape-medium);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Meta info */
.dps-portal-message__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.dps-portal-message__author {
    font-weight: 600;
    font-size: 15px;
    color: var(--dps-gray-900);
}

.dps-portal-message__date {
    font-size: 13px;
    color: var(--dps-gray-500);
}

/* Tipo de mensagem com ícone */
.dps-portal-message__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: var(--dps-gray-100);
    color: var(--dps-gray-700);
    border-radius: var(--dps-shape-medium);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}

.dps-portal-message__type-icon {
    font-size: 14px;
}

/* Título da mensagem */
.dps-portal-message__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dps-gray-800);
    margin: 0 0 8px 0;
}

/* Conteúdo da mensagem */
.dps-portal-message__content {
    color: var(--dps-gray-700);
    font-size: 14px;
    line-height: 1.6;
}

.dps-portal-message__content p {
    margin: 0 0 8px 0;
}

.dps-portal-message__content p:last-child {
    margin-bottom: 0;
}

/* Link de ação */
.dps-portal-message__action {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dps-gray-100);
}

.dps-portal-message__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dps-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color var(--dps-motion-hover);
}

.dps-portal-message__link:hover {
    color: var(--dps-primary-hover);
    text-decoration: underline;
}

/* Estado vazio de mensagens */
.dps-messages-empty {
    padding: 48px 24px;
    text-align: center;
}

.dps-messages-empty__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.dps-messages-empty__message {
    font-size: 16px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin-bottom: 8px;
}

.dps-messages-empty__hint {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0;
}

/* Header da mensagem individual */
.dps-portal-message__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 12px;
}

.dps-portal-message__sender {
    font-weight: 600;
    font-size: 14px;
    color: var(--dps-gray-800);
}

.dps-portal-message__time {
    font-size: 12px;
    color: var(--dps-gray-500);
    flex-shrink: 0;
}

.dps-portal-message__text {
    font-size: 14px;
    color: var(--dps-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* CTA para abrir chat */
.dps-messages-cta {
    text-align: center;
    padding: 8px 0;
}

.dps-btn-open-chat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    color: #fff;
    border: none;
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--dps-elevation-2);
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-btn-open-chat:hover {
    transform: translateY(-1px);
    box-shadow: var(--dps-elevation-3);
}

.dps-btn-open-chat:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-btn-open-chat .dps-btn-icon {
    font-size: 18px;
}

/* Formulário de Nova Mensagem (Compose) */
.dps-messages-compose {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
}

.dps-messages-compose__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--dps-success-bg);
    border-bottom: 1px solid var(--dps-border-color);
}

.dps-messages-compose__icon {
    font-size: 28px;
    line-height: 1;
}

.dps-messages-compose__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-900);
    margin: 0 0 4px 0;
}

.dps-messages-compose__subtitle {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0;
}

.dps-messages-compose__content {
    padding: 24px;
}

/* Fieldset do formulário */
.dps-messages-compose__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.dps-messages-compose__legend {
    font-weight: 600;
    font-size: 14px;
    color: var(--dps-gray-700);
    margin-bottom: 12px;
    padding: 0;
    border: none;
}

.dps-messages-compose__instructions {
    font-size: 14px;
    color: var(--dps-gray-600);
    margin-bottom: 20px;
    line-height: 1.5;
    padding: 12px 16px;
    background-color: var(--dps-gray-50);
    border-radius: var(--dps-shape-extra-small);
    border-left: 3px solid var(--dps-primary);
}

/* Campos de formulário */
.dps-messages-compose .dps-form-field {
    margin-bottom: 20px;
}

.dps-messages-compose .dps-form-field label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--dps-gray-700);
    margin-bottom: 6px;
}

.dps-form-optional {
    font-weight: 400;
    color: var(--dps-gray-500);
    font-size: 13px;
}

.dps-messages-compose .dps-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    font-size: 15px;
    transition: border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-messages-compose .dps-form-control:focus {
    outline: none;
    border-color: var(--dps-primary);
    box-shadow: 0 0 0 3px var(--dps-primary-light);
}

.dps-messages-compose textarea.dps-form-control {
    min-height: 140px;
    resize: vertical;
}

.dps-form-hint {
    font-size: 13px;
    color: var(--dps-gray-500);
    margin-top: 8px;
    font-style: italic;
}

/* Ações do formulário */
.dps-messages-compose__actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dps-gray-100);
}

.dps-messages-compose__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--dps-shape-small);
    cursor: pointer;
    transition: all var(--dps-motion-hover);
}

.dps-messages-compose__submit-icon {
    font-size: 16px;
}

/* ========================================
   RESPONSIVIDADE MOBILE
   ======================================== */

/* Tabelas responsivas em mobile */
/* ================================================
   RESPONSIVE MOBILE (640px e abaixo)
   Otimizado para telas pequenas com foco em UX
   ================================================ */
@media (max-width: 640px) {
    /* Breadcrumb mais compacto em mobile */
    .dps-portal-breadcrumb {
        font-size: 13px;
        padding: 8px 0;
        margin-bottom: 12px;
    }
    
    /* Tabs em mobile - scroll horizontal com snap */
    .dps-portal-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
    }
    
    .dps-portal-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .dps-portal-tabs__item {
        flex: 0 0 auto;
        min-width: max-content;
        scroll-snap-align: start;
    }
    
    .dps-portal-tabs__link {
        padding: 12px 16px;
        font-size: 13px;
        min-height: 48px; /* Mínimo para tocabilidade */
    }
    
    .dps-portal-tabs__text {
        display: inline;
    }
    
    .dps-portal-tabs__icon {
        font-size: 18px;
    }
    
    .dps-portal-tab-content {
        padding: 16px;
        border-radius: 0 0 var(--dps-shape-extra-small) var(--dps-shape-extra-small);
    }
    
    /* Seções do portal com espaçamento adequado */
    .dps-portal-section {
        margin-bottom: 24px; /* Mais espaço entre seções */
    }
    
    .dps-portal-section h2 {
        font-size: 20px; /* Título menor mas legível */
        margin-bottom: 16px;
    }
    
    /* Chat widget em mobile */
    .dps-chat-window {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 60px);
        max-height: none;
        border-radius: var(--dps-shape-large) var(--dps-shape-large) 0 0;
    }
    
    .dps-chat-toggle {
        width: 56px; /* Maior para melhor tocabilidade */
        height: 56px;
        bottom: 16px;
        right: 16px;
    }
    
    /* Navegação sticky em mobile para acesso rápido */
    .dps-portal-nav {
        position: sticky;
        top: 0;
        z-index: 100;
        flex-direction: column;
        background: var(--dps-white);
        box-shadow: var(--dps-elevation-1);
        margin-left: -16px;
        margin-right: -16px;
        margin-top: -20px;
        margin-bottom: 20px;
        padding: 12px 16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .dps-portal-nav__link {
        text-align: center;
        padding: 12px 16px; /* Aumentado para tocabilidade */
        font-size: 15px;
        min-height: 48px;
    }
    
    /* Container do portal ajustado para navegação sticky */
    .dps-client-portal {
        padding-top: 0;
    }
    
    /* Grid forms em mobile - 1 coluna */
    .dps-form-row--2col,
    .dps-form-row--3col {
        grid-template-columns: 1fr;
    }
    
    /* Botões 100% largura em mobile com altura mínima para tocabilidade */
    .dps-submit-btn,
    .button {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }
    
    /* Card de agendamento em mobile - mais visual */
    .dps-appointment-card {
        flex-direction: row; /* Horizontal é melhor que vertical */
        align-items: flex-start;
        text-align: left;
        padding: 16px;
        gap: 16px;
    }
    
    .dps-appointment-card__date {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
    }
    
    .dps-appointment-card__day {
        font-size: 32px;
    }
    
    .dps-appointment-card__month {
        font-size: 14px;
    }
    
    .dps-appointment-card__details {
        flex: 1;
        align-items: flex-start;
    }
    
    .dps-appointment-card__time,
    .dps-appointment-card__pet,
    .dps-appointment-card__services {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    /* ================================================
       TABELAS → CARDS EM MOBILE
       Layout card-based para melhor legibilidade
       ================================================ */
    
    /* Esconde o cabeçalho da tabela */
    .dps-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    
    /* Remove border da tbody */
    .dps-table tbody {
        border: none;
    }
    
    /* Cada linha vira um card */
    .dps-table tr {
        display: block;
        margin-bottom: 16px;
        padding: 16px;
        background: var(--dps-white);
        border: 1px solid var(--dps-border-color);
        border-radius: var(--dps-shape-small);
        box-shadow: var(--dps-elevation-1);
    }
    
    /* Células em layout grid com label */
    .dps-table td {
        display: grid;
        grid-template-columns: minmax(100px, 0.4fr) 1fr;
        gap: 12px;
        align-items: start;
        border: none;
        padding: 10px 0;
        text-align: left;
        font-size: 15px;
    }
    
    /* Linha divisória entre campos */
    .dps-table td:not(:last-child) {
        border-bottom: 1px solid var(--dps-gray-100);
    }
    
    /* Label dinâmico via data-label */
    .dps-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--dps-gray-600);
        font-size: 14px;
        letter-spacing: 0.02em;
    }
    
    /* Valor da célula com contraste adequado */
    .dps-table td {
        color: var(--dps-gray-800);
        font-weight: 500;
    }
    
    /* Botão de ação ocupa linha inteira */
    .dps-table td form {
        grid-column: 1 / -1;
        display: block !important;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--dps-gray-100);
    }
    
    /* Botões em mobile - largura total e tocáveis */
    .dps-table td button,
    .dps-table td .button {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    /* Ações de tabela em cards mobile */
    .dps-table-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--dps-gray-100);
    }
    
    .dps-table-actions .dps-btn {
        flex: 1;
        min-height: 44px;
        font-size: 14px;
    }
    
    /* Galeria em mobile - limitar altura */
    .dps-portal-gallery-grid {
        grid-template-columns: 1fr;
        max-height: 400px;
        overflow-y: auto;
        padding-right: 8px;
    }
    
    /* Scrollbar estilizado para galeria */
    .dps-portal-gallery-grid::-webkit-scrollbar {
        width: 6px;
    }
    
    .dps-portal-gallery-grid::-webkit-scrollbar-track {
        background: var(--dps-gray-100);
        border-radius: var(--dps-shape-extra-small);
    }
    
    .dps-portal-gallery-grid::-webkit-scrollbar-thumb {
        background: var(--dps-gray-300);
        border-radius: var(--dps-shape-extra-small);
    }
    
    .dps-portal-gallery-grid::-webkit-scrollbar-thumb:hover {
        background: var(--dps-gray-400);
    }
    
    /* Seções do portal com mais espaço */
    .dps-portal-section {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .dps-portal-section h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }
    
    /* Centro de mensagens mais compacto */
    .dps-portal-messages__list {
        max-height: 300px;
    }

    .dps-portal-header {
        flex-direction: column;
    }

    .dps-portal-header__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (min-width: 768px) {
    .dps-client-portal {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Elementos que devem ocupar toda a largura (2 colunas) */
    .dps-portal-section,
    .dps-portal-breadcrumb,
    .dps-portal-tabs-wrapper,
    .dps-portal-tabs,
    .dps-portal-tab-content,
    .dps-portal-header {
        grid-column: span 2;
    }

    /* Seções lado a lado (1 coluna cada) */
    .dps-portal-section.dps-portal-next,
    .dps-portal-section.dps-portal-finances {
        grid-column: span 1;
    }
}

/* Layout refinado para telas grandes (1024px+) */
@media (min-width: 1024px) {
    .dps-client-portal {
        padding: 0 20px;
    }
    
    .dps-portal-tabs {
        flex-wrap: nowrap;
    }
    
    .dps-portal-tabs__item {
        flex: 0 1 auto;
    }
    
    .dps-portal-tabs__link {
        padding: 1rem 1.5rem;
    }
    
    .dps-portal-tab-content {
        padding: 32px;
    }
    
    .dps-portal-section {
        padding: 28px;
    }
}

.dps-client-logins {
    display: grid;
    gap: 1.25rem;
}

.dps-client-logins__title {
    margin: 0;
    font-size: 1.6rem;
    color: var(--dps-gray-900);
}

.dps-client-logins__feedback {
    display: grid;
    gap: 0.75rem;
}

.dps-client-logins__notice {
    border-radius: var(--dps-shape-extra-small);
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.dps-client-logins__notice--success {
    background: var(--dps-success-bg);
    color: var(--dps-success);
    border: 1px solid var(--dps-success);
}

.dps-client-logins__notice--error {
    background: var(--dps-danger-bg);
    color: var(--dps-danger);
    border: 1px solid var(--dps-danger-bg);
}

.dps-client-logins__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--dps-gray-600);
}

.dps-client-logins__summary-item strong {
    color: var(--dps-gray-900);
}

.dps-client-logins__filters {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
}

.dps-client-logins__field {
    display: grid;
    gap: 0.25rem;
}

.dps-client-logins__label {
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-client-logins__filters input[type="search"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dps-gray-300);
    border-radius: var(--dps-shape-extra-small);
    font-size: 1rem;
}

.dps-client-logins__field--checkbox {
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
}

.dps-client-logins__field--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.dps-client-logins__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dps-client-logins__table-wrapper {
    overflow-x: auto;
}

.dps-client-logins__table {
    width: 100%;
    border-collapse: collapse;
}

.dps-client-logins__table th,
.dps-client-logins__table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

.dps-client-logins__table thead {
    background: var(--dps-gray-50);
}

.dps-client-logins__cell-id {
    font-weight: 700;
    color: var(--dps-gray-900);
}

.dps-client-logins__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--dps-shape-full);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dps-client-logins__badge--active {
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-client-logins__badge--inactive {
    background: var(--dps-gray-50);
    color: var(--dps-gray-600);
}

.dps-client-logins__code {
    display: inline-block;
    margin: 0.4rem 0 0;
    padding: 0.2rem 0.5rem;
    background: var(--dps-gray-900);
    color: var(--dps-gray-50);
    border-radius: var(--dps-shape-extra-small);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.95rem;
}

.dps-client-logins__hint {
    display: block;
    margin-top: 0.35rem;
    color: var(--dps-gray-500);
    font-size: 0.8rem;
}

.dps-client-logins__actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dps-client-logins__action {
    white-space: nowrap;
}

.dps-client-logins__empty {
    margin: 0;
    padding: 1.25rem;
    background: var(--dps-gray-50);
    border: 1px dashed var(--dps-gray-300);
    border-radius: var(--dps-shape-small);
    color: var(--dps-gray-600);
    text-align: center;
    font-weight: 500;
}

.dps-client-logins--restricted {
    padding: 1.5rem;
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
    color: var(--dps-gray-600);
    text-align: center;
}

@media (max-width: 782px) {
    .dps-client-logins__table thead {
        display: none;
    }

    .dps-client-logins__table tr {
        display: block;
        border: 1px solid var(--dps-gray-200);
        border-radius: var(--dps-shape-small);
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        background: var(--dps-white);
    }

    .dps-client-logins__table td {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 0.35rem;
        border: none;
        padding: 0.35rem 0;
    }

    .dps-client-logins__table td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--dps-gray-800);
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .dps-client-logins__actions-cell {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.5rem;
    }
    
    /* Tela de acesso em mobile */
    .dps-portal-access__title {
        font-size: 20px;
    }
    
    .dps-portal-access__description {
        font-size: 14px;
    }
    
    .dps-portal-access__button {
        font-size: 15px;
        padding: 12px 20px;
    }
}

/* ========================================
   TOAST NOTIFICATIONS (Fase 1.5)
   Sistema de notificações não-intrusivas
   ======================================== */

.dps-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    pointer-events: none;
}

.dps-toast {
    background: var(--dps-white);
    border-left: 4px solid var(--dps-primary);
    border-radius: var(--dps-shape-small);
    box-shadow: var(--dps-shadow-lg);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
    max-width: 100%;
}

.dps-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.dps-toast.hide {
    opacity: 0;
    transform: translateX(400px);
}

.dps-toast__icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-toast__content {
    flex: 1;
    min-width: 0;
}

.dps-toast__title {
    font-weight: 600;
    font-size: 15px;
    color: var(--dps-gray-900);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.dps-toast__message {
    font-size: 14px;
    color: var(--dps-gray-600);
    margin: 0;
    line-height: 1.5;
}

.dps-toast__close {
    background: none;
    border: none;
    color: var(--dps-gray-400);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: color var(--dps-motion-hover);
}

.dps-toast__close:hover {
    color: var(--dps-gray-700);
}

/* Tipos de toast */
.dps-toast--success {
    border-left-color: var(--dps-success);
}

.dps-toast--success .dps-toast__icon {
    color: var(--dps-success);
}

.dps-toast--error {
    border-left-color: var(--dps-danger);
}

.dps-toast--error .dps-toast__icon {
    color: var(--dps-danger);
}

.dps-toast--warning {
    border-left-color: var(--dps-warning);
}

.dps-toast--warning .dps-toast__icon {
    color: var(--dps-warning);
}

.dps-toast--info {
    border-left-color: var(--dps-info);
}

.dps-toast--info .dps-toast__icon {
    color: var(--dps-info);
}

/* Responsividade */
@media (max-width: 768px) {
    .dps-toast-container {
        bottom: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .dps-toast {
        max-width: 100%;
    }
}

/* ========================================
   SKELETON LOADERS (Fase 2.7)
   Melhora percepção de velocidade
   ======================================== */

.dps-skeleton {
    background: linear-gradient(
        90deg,
        var(--dps-gray-200) 25%,
        var(--dps-gray-100) 50%,
        var(--dps-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--dps-shape-extra-small);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton variants */
.dps-skeleton--text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: var(--dps-shape-extra-small);
}

.dps-skeleton--text:last-child {
    width: 80%;
}

.dps-skeleton--title {
    height: 24px;
    width: 40%;
    margin-bottom: 16px;
    border-radius: var(--dps-shape-extra-small);
}

.dps-skeleton--card {
    height: 120px;
    margin-bottom: 16px;
    border-radius: var(--dps-shape-small);
}

.dps-skeleton--table-row {
    height: 48px;
    margin-bottom: 8px;
    border-radius: var(--dps-shape-extra-small);
}

.dps-skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.dps-skeleton--button {
    height: 40px;
    width: 120px;
    border-radius: var(--dps-shape-extra-small);
}

/* Skeleton container para múltiplos elementos */
.dps-skeleton-container {
    padding: 20px;
}

/* Specific loaders para seções do portal */
.dps-portal-skeleton-history {
    padding: 20px;
}

.dps-portal-skeleton-history .dps-skeleton--title {
    width: 200px;
    margin-bottom: 24px;
}

.dps-portal-skeleton-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px;
}

.dps-portal-skeleton-gallery .dps-skeleton--card {
    height: 200px;
}

/* Hide skeleton quando conteúdo carregar */
.dps-content-loaded .dps-skeleton {
    display: none;
}

/* Acessibilidade */
.dps-skeleton[aria-hidden="true"] {
    pointer-events: none;
}

/* ========================================
   CALENDAR INTEGRATION (Fase 2.8)
   Botões de ação na tabela de histórico
   ======================================== */

.dps-table-actions {
    white-space: nowrap;
}

.dps-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--dps-primary);
    color: var(--dps-white);
    text-decoration: none;
    border-radius: var(--dps-shape-extra-small);
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--dps-motion-hover);
    border: none;
    cursor: pointer;
}

.dps-btn:hover {
    background-color: var(--dps-primary-hover);
    color: var(--dps-white);
}

.dps-btn--small {
    padding: 6px 12px;
    font-size: 13px;
}

.dps-btn--secondary {
    background-color: var(--dps-gray-200);
    color: var(--dps-gray-700);
}

.dps-btn--secondary:hover {
    background-color: var(--dps-gray-300);
    color: var(--dps-gray-800);
}

/* Responsividade para ações */
@media (max-width: 768px) {
    .dps-table-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .dps-btn--small {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   ABA HISTÓRICO DOS PETS - Layout Moderno (Revisão Jan/2026)
   ======================================== */

/* === Cabeçalho da Aba === */
.dps-portal-pet-history-header {
    margin-bottom: 24px;
    padding-bottom: 0;
}

.dps-pet-history-header {
    margin-bottom: 24px;
}

.dps-pet-history-header .dps-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 8px 0;
}

.dps-pet-history-header .dps-section-title__icon {
    font-size: 28px;
}

.dps-pet-history-header .dps-section-subtitle {
    font-size: 15px;
    color: var(--dps-gray-500);
    margin: 0;
}

/* === Métricas do Histórico === */
.dps-metrics-grid--pet-history {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 992px) {
    .dps-metrics-grid--pet-history {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dps-metrics-grid--pet-history {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.dps-metric-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
    transition: box-shadow var(--dps-motion-hover);
}

.dps-metric-card:hover {
    box-shadow: var(--dps-shadow-sm);
}

.dps-metric-card--primary {
    background: linear-gradient(135deg, var(--dps-primary-light) 0%, var(--dps-primary-light) 100%);
    border-color: var(--dps-primary-light);
}

.dps-metric-card--highlight {
    background: linear-gradient(135deg, var(--dps-warning-bg) 0%, var(--dps-warning-bg) 100%);
    border-color: var(--dps-warning-bg);
}

.dps-metric-card__icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-metric-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-metric-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--dps-gray-800);
    line-height: 1.1;
}

.dps-metric-card__value--text {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.dps-metric-card__label {
    font-size: 13px;
    color: var(--dps-gray-500);
    line-height: 1.3;
}

/* === Navegação por Pet (Tabs) === */
.dps-pet-tabs-nav {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
}

.dps-pet-tabs-nav__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dps-gray-600);
    margin-bottom: 12px;
}

.dps-pet-tabs-nav__tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.dps-pet-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--dps-gray-50);
    border: 2px solid transparent;
    border-radius: var(--dps-shape-full);
    cursor: pointer;
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-pet-tab:hover {
    background: var(--dps-gray-100);
}

.dps-pet-tab:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

.dps-pet-tab--active {
    background: linear-gradient(135deg, var(--dps-primary-light) 0%, var(--dps-primary-light) 100%);
    border-color: var(--dps-primary);
}

.dps-pet-tab__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dps-white);
    box-shadow: var(--dps-shadow-sm);
}

.dps-pet-tab__icon {
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dps-white);
    border-radius: 50%;
}

.dps-pet-tab__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-pet-tab--active .dps-pet-tab__name {
    color: var(--dps-primary-active);
}

/* === Card de Informações do Pet === */
.dps-pet-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--dps-white) 0%, var(--dps-gray-50) 100%);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    margin-bottom: 24px;
}

.dps-pet-info-card__avatar {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--dps-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--dps-white);
    box-shadow: var(--dps-shadow);
}

.dps-pet-info-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dps-pet-info-card__placeholder {
    font-size: 32px;
}

.dps-pet-info-card__details {
    flex: 1;
}

.dps-pet-info-card__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--dps-gray-800);
    margin: 0 0 4px 0;
}

.dps-pet-info-card__breed {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0 0 8px 0;
}

.dps-pet-info-card__count {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--dps-success-bg);
    color: var(--dps-success);
    border-radius: var(--dps-shape-large);
    font-size: 13px;
    font-weight: 600;
}

/* === Timeline de Serviços (Atualizado) === */

.dps-pet-timeline-panel--hidden {
    display: none;
}

.dps-pet-timelines-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dps-timeline {
    position: relative;
    padding: 16px 0;
}

.dps-timeline-item {
    position: relative;
    padding-left: 44px;
    margin-bottom: 24px;
}

.dps-timeline-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: -24px;
    width: 2px;
    background: linear-gradient(to bottom, var(--dps-primary), var(--dps-gray-200));
}

.dps-timeline-item:last-child::before {
    display: none;
}

.dps-timeline-marker {
    position: absolute;
    left: 0;
    top: 6px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    border-radius: 50%;
    border: 3px solid var(--dps-white);
    box-shadow: var(--dps-elevation-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dps-timeline-marker::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.dps-timeline-content {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
    transition: box-shadow var(--dps-motion-hover), transform var(--dps-motion-hover);
}

.dps-timeline-content:hover {
    box-shadow: var(--dps-shadow-md);
    transform: translateX(4px);
}

/* Timeline Header (data + status) */
.dps-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.dps-timeline-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-timeline-date__day {
    font-size: 15px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-timeline-date__time {
    font-size: 13px;
    color: var(--dps-gray-500);
}

/* Timeline Service */
.dps-timeline-service {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dps-gray-800);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dps-gray-100);
}

.dps-timeline-service__icon {
    font-size: 18px;
}

.dps-timeline-service__text {
    flex: 1;
}

/* Timeline Meta (profissional, valor) */
.dps-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.dps-timeline-meta__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--dps-gray-600);
}

.dps-timeline-meta__icon {
    font-size: 14px;
}

.dps-timeline-meta__item--value {
    font-weight: 600;
    color: var(--dps-success);
}

/* Timeline Notes (observações com details/summary) */
.dps-timeline-notes {
    margin-bottom: 12px;
}

.dps-timeline-notes__details {
    background: var(--dps-gray-50);
    border-radius: var(--dps-shape-small);
    overflow: hidden;
}

.dps-timeline-notes__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-gray-600);
    transition: background var(--dps-motion-hover);
    list-style: none;
}

.dps-timeline-notes__summary::-webkit-details-marker {
    display: none;
}

.dps-timeline-notes__summary::after {
    content: '▼';
    font-size: 10px;
    margin-left: auto;
    transition: transform var(--dps-motion-hover);
}

.dps-timeline-notes__details[open] .dps-timeline-notes__summary::after {
    transform: rotate(180deg);
}

.dps-timeline-notes__summary:hover {
    background: var(--dps-gray-100);
}

.dps-timeline-notes__icon {
    font-size: 14px;
}

.dps-timeline-notes__text {
    padding: 0 14px 14px 14px;
    margin: 0;
    font-size: 14px;
    color: var(--dps-gray-600);
    line-height: 1.5;
}

.dps-timeline-professional {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin-top: 8px;
}

/* Timeline Actions */
.dps-timeline-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--dps-gray-100);
    display: flex;
    gap: 12px;
}

.dps-btn-repeat-service {
    font-size: 14px;
    padding: 10px 20px;
    flex: 1;
    justify-content: center;
}

/* Timeline Load More */
.dps-timeline-load-more {
    text-align: center;
    padding: 20px 0;
}

.dps-btn-load-more-services {
    padding: 12px 24px;
}

/* === Estado Vazio Grande (Empty State) === */
.dps-empty-state--large {
    padding: 60px 40px;
    text-align: center;
}

.dps-empty-state__illustration {
    font-size: 80px;
    margin-bottom: 24px;
    opacity: 0.7;
}

.dps-portal-pet-history-empty .dps-empty-state__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 12px 0;
}

.dps-portal-pet-history-empty .dps-empty-state__message {
    font-size: 16px;
    color: var(--dps-gray-500);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* === Responsividade Mobile === */
@media (max-width: 768px) {
    .dps-pet-history-header .dps-section-title {
        font-size: 20px;
    }

    .dps-pet-tabs-nav {
        padding: 16px;
    }

    .dps-pet-tabs-nav__tabs {
        gap: 8px;
    }

    .dps-pet-tab {
        padding: 10px 16px;
    }

    .dps-pet-tab__photo,
    .dps-pet-tab__icon {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    .dps-pet-tab__name {
        font-size: 14px;
    }

    .dps-pet-info-card {
        padding: 16px;
    }

    .dps-pet-info-card__avatar {
        width: 56px;
        height: 56px;
    }

    .dps-pet-info-card__name {
        font-size: 18px;
    }

    .dps-timeline-item {
        padding-left: 36px;
    }

    .dps-timeline-marker {
        width: 24px;
        height: 24px;
    }

    .dps-timeline-marker::after {
        font-size: 10px;
    }

    .dps-timeline-content {
        padding: 16px;
    }

    .dps-timeline-header {
        flex-direction: column;
        gap: 8px;
    }

    .dps-timeline-actions {
        flex-direction: column;
    }

    .dps-btn-repeat-service {
        width: 100%;
    }

    .dps-metric-card {
        padding: 16px;
    }

    .dps-metric-card__value {
        font-size: 24px;
    }

    .dps-metric-card__icon {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .dps-pet-tabs-nav__tabs {
        flex-direction: column;
    }

    .dps-pet-tab {
        width: 100%;
        justify-content: flex-start;
    }

    .dps-empty-state--large {
        padding: 40px 20px;
    }

    .dps-empty-state__illustration {
        font-size: 60px;
    }
}

/* === Gráfico de Frequência (Funcionalidade 2) === */
.dps-history-insights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .dps-history-insights {
        grid-template-columns: 1fr;
    }
}

.dps-frequency-chart {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
}

.dps-frequency-chart__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 4px 0;
}

.dps-frequency-chart__icon {
    font-size: 18px;
}

.dps-frequency-chart__subtitle {
    font-size: 13px;
    color: var(--dps-gray-500);
    margin: 0 0 20px 0;
}

.dps-chart-container {
    padding: 10px 0;
}

.dps-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    height: 150px;
}

.dps-bar-chart__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.dps-bar-chart__bar-wrapper {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dps-bar-chart__bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    border-radius: var(--dps-shape-extra-small) var(--dps-shape-extra-small) 0 0;
    min-height: 8px;
    position: relative;
    transition: height var(--dps-motion-enter);
}

.dps-bar-chart__bar[data-count="0"] {
    background: var(--dps-gray-200);
}

.dps-bar-chart__value {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-bar-chart__label {
    font-size: 11px;
    color: var(--dps-gray-500);
    text-align: center;
    white-space: nowrap;
}

/* === Lembrete de Próximo Agendamento (Funcionalidade 5) === */
.dps-next-appointment-reminder {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-card);
    padding: var(--dps-space-6);
    border-left: 3px solid var(--dps-color-primary);
}

.dps-next-appointment-reminder.dps-reminder--soon {
    border-left-color: var(--dps-color-warning);
    background: var(--dps-color-warning-container);
}

.dps-next-appointment-reminder.dps-reminder--overdue {
    border-left-color: var(--dps-color-error);
    background: var(--dps-color-error-container);
}

.dps-reminder__header {
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
    margin-bottom: var(--dps-space-4);
}

.dps-reminder__icon {
    font-size: var(--dps-typescale-headline-small-size, 24px);
}

.dps-reminder__title {
    font-size: var(--dps-typescale-body-large-size, 16px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
    margin: 0;
}

.dps-reminder__content {
    display: flex;
    flex-direction: column;
    gap: var(--dps-space-3);
}

.dps-reminder__text {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface-variant);
    line-height: 1.6;
    margin: 0;
}

.dps-reminder__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dps-space-3);
}

.dps-reminder__interval {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-1);
    font-size: var(--dps-typescale-body-small-size, 12px);
    color: var(--dps-color-on-surface-variant);
    background: var(--dps-color-surface-container-low);
    padding: var(--dps-space-1) var(--dps-space-3);
    border-radius: var(--dps-shape-chip);
}

.dps-reminder__cta {
    align-self: flex-start;
    margin-top: var(--dps-space-2);
}

/* === Barra de Ações do Pet (Export PDF) === */
.dps-pet-actions-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.dps-btn-export-pdf {
    padding: 10px 20px;
}

@media (max-width: 480px) {
    .dps-pet-actions-bar {
        flex-direction: column;
    }

    .dps-btn-export-pdf {
        width: 100%;
    }

    .dps-bar-chart {
        height: 120px;
    }

    .dps-bar-chart__value {
        font-size: 11px;
        top: -20px;
    }

    .dps-bar-chart__label {
        font-size: 10px;
    }

    .dps-reminder__cta {
        width: 100%;
        text-align: center;
    }
}

/* Ações Rápidas do Agendamento */
.dps-appointment-actions {
    display: flex;
    gap: var(--dps-space-3);
    margin-top: var(--dps-space-3);
    padding-top: var(--dps-space-3);
    border-top: 1px solid var(--dps-color-outline-variant);
    flex-wrap: wrap;
}

.dps-btn-reschedule,
.dps-btn-cancel {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dps-space-2);
    min-height: 40px;
    padding: var(--dps-space-2) var(--dps-space-4);
    font-size: var(--dps-typescale-label-large-size, 14px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-button);
    background: var(--dps-color-surface-container-lowest);
    color: var(--dps-color-on-surface);
    cursor: pointer;
    transition: all var(--dps-motion-hover);
    box-sizing: border-box;
    line-height: 1.2;
}

.dps-btn-reschedule:hover,
.dps-btn-cancel:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline);
    transform: translateY(-1px);
}

/* Cards de Solicitações */
.dps-portal-requests {
    margin-top: 0;
}

.dps-requests-list {
    display: grid;
    gap: var(--dps-space-4);
}

.dps-request-card {
    background-color: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-left: 3px solid var(--dps-color-outline);
    border-radius: var(--dps-shape-small);
    padding: var(--dps-space-5);
    transition: box-shadow var(--dps-motion-hover);
}

.dps-request-card:hover {
    box-shadow: var(--dps-elevation-1);
}

.dps-request-card.status-pending {
    border-left-color: var(--dps-color-warning);
}

.dps-request-card.status-confirmed {
    border-left-color: var(--dps-color-success);
}

.dps-request-card.status-rejected {
    border-left-color: var(--dps-color-error);
}

.dps-request-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dps-space-4);
}

.dps-request-card__type {
    font-size: var(--dps-typescale-body-large-size, 16px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
}

.dps-request-card__status {
    display: inline-block;
    padding: var(--dps-space-1) var(--dps-space-3);
    background-color: var(--dps-color-surface-container);
    color: var(--dps-color-on-surface);
    border-radius: var(--dps-shape-badge);
    font-size: var(--dps-typescale-label-medium-size, 12px);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
}

.status-pending .dps-request-card__status {
    background-color: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.status-confirmed .dps-request-card__status {
    background-color: var(--dps-color-success-container);
    color: var(--dps-color-success);
}

.status-rejected .dps-request-card__status {
    background-color: var(--dps-color-error-container);
    color: var(--dps-color-error);
}

.dps-request-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--dps-space-2);
}

.dps-request-card__pet,
.dps-request-card__date {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface);
}

.dps-request-card__confirmed {
    margin-top: var(--dps-space-3);
    padding-top: var(--dps-space-3);
    border-top: 1px solid var(--dps-color-surface-container);
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-success);
}

.dps-request-card__notes {
    margin-top: var(--dps-space-3);
    padding: var(--dps-space-3);
    background-color: var(--dps-color-surface-container-low);
    border-radius: var(--dps-shape-extra-small);
    font-size: var(--dps-typescale-body-medium-size, 14px);
    color: var(--dps-color-on-surface-variant);
}

/* Modal de Pedido de Agendamento */
.dps-appointment-request-modal.dps-modal {
    z-index: 99999;
}

.dps-modal__notice {
    padding: 16px;
    background-color: var(--dps-warning-bg);
    border-left: 4px solid var(--dps-warning);
    border-radius: var(--dps-shape-extra-small);
    font-size: 14px;
    color: var(--dps-warning-text);
    margin-bottom: 24px;
}

.dps-modal__notice strong {
    font-weight: 600;
}

.dps-request-form .dps-form-field {
    margin-bottom: 20px;
}

.dps-request-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dps-gray-700);
}

.dps-request-form .required {
    color: var(--dps-danger);
}

.dps-request-form input[type="date"],
.dps-request-form select,
.dps-request-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    font-size: 14px;
    font-family: inherit;
}

.dps-request-form input[type="date"]:focus,
.dps-request-form select:focus,
.dps-request-form textarea:focus {
    outline: none;
    border-color: var(--dps-primary);
    box-shadow: 0 0 0 3px var(--dps-primary-light);
}

.dps-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

/* Responsivo para Timeline e Modais */
@media (max-width: 768px) {
    .dps-timeline-item {
        padding-left: 30px;
    }
    
    .dps-timeline-marker {
        width: 20px;
        height: 20px;
    }
    
    .dps-appointment-actions {
        flex-direction: column;
    }
    
    .dps-form-actions {
        flex-direction: column-reverse;
    }
    
    .dps-form-actions button {
        width: 100%;
    }
}

/* ========================================
   FASE 4 CONTINUAÇÃO: PREFERÊNCIAS E BRANDING
   (Estilos de mensagens movidos para seção dedicada acima)
   ======================================== */

/* Preferências do Cliente e Pet */
.dps-preferences-section {
    background-color: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.dps-preferences-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-900);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-preferences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.dps-preference-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-preference-item__label {
    font-weight: 500;
    color: var(--dps-gray-700);
    font-size: 14px;
}

.dps-preference-item__value {
    color: var(--dps-gray-900);
    padding: 10px 14px;
    background-color: var(--dps-gray-50);
    border-radius: var(--dps-shape-extra-small);
    border: 1px solid var(--dps-gray-200);
}

.dps-preference-item__value.is-empty {
    color: var(--dps-gray-400);
    font-style: italic;
}

.dps-preferences-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--dps-gray-100);
}

/* Pet Preferences Card */
.dps-pet-preferences {
    background-color: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 20px;
    margin-top: 20px;
}

.dps-pet-preferences__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dps-gray-900);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-pet-preferences__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dps-pet-preference {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dps-pet-preference__label {
    font-weight: 500;
    font-size: 13px;
    color: var(--dps-gray-600);
}

.dps-pet-preference__text {
    color: var(--dps-gray-900);
    font-size: 14px;
}

/* Branding - Logo e Hero Image */
.dps-portal-header--branded {
    position: relative;
}

.dps-portal-hero {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: var(--dps-shape-small);
    margin-bottom: 24px;
}

.dps-portal-logo {
    max-width: 200px;
    max-height: 80px;
    margin-bottom: 20px;
}

/* Aplicação de Cor Primária Customizada */
.dps-portal-branded .button-primary,
.dps-portal-branded .dps-portal-tabs__link.is-active {
    background-color: var(--dps-custom-primary, var(--dps-primary));
    border-color: var(--dps-custom-primary, var(--dps-primary));
}

.dps-portal-branded .button-primary:hover {
    background-color: var(--dps-custom-primary-hover, var(--dps-primary-hover));
}

.dps-portal-branded a {
    color: var(--dps-custom-primary, var(--dps-primary));
}

.dps-portal-branded .dps-timeline-marker {
    background-color: var(--dps-custom-primary, var(--dps-primary));
}

.dps-portal-branded .dps-portal-message--unread {
    border-left-color: var(--dps-custom-primary, var(--dps-primary));
}

.dps-portal-branded .dps-portal-message__unread-badge {
    background-color: var(--dps-custom-primary, var(--dps-primary));
}

/* Responsivo para Preferências */
@media (max-width: 768px) {
    .dps-preferences-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-portal-hero {
        height: 150px;
    }
    
    .dps-portal-logo {
        max-width: 150px;
    }
}

/* Fidelidade */
.dps-portal-loyalty {
    display: grid;
    gap: 20px;
}

.dps-loyalty-hero {
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
}

.dps-loyalty-hero__greeting {
    margin: 0 0 4px;
    color: var(--dps-gray-900);
    font-weight: 600;
}

.dps-loyalty-hero__title {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--dps-gray-900);
}

.dps-loyalty-tier {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.dps-loyalty-tier__icon {
    font-size: 28px;
}

.dps-loyalty-tier__name {
    font-weight: 700;
    color: var(--dps-gray-900);
}

.dps-loyalty-tier__hint {
    display: block;
    color: var(--dps-gray-500);
    font-size: 12px;
}

.dps-loyalty-progress__bar {
    width: 100%;
    height: 10px;
    border-radius: var(--dps-shape-full);
    background: var(--dps-gray-200);
    overflow: hidden;
    margin-bottom: 6px;
}

.dps-loyalty-progress__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--dps-success), var(--dps-primary));
}

.dps-loyalty-progress__text {
    font-size: 12px;
    color: var(--dps-gray-700);
    font-weight: 600;
}

.dps-loyalty-stats {
    display: grid;
    gap: 12px;
}

@media (min-width: 720px) {
    .dps-loyalty-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dps-loyalty-card {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    background: var(--dps-white);
}

.dps-loyalty-card__label {
    margin: 0;
    color: var(--dps-gray-500);
    font-size: 13px;
}

.dps-loyalty-card__value {
    margin: 4px 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--dps-gray-900);
}

.dps-loyalty-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dps-loyalty-referral-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    font-size: 14px;
    background: var(--dps-gray-50);
}

.dps-button-link {
    border: none;
    background: none;
    color: var(--dps-primary);
    cursor: pointer;
    padding: 0;
    font-weight: 600;
}

.dps-loyalty-history {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    background: var(--dps-white);
}

.dps-loyalty-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dps-loyalty-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.dps-loyalty-history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
}

.dps-loyalty-history__context {
    margin: 0;
    font-weight: 600;
    color: var(--dps-gray-900);
}

.dps-loyalty-history__date {
    color: var(--dps-gray-500);
    font-size: 12px;
}

.dps-loyalty-history__points {
    font-weight: 700;
    min-width: 64px;
    text-align: right;
}

.dps-loyalty-history__points--add {
    color: var(--dps-success);
}

.dps-loyalty-history__points--redeem,
.dps-loyalty-history__points--portal_redemption {
    color: var(--dps-danger);
}

.dps-loyalty-history__empty {
    margin: 0;
    color: var(--dps-gray-500);
}

.dps-loyalty-history-more {
    margin-top: 12px;
}

.dps-loyalty-redemption {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    background: var(--dps-gray-50);
}

.dps-loyalty-redemption__hint {
    margin-top: 4px;
    color: var(--dps-gray-600);
}

.dps-loyalty-redemption__feedback {
    margin-top: 8px;
    font-size: 14px;
}

.dps-loyalty-redemption__feedback.is-success {
    color: var(--dps-success);
}

.dps-loyalty-redemption__feedback.is-error {
    color: var(--dps-danger);
}

.dps-loyalty-redemption--disabled {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 16px;
    background: var(--dps-gray-100);
    color: var(--dps-gray-500);
}

.dps-loyalty-achievements {
    margin-top: 20px;
    border-top: 1px solid var(--dps-border-color);
    padding-top: 16px;
}

.dps-loyalty-achievements__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.dps-loyalty-achievement {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 10px;
    display: flex;
    gap: 10px;
    background: var(--dps-white);
}

.dps-loyalty-achievement__icon {
    font-size: 24px;
}

.dps-loyalty-achievement__title {
    margin: 0;
    font-weight: 600;
}

.dps-loyalty-achievement__desc {
    margin: 4px 0;
    color: var(--dps-gray-500);
    font-size: 13px;
}

.dps-loyalty-achievement__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--dps-shape-medium);
    font-size: 12px;
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-loyalty-achievement.is-locked {
    opacity: 0.7;
    background: var(--dps-gray-50);
}

.dps-loyalty-achievement.is-locked .dps-loyalty-achievement__status {
    background: var(--dps-gray-200);
    color: var(--dps-gray-600);
}

/* ========================================
   ABA INÍCIO - Layout Modernizado
   Dashboard, Quick Actions, Pets Summary
   ======================================== */

/* Layout vertical empilhado da aba Início */
.dps-inicio-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dps-space-6);
    margin-bottom: var(--dps-space-6);
}

/* ========================================
   OVERVIEW CARDS - Métricas Rápidas
   ======================================== */

.dps-portal-overview {
    margin-bottom: var(--dps-space-6);
}

.dps-overview-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dps-space-3);
}

@media (min-width: 640px) {
    .dps-overview-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--dps-space-4);
    }
}

.dps-overview-card {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-card);
    padding: var(--dps-space-4);
    display: flex;
    align-items: center;
    gap: var(--dps-space-3);
    transition: box-shadow var(--dps-motion-hover), transform var(--dps-motion-hover);
}

.dps-overview-card:hover {
    box-shadow: var(--dps-elevation-2);
    transform: translateY(-2px);
}

.dps-overview-card__icon {
    font-size: var(--dps-typescale-headline-small-size, 24px);
    line-height: 1;
    flex-shrink: 0;
}

.dps-overview-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dps-overview-card__value {
    font-size: var(--dps-typescale-headline-small-size, 24px);
    font-weight: var(--dps-typescale-headline-small-weight, 400);
    color: var(--dps-color-on-surface);
    line-height: 1.1;
}

.dps-overview-card__label {
    font-size: var(--dps-typescale-body-small-size, 12px);
    color: var(--dps-color-on-surface-variant);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variantes de cor para os cards */
.dps-overview-card--appointments {
    border-left: 3px solid var(--dps-color-primary);
}

.dps-overview-card--pets {
    border-left: 3px solid var(--dps-color-tertiary);
}

.dps-overview-card--messages {
    border-left: 3px solid var(--dps-color-secondary);
}

.dps-overview-card--messages.dps-overview-card--has-badge {
    border-left-color: var(--dps-color-error);
    background: var(--dps-color-error-container);
}

.dps-overview-card--loyalty {
    border-left: 3px solid var(--dps-color-warning);
    background: var(--dps-color-warning-container);
}

.dps-overview-card--loyalty:hover {
    box-shadow: var(--dps-elevation-3);
    transform: translateY(-2px);
}

.dps-overview-card[role="button"]:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* ========================================
   QUICK ACTIONS - Ações Rápidas
   ======================================== */

.dps-portal-quick-actions {
    margin-bottom: var(--dps-space-6);
}

.dps-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dps-space-3);
}

.dps-quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-3) var(--dps-space-6);
    min-height: 44px;
    height: 44px;
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-button);
    font-size: var(--dps-typescale-label-large-size, 14px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), color var(--dps-motion-hover), box-shadow var(--dps-motion-hover), transform var(--dps-motion-hover);
    white-space: nowrap;
    box-sizing: border-box;
}

.dps-quick-action:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline);
    color: var(--dps-color-on-surface);
    transform: translateY(-1px);
}

.dps-quick-action:active {
    transform: translateY(0);
}

.dps-quick-action:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* Variante principal — destaque sutil, sem cor de fundo diferente */
.dps-quick-action--primary {
    border-color: var(--dps-color-primary);
    color: var(--dps-color-primary);
}

.dps-quick-action--primary:hover {
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    box-shadow: var(--dps-elevation-2);
}

.dps-quick-action--chat {
    border-color: var(--dps-color-primary);
    color: var(--dps-color-primary);
}

.dps-quick-action--chat:hover {
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
}

/* Botão "Indique e Ganhe" — mesmo padrão outlined */
.dps-quick-action--referral {
    border-color: var(--dps-color-outline-variant);
    color: var(--dps-color-on-surface);
}

.dps-quick-action--referral:hover {
    background: var(--dps-color-surface-container-low);
    border-color: var(--dps-color-outline);
    box-shadow: var(--dps-elevation-1);
}

.dps-quick-action__icon {
    font-size: var(--dps-typescale-body-medium-size, 14px);
    line-height: 1;
}

.dps-quick-action__text {
    line-height: 1.2;
}

/* Responsivo: botões menores em mobile pequeno */
@media (max-width: 480px) {
    .dps-quick-action {
        padding: var(--dps-space-3) var(--dps-space-3);
        font-size: var(--dps-typescale-body-small-size, 12px);
    }
}

/* ========================================
   PETS SUMMARY - Resumo dos Pets
   ======================================== */

.dps-portal-pets-summary {
    background: var(--dps-color-surface-container-lowest);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-card);
    padding: var(--dps-space-5);
}

.dps-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dps-space-4);
    flex-wrap: wrap;
    gap: var(--dps-space-2);
}

.dps-section-header h2 {
    margin: 0;
    font-size: var(--dps-typescale-title-large-size, 22px);
    font-weight: var(--dps-typescale-title-large-weight, 500);
    color: var(--dps-color-on-surface);
    display: flex;
    align-items: center;
    gap: var(--dps-space-2);
}

.dps-link-button {
    background: none;
    border: none;
    color: var(--dps-color-primary);
    font-size: var(--dps-typescale-body-small-size, 12px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    cursor: pointer;
    padding: var(--dps-space-1) var(--dps-space-2);
    border-radius: var(--dps-shape-extra-small);
    transition: background var(--dps-motion-hover);
}

.dps-link-button:hover {
    background: var(--dps-color-primary-container);
    text-decoration: none;
}

.dps-link-button:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

.dps-pets-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--dps-space-3);
}

@media (max-width: 480px) {
    .dps-pets-cards {
        grid-template-columns: 1fr;
    }
}

.dps-pet-card {
    display: flex;
    align-items: center;
    gap: var(--dps-space-3);
    padding: var(--dps-space-3) var(--dps-space-4);
    background: var(--dps-color-surface-container-low);
    border: 1px solid var(--dps-color-surface-container);
    border-radius: var(--dps-shape-small);
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-pet-card:hover {
    background: var(--dps-color-surface-container-lowest);
    border-color: var(--dps-color-outline-variant);
    box-shadow: var(--dps-elevation-1);
}

.dps-pet-card__photo {
    width: 56px;
    height: 56px;
    border-radius: var(--dps-shape-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--dps-color-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dps-pet-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dps-pet-card__placeholder {
    font-size: var(--dps-typescale-headline-small-size, 24px);
    opacity: 0.5;
}

.dps-pet-card__info {
    min-width: 0;
    flex: 1;
}

.dps-pet-card__name {
    margin: 0 0 2px 0;
    font-size: var(--dps-typescale-body-large-size, 16px);
    font-weight: var(--dps-typescale-label-large-weight, 500);
    color: var(--dps-color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dps-pet-card__breed {
    display: block;
    font-size: var(--dps-typescale-body-small-size, 12px);
    color: var(--dps-color-on-surface-variant);
    margin-bottom: var(--dps-space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dps-pet-card__last-service {
    display: block;
    font-size: var(--dps-typescale-body-small-size, 12px);
    color: var(--dps-color-outline);
}

.dps-pet-card__last-service--empty {
    color: var(--dps-color-warning);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
}

.dps-pet-card__next-appointment {
    display: block;
    font-size: var(--dps-typescale-body-small-size, 12px);
    color: var(--dps-color-primary);
    font-weight: var(--dps-typescale-label-medium-weight, 500);
}

.dps-pet-card__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.dps-pet-card__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--dps-color-surface-container);
    border: 1px solid var(--dps-color-outline-variant);
    border-radius: var(--dps-shape-full);
    cursor: pointer;
    font-size: var(--dps-typescale-body-medium-size, 14px);
    transition: background-color var(--dps-motion-hover), border-color var(--dps-motion-hover);
    padding: 0;
    flex-shrink: 0;
}

.dps-pet-card__action-btn:hover {
    background: var(--dps-color-primary-container);
    border-color: var(--dps-color-primary);
}

.dps-pet-card__action-btn:focus-visible {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* Screen reader only (acessibilidade) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   RESPONSIVIDADE - Aba Início
   Adaptações para dispositivos móveis
   ======================================== */

@media (max-width: 767px) {
    /* Overview cards menores */
    .dps-overview-card {
        padding: var(--dps-space-3);
        gap: var(--dps-space-2);
    }
    
    .dps-overview-card__icon {
        font-size: var(--dps-typescale-title-large-size, 22px);
    }
    
    .dps-overview-card__value {
        font-size: var(--dps-typescale-title-large-size, 22px);
    }
    
    .dps-overview-card__label {
        font-size: var(--dps-typescale-body-small-size, 12px);
    }
    
    /* Section header responsivo */
    .dps-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Appointment card responsivo */
    .dps-appointment-card {
        flex-direction: row;
        gap: var(--dps-space-3);
    }
    
    .dps-appointment-card__date {
        min-width: 48px;
        height: 48px;
    }
    
    .dps-appointment-card__details {
        align-items: flex-start;
    }
    
    .dps-appointment-card__actions {
        justify-content: flex-start;
    }
    
    .dps-appointment-card__status {
        align-self: center;
    }
}

@media (max-width: 480px) {
    /* Overview cards ainda menores */
    .dps-overview-cards {
        gap: var(--dps-space-2);
    }
    
    .dps-overview-card__label {
        font-size: 11px;
    }
    
    /* Pets cards empilhados */
    .dps-pets-cards {
        grid-template-columns: 1fr;
        gap: var(--dps-space-2);
    }
    
    .dps-pet-card {
        padding: var(--dps-space-2);
    }
    
    .dps-pet-card__photo {
        width: 48px;
        height: 48px;
    }
}

/* ========================================
   ABA FIDELIDADE - Layout Modernizado
   Novo design com melhor hierarquia visual
   ======================================== */

/* Container principal da seção */
.dps-portal-loyalty {
    display: grid;
    gap: 24px;
}

.dps-portal-loyalty h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--dps-gray-800);
}

/* Estado inativo do programa */
.dps-loyalty-inactive {
    text-align: center;
    padding: 48px 24px;
    background: var(--dps-gray-50);
    border-radius: var(--dps-shape-medium);
    border: 2px dashed var(--dps-gray-300);
}

.dps-loyalty-inactive__icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.dps-loyalty-inactive__message {
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 8px 0;
}

.dps-loyalty-inactive__hint {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0;
}

/* Hero Section - Tier e Progresso (Modernizado) */
.dps-loyalty-hero {
    background: linear-gradient(135deg, var(--dps-primary-light) 0%, var(--dps-warning-bg) 100%);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-large);
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.dps-loyalty-hero::before {
    content: '🏆';
    position: absolute;
    right: -20px;
    top: -20px;
    font-size: 120px;
    opacity: 0.08;
    transform: rotate(15deg);
}

.dps-loyalty-hero__content {
    position: relative;
    z-index: 1;
}

.dps-loyalty-tier {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.dps-loyalty-tier__icon {
    font-size: 48px;
    line-height: 1;
}

.dps-loyalty-tier__labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-loyalty-tier__level {
    font-size: 13px;
    font-weight: 500;
    color: var(--dps-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dps-loyalty-tier__name {
    font-size: 28px;
    font-weight: 800;
    color: var(--dps-gray-900);
    line-height: 1.1;
}

/* Barra de Progresso Modernizada */
.dps-loyalty-progress {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--dps-shape-medium);
    padding: 16px;
}

.dps-loyalty-progress__info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dps-loyalty-progress__current {
    font-size: 16px;
    font-weight: 700;
    color: var(--dps-primary);
}

.dps-loyalty-progress__next {
    font-size: 14px;
    font-weight: 600;
    color: var(--dps-gray-500);
}

.dps-loyalty-progress__bar {
    width: 100%;
    height: 12px;
    border-radius: var(--dps-shape-full);
    background: var(--dps-gray-200);
    overflow: hidden;
    margin-bottom: 8px;
}

.dps-loyalty-progress__bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--dps-primary) 0%, var(--dps-success) 50%, var(--dps-warning) 100%);
    border-radius: var(--dps-shape-full);
    transition: width var(--dps-motion-duration-long-2) var(--dps-motion-easing-standard);
}

.dps-loyalty-progress__hint {
    font-size: 14px;
    color: var(--dps-gray-600);
    margin: 0;
    font-weight: 500;
}

/* Cards de Estatísticas Modernizados */
.dps-loyalty-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .dps-loyalty-stats {
        grid-template-columns: 1fr;
    }
}

.dps-loyalty-card {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 20px;
    transition: box-shadow var(--dps-motion-hover), transform var(--dps-motion-hover);
}

.dps-loyalty-card:hover {
    box-shadow: var(--dps-elevation-2);
    transform: translateY(-2px);
}

.dps-loyalty-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dps-loyalty-card__icon {
    font-size: 24px;
    line-height: 1;
}

.dps-loyalty-card__label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dps-gray-600);
}

.dps-loyalty-card__value {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--dps-gray-900);
    line-height: 1.2;
}

.dps-loyalty-card__code {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--dps-primary);
    font-family: var(--dps-font-mono);
    letter-spacing: 0.05em;
}

.dps-loyalty-card__hint {
    display: block;
    font-size: 13px;
    color: var(--dps-gray-500);
    margin-top: 4px;
}

/* Variantes de cor para cards */
.dps-loyalty-card--points {
    border-left: 4px solid var(--dps-primary);
}

.dps-loyalty-card--credits {
    border-left: 4px solid var(--dps-success);
}

.dps-loyalty-card--referral {
    border-left: 4px solid var(--dps-warning);
}

.dps-loyalty-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.dps-loyalty-referral-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
    font-size: 13px;
    background: var(--dps-gray-50);
    color: var(--dps-gray-700);
    font-family: var(--dps-font-mono);
}

/* Seção: Como Funciona */
.dps-loyalty-how-it-works {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
}

.dps-loyalty-how-it-works h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dps-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-loyalty-how-it-works__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .dps-loyalty-how-it-works__grid {
        grid-template-columns: 1fr;
    }
}

.dps-loyalty-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.dps-loyalty-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    color: var(--dps-white);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.dps-loyalty-step__content {
    flex: 1;
}

.dps-loyalty-step__content strong {
    display: block;
    font-size: 15px;
    color: var(--dps-gray-800);
    margin-bottom: 4px;
}

.dps-loyalty-step__content p {
    margin: 0;
    font-size: 14px;
    color: var(--dps-gray-600);
    line-height: 1.5;
}

/* Seção: Conquistas Modernizada */
.dps-loyalty-achievements {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
}

.dps-loyalty-achievements h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dps-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-loyalty-achievements__summary {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--dps-gray-600);
}

.dps-loyalty-achievements__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dps-loyalty-achievement {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
    transition: all var(--dps-motion-hover);
}

.dps-loyalty-achievement.is-unlocked {
    background: linear-gradient(135deg, var(--dps-success-bg) 0%, var(--dps-white) 100%);
    border-color: var(--dps-success);
}

.dps-loyalty-achievement.is-locked {
    opacity: 0.7;
    background: var(--dps-gray-50);
}

.dps-loyalty-achievement__icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.dps-loyalty-achievement__text {
    flex: 1;
    min-width: 0;
}

.dps-loyalty-achievement__title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--dps-gray-800);
}

.dps-loyalty-achievement__desc {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--dps-gray-600);
    line-height: 1.4;
}

.dps-loyalty-achievement__status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--dps-shape-medium);
    font-size: 11px;
    font-weight: 600;
}

.dps-loyalty-achievement.is-unlocked .dps-loyalty-achievement__status {
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-loyalty-achievement.is-locked .dps-loyalty-achievement__status {
    background: var(--dps-gray-200);
    color: var(--dps-gray-600);
}

/* Seção: Histórico Modernizado */
.dps-loyalty-history {
    background: var(--dps-white);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
}

.dps-loyalty-history__header {
    margin-bottom: 16px;
}

.dps-loyalty-history__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dps-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-loyalty-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-loyalty-history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-gray-100);
    border-radius: var(--dps-shape-small);
    transition: background var(--dps-motion-hover);
}

.dps-loyalty-history__item:hover {
    background: var(--dps-white);
    border-color: var(--dps-gray-200);
}

.dps-loyalty-history__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dps-loyalty-history__context {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dps-gray-800);
}

.dps-loyalty-history__date {
    font-size: 12px;
    color: var(--dps-gray-500);
}

.dps-loyalty-history__points {
    font-size: 16px;
    font-weight: 700;
    min-width: 70px;
    text-align: right;
}

.dps-loyalty-history__points--add {
    color: var(--dps-success);
}

.dps-loyalty-history__points--redeem {
    color: var(--dps-danger);
}

.dps-loyalty-history__empty {
    text-align: center;
    padding: 32px 16px;
    background: var(--dps-gray-50);
    border-radius: var(--dps-shape-small);
}

.dps-loyalty-history__empty-icon {
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.dps-loyalty-history__empty p {
    margin: 0;
    font-size: 14px;
    color: var(--dps-gray-600);
}

.dps-loyalty-history-more {
    margin-top: 16px;
    width: 100%;
}

.dps-loyalty-history-more:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-loyalty-history-trigger:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-portal-copy:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-loyalty-referral-input:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: -2px;
}

/* Seção: Resgate Modernizado */
.dps-loyalty-redemption {
    background: linear-gradient(135deg, var(--dps-success-bg) 0%, var(--dps-white) 100%);
    border: 2px solid var(--dps-success);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
}

.dps-loyalty-redemption h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dps-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dps-loyalty-redemption__info {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--dps-gray-600);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--dps-shape-small);
    border: 1px solid var(--dps-gray-200);
}

.dps-loyalty-redemption__unavailable {
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--dps-shape-small);
}

.dps-loyalty-redemption__unavailable-icon {
    display: block;
    font-size: 40px;
    margin-bottom: 12px;
}

.dps-loyalty-redemption__unavailable p {
    margin: 0;
    font-size: 14px;
    color: var(--dps-gray-600);
}

.dps-loyalty-redemption-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dps-loyalty-redemption__form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-loyalty-redemption__form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-loyalty-redemption__form-group input[type="number"] {
    padding: 14px 16px;
    border: 2px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-small);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    transition: border-color var(--dps-motion-hover);
}

.dps-loyalty-redemption__form-group input[type="number"]:focus {
    outline: 2px solid var(--dps-success);
    outline-offset: -2px;
    border-color: var(--dps-success);
}

.dps-loyalty-redemption__balance {
    margin: 0;
    font-size: 13px;
    color: var(--dps-gray-600);
    text-align: center;
}

.dps-loyalty-redeem-btn {
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dps-success) 0%, var(--dps-success) 100%);
    color: var(--dps-white);
    border: none;
    border-radius: var(--dps-shape-small);
    cursor: pointer;
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
    box-shadow: var(--dps-elevation-2);
}

.dps-loyalty-redeem-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-3);
}

.dps-loyalty-redeem-btn:focus-visible {
    outline: 2px solid var(--dps-color-on-primary, var(--dps-white));
    outline-offset: 2px;
}

.dps-loyalty-redemption__feedback {
    padding: 12px 16px;
    border-radius: var(--dps-shape-small);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.dps-loyalty-redemption__feedback.is-success {
    background: var(--dps-success-bg);
    color: var(--dps-success);
    border: 1px solid var(--dps-success);
}

.dps-loyalty-redemption__feedback.is-error {
    background: var(--dps-danger-bg);
    color: var(--dps-danger);
    border: 1px solid var(--dps-danger);
}

.dps-loyalty-redemption--disabled {
    background: var(--dps-gray-50);
    border: 1px solid var(--dps-gray-200);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dps-loyalty-redemption--disabled-icon {
    font-size: 24px;
    line-height: 1;
}

.dps-loyalty-redemption--disabled p {
    margin: 0;
    font-size: 14px;
    color: var(--dps-gray-600);
    line-height: 1.6;
}

/* Responsivo - Aba Fidelidade */
@media (max-width: 768px) {
    .dps-loyalty-hero {
        padding: 20px;
    }
    
    .dps-loyalty-tier__icon {
        font-size: 40px;
    }
    
    .dps-loyalty-tier__name {
        font-size: 24px;
    }
    
    .dps-loyalty-stats {
        grid-template-columns: 1fr;
    }
    
    .dps-loyalty-card__value {
        font-size: 24px;
    }
    
    .dps-loyalty-how-it-works__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .dps-loyalty-achievements__grid {
        grid-template-columns: 1fr;
    }
    
    .dps-loyalty-card__actions {
        flex-direction: column;
    }
    
    .dps-loyalty-referral-input {
        width: 100%;
    }
}

/* ================================================
   CENTRAL DE MENSAGENS - RESPONSIVIDADE MOBILE
   ================================================ */
@media (max-width: 768px) {
    .dps-messages-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .dps-messages-metric-card {
        padding: 16px;
    }
    
    .dps-messages-metric-card__icon {
        font-size: 28px;
    }
    
    .dps-messages-metric-card__value {
        font-size: 20px;
    }
    
    .dps-messages-grid {
        grid-template-columns: 1fr;
    }
    
    .dps-messages-inbox__header,
    .dps-messages-compose__header {
        padding: 16px 20px;
    }
    
    .dps-messages-inbox__title,
    .dps-messages-compose__title {
        font-size: 16px;
    }
    
    .dps-messages-inbox__subtitle,
    .dps-messages-compose__subtitle {
        font-size: 13px;
    }
    
    .dps-portal-messages__list {
        max-height: 400px;
    }
    
    .dps-portal-message {
        padding: 16px;
        gap: 12px;
    }
    
    .dps-portal-message__avatar {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .dps-portal-message__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .dps-portal-message__author {
        font-size: 14px;
    }
    
    .dps-portal-message__date {
        font-size: 12px;
    }
    
    .dps-messages-compose__content {
        padding: 16px;
    }
    
    .dps-messages-compose textarea.dps-form-control {
        min-height: 120px;
    }
    
    .dps-messages-compose__submit {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dps-messages-metric-card {
        gap: 12px;
    }
    
    .dps-messages-metric-card__icon {
        font-size: 24px;
    }
    
    .dps-messages-metric-card__value {
        font-size: 18px;
    }
    
    .dps-messages-metric-card__label {
        font-size: 12px;
    }
    
    .dps-messages-inbox__icon,
    .dps-messages-compose__icon {
        font-size: 24px;
    }
    
    .dps-portal-message__body {
        width: 100%;
    }
    
    .dps-portal-message__unread-badge {
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        font-size: 10px;
    }
}

/* ================================================
   ANIMAÇÕES UTILITÁRIAS
   ================================================ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ================================================
   ABA AGENDAMENTOS - Layout Modernizado
   Métricas, Cards de Próximos, Histórico em Tabela
   ================================================ */

/* Seção de Métricas de Agendamentos */
.dps-appointments-metrics {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.dps-metrics-grid--appointments {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 480px) {
    .dps-metrics-grid--appointments {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Seção de Próximos Agendamentos */
.dps-portal-upcoming {
    border-color: var(--dps-primary);
    border-width: 2px;
    background: linear-gradient(to bottom, var(--dps-white) 0%, var(--dps-primary-light) 100%);
}

.dps-upcoming-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Seção de Histórico */
.dps-portal-history {
    background: var(--dps-white);
}

.dps-history-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
}

@media (min-width: 769px) {
    .dps-history-table-wrapper {
        margin: 0;
        padding: 0;
    }
}

.dps-history-table {
    min-width: 600px;
}

/* Badges de Status */
.dps-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--dps-shape-large);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.dps-status-badge--default {
    background: var(--dps-gray-100);
    color: var(--dps-gray-600);
}

.dps-status-badge--scheduled {
    background: var(--dps-primary-light);
    color: var(--dps-primary-active);
}

.dps-status-badge--confirmed {
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-status-badge--in-progress {
    background: var(--dps-warning-bg);
    color: var(--dps-warning-text);
}

.dps-status-badge--completed {
    background: var(--dps-gray-100);
    color: var(--dps-gray-700);
}

.dps-status-badge--paid {
    background: var(--dps-success-bg);
    color: var(--dps-success);
}

.dps-status-badge--paid::before {
    content: '✓';
    font-size: 10px;
}

.dps-status-badge--cancelled {
    background: var(--dps-danger-bg);
    color: var(--dps-danger);
}

.dps-status-badge--pending {
    background: var(--dps-warning-bg);
    color: var(--dps-warning-text);
}

/* Título de estado vazio */
.dps-empty-state__title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

/* Estilos específicos para mobile na aba agendamentos */
@media (max-width: 768px) {
    .dps-portal-upcoming {
        padding: 16px;
    }
    
    .dps-portal-history {
        padding: 16px;
    }
    
    .dps-history-table-wrapper {
        margin: 0 -16px;
        padding: 0 16px;
    }
    
    .dps-appointments-metrics .dps-metric-card {
        padding: 14px;
    }
    
    .dps-appointments-metrics .dps-metric-card__value {
        font-size: 22px;
    }
    
    .dps-appointments-metrics .dps-metric-card__label {
        font-size: 12px;
    }
}

/* Cards de próximos agendamentos em destaque */
.dps-upcoming-cards .dps-appointment-card {
    background: linear-gradient(135deg, var(--dps-white) 0%, var(--dps-primary-light) 100%);
    transition: transform var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-upcoming-cards .dps-appointment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-3);
}

/* ========================================
   ABA MEUS DADOS - Layout Moderno
   Revisão: Janeiro 2026
   ======================================== */

/* Header da seção */
.dps-meus-dados-header {
    margin-bottom: 24px;
}

.dps-meus-dados .dps-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--dps-gray-700);
}

.dps-meus-dados .dps-section-title__icon {
    font-size: 28px;
}

.dps-meus-dados .dps-section-subtitle {
    font-size: 15px;
    color: var(--dps-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Cards empilhados */
.dps-meus-dados-stacked {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Surface cards */
.dps-meus-dados-card.dps-surface {
    background: var(--dps-white);
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 24px;
}

.dps-meus-dados-card.dps-surface--info {
    border-left: 4px solid var(--dps-primary);
}

.dps-meus-dados-card.dps-surface--neutral {
    border-left: 4px solid var(--dps-gray-300);
}

.dps-meus-dados-card .dps-surface__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dps-gray-700);
    margin: 0 0 8px 0;
}

.dps-meus-dados-card .dps-surface__title span {
    font-size: 20px;
}

.dps-meus-dados-card .dps-surface__description {
    font-size: 14px;
    color: var(--dps-gray-500);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Formulários */
.dps-meus-dados-form {
    margin-top: 16px;
}

.dps-meus-dados-form .dps-fieldset {
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-small);
    padding: 20px;
    margin-bottom: 20px;
    background: var(--dps-gray-50);
}

.dps-meus-dados-form .dps-fieldset__legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--dps-gray-700);
    font-size: 15px;
    padding: 0 8px;
    background: var(--dps-gray-50);
}

.dps-meus-dados-form .dps-fieldset__help {
    font-size: 13px;
    color: var(--dps-gray-500);
    margin: 0 0 16px 0;
    font-style: italic;
}

.dps-meus-dados-form .dps-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--dps-gray-700);
    margin-bottom: 6px;
}

.dps-meus-dados-form .dps-form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--dps-border-color);
    border-radius: var(--dps-shape-extra-small);
    font-size: 15px;
    color: var(--dps-gray-700);
    background: var(--dps-white);
    transition: border-color var(--dps-motion-hover), box-shadow var(--dps-motion-hover);
}

.dps-meus-dados-form .dps-form-control:focus {
    border-color: var(--dps-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--dps-primary-light);
}

.dps-meus-dados-form .dps-form-control:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-meus-dados-form .dps-form-control::placeholder {
    color: var(--dps-gray-400);
}

.dps-meus-dados-form textarea.dps-form-control {
    resize: vertical;
    min-height: 60px;
}

.dps-meus-dados-form select.dps-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Grid de formulário */
.dps-meus-dados-form .dps-form-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.dps-meus-dados-form .dps-form-row--2col {
    grid-template-columns: repeat(2, 1fr);
}

.dps-meus-dados-form .dps-form-row--3col {
    grid-template-columns: repeat(3, 1fr);
}

.dps-meus-dados-form .dps-form-col {
    margin-bottom: 16px;
}

.dps-meus-dados-form .dps-form-col:last-child {
    margin-bottom: 0;
}

/* Ações do formulário */
.dps-meus-dados-form .dps-form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--dps-border-color);
}

.dps-meus-dados-form .dps-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--dps-primary) 0%, var(--dps-primary-hover) 100%);
    border: none;
    border-radius: var(--dps-shape-small);
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    box-shadow: var(--dps-elevation-2);
    transition: background var(--dps-motion-hover), box-shadow var(--dps-motion-hover), transform var(--dps-motion-hover);
}

.dps-meus-dados-form .dps-btn-submit:hover {
    background: linear-gradient(135deg, var(--dps-primary-hover) 0%, var(--dps-primary-active) 100%);
    box-shadow: var(--dps-elevation-3);
    transform: translateY(-1px);
}

.dps-meus-dados-form .dps-btn-submit:active {
    transform: translateY(0);
}

.dps-meus-dados-form .dps-btn-submit:focus-visible {
    outline: 2px solid var(--dps-color-primary, var(--dps-primary));
    outline-offset: 2px;
}

.dps-meus-dados-form .dps-btn-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.dps-meus-dados-form .dps-btn-submit span {
    font-size: 16px;
}

/* File input styling */
.dps-meus-dados-form input[type="file"].dps-form-control {
    padding: 8px 12px;
    cursor: pointer;
}

/* Header do card de pet com foto */
.dps-pet-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--dps-border-color);
}

.dps-pet-form-header__photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--dps-white);
    box-shadow: var(--dps-elevation-2);
}

.dps-pet-form-header__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dps-gray-100);
    font-size: 32px;
}

.dps-pet-form-header__info {
    flex: 1;
}

.dps-pet-form-header__info .dps-surface__title {
    margin-bottom: 4px;
}

.dps-pet-form-header__info .dps-surface__description {
    margin-bottom: 0;
    font-size: 13px;
}

/* Responsividade */
@media (max-width: 768px) {
    .dps-meus-dados .dps-section-title {
        font-size: 20px;
    }
    
    .dps-meus-dados-form .dps-form-row--2col,
    .dps-meus-dados-form .dps-form-row--3col {
        grid-template-columns: 1fr;
    }
    
    .dps-meus-dados-card.dps-surface {
        padding: 16px;
    }
    
    .dps-meus-dados-form .dps-fieldset {
        padding: 16px;
    }
    
    .dps-pet-form-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dps-pet-form-header__info .dps-surface__title {
        justify-content: center;
    }
    
    .dps-meus-dados-form .dps-btn-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dps-meus-dados-header {
        margin-bottom: 16px;
    }
    
    .dps-meus-dados .dps-section-subtitle {
        font-size: 14px;
    }
    
    .dps-meus-dados-stacked {
        gap: 16px;
    }
}