/* USER DASHBOARD STYLES - Todos con !important */

/* Ocultar header del tema cuando se muestra el nuevo dashboard */
body:has(.user-dashboard-wrapper) #header,
body:has(.user-dashboard-wrapper) header#header,
body:has(.user-dashboard-wrapper) .header,
body:has(.user-dashboard-wrapper) #masthead,
body:has(.user-dashboard-wrapper) .site-header,
body:has(.user-dashboard-wrapper) #top-bar,
body:has(.user-dashboard-wrapper) .top-bar,
body:has(.clinic-dashboard-wrapper) #header,
body:has(.clinic-dashboard-wrapper) header#header,
body:has(.clinic-dashboard-wrapper) .header,
body:has(.clinic-dashboard-wrapper) #masthead,
body:has(.clinic-dashboard-wrapper) .site-header,
body:has(.clinic-dashboard-wrapper) #top-bar,
body:has(.clinic-dashboard-wrapper) .top-bar {
    display: none !important;
}

/* Ocultar sidebar antiguo cuando se muestra el nuevo dashboard */
.user-dashboard-wrapper,
.clinic-dashboard-wrapper {
    position: relative !important;
    z-index: 10 !important;
}

/* Ocultar completamente el sidebar antiguo cuando hay nuevo dashboard */
#dashboard:has(.user-dashboard-wrapper) .dashboard-nav,
#dashboard:has(.clinic-dashboard-wrapper) .dashboard-nav,
body:has(.user-dashboard-wrapper) .dashboard-nav,
body:has(.clinic-dashboard-wrapper) .dashboard-nav {
    display: none !important;
    visibility: hidden !important;
}

/* Ocultar trigger responsive también */
#dashboard:has(.user-dashboard-wrapper) .dashboard-responsive-nav-trigger,
#dashboard:has(.clinic-dashboard-wrapper) .dashboard-responsive-nav-trigger,
body:has(.user-dashboard-wrapper) .dashboard-responsive-nav-trigger,
body:has(.clinic-dashboard-wrapper) .dashboard-responsive-nav-trigger {
    display: none !important;
}

.user-dashboard-wrapper {
    display: flex !important;
    min-height: 100vh !important;
    background: #f8f9fa !important;
    font-family: 'Inter', sans-serif !important;
}

/* SIDEBAR */
.user-sidebar {
    width: 260px !important;
    background: white !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 100 !important;
}

.sidebar-logo {
    display: block !important;
    padding: 16px 24px 24px !important;
    text-decoration: none !important;
}

.sidebar-logo-img {
    max-width: 150px !important;
    width: 100% !important;
    height: 100px !important;
    object-fit: contain !important;
   
}

.logo-box {
    width: 48px !important;
    height: 48px !important;
    background: #1B5D63 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.logo-text {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.user-sidebar-nav {
    flex: 1 !important;
    padding: 0 16px !important;
}

.user-sidebar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    margin-bottom: 4px !important;
    position: relative !important;
}

.user-sidebar-nav .nav-item:hover {
    background: #f3f4f6 !important;
    color: #1B5D63 !important;
}

.user-sidebar-nav .nav-item.active {
    background: #1B5D63 !important;
    color: white !important;
}

.nav-badge {
    margin-left: auto !important;
    background: #ef4444 !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 0px 12px !important;
    border-radius: 52px !important;
}

.professional-panel-btn {
    margin: 16px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    color: #1B5D63 !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.professional-panel-btn:hover {
    background: #f3f4f6 !important;
    border-color: #1B5D63 !important;
}

/* MAIN CONTENT */
.user-main-content {
    flex: 1 !important;
    margin-left: 260px !important;
    padding: 32px !important;
    max-width: calc(100% - 260px) !important;
}

/* HERO SECTION */
.user-hero-section {
    margin-bottom: 32px !important;
}

.user-greeting {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.wave-emoji {
    font-size: 1.8rem !important;
    animation: wave 2s infinite !important;
}

@keyframes wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}

.user-subtitle {
    font-size: 1.1rem !important;
    color: #6b7280 !important;
    margin-bottom: 24px !important;
}

.user-hero-search {
    max-width: 700px !important;
}

.hero-search-bar {
    display: flex !important;
    align-items: center !important;
    background: white !important;
    border-radius: 50px !important;
    padding: 8px 8px 8px 24px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s !important;
}

.hero-search-bar:focus-within {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(27, 93, 99, 0.2) !important;
}

.hero-search-icon {
    color: #94a3b8 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.hero-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    background: transparent !important;
    height: auto !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.hero-search-input::placeholder {
    color: #9ca3af !important;
}

.hero-search-btn {
    padding: 10px 24px !important;
    background: #1B5D63 !important;
    color: white !important;
    border: none !important;
    border-radius: 40px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.hero-search-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(27, 93, 99, 0.3) !important;
}

/* METRICS */
.user-metrics {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

.metric-card-small {
    flex: 1 !important;
    background: white !important;
    padding: 20px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.metric-icon-small {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.metric-icon-small.blue {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

.metric-icon-small.green {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.metric-text-small {
    display: flex !important;
    flex-direction: column !important;
}

.metric-number-small {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.metric-label-small {
    font-size: 1rem !important;
    color: #6b7280 !important;
}

/* SECTIONS */
.user-section {
    background: white !important;
    padding: 24px !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.section-header-user {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.section-header-user h2 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.add-link, .view-all-link {
    color: #1B5D63 !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
}

.add-link:hover, .view-all-link:hover {
    text-decoration: underline !important;
}

/* PETS GRID */
.pets-grid-user {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

.pet-card-user {
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
    display: flex !important;
    gap: 16px !important;
    transition: all 0.2s !important;
}

.pet-card-user:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.pet-avatar-user {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.pet-info-user h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.pet-details {
    color: #6b7280 !important;
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
}

.pet-last-visit {
    color: #6b7280 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
}

.pet-actions {
    display: flex !important;
    gap: 8px !important;
}

.btn-secondary-small, .btn-primary-small {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: none !important;
}

.btn-secondary-small {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
}

.btn-secondary-small:hover {
    background: #e5e7eb !important;
}

.btn-primary-small {
    background: #1B5D63 !important;
    color: white !important;
}

.btn-primary-small:hover {
    background: #145048 !important;
}

.pet-card-add {
    border: 2px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    padding: 40px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    color: #64748b !important;
}

.pet-card-add:hover {
    border-color: #1B5D63 !important;
    background: rgba(27, 93, 99, 0.02) !important;
    color: #1B5D63 !important;
}

.add-icon-large {
    font-size: 3rem !important;
    font-weight: 300 !important;
}

/* TWO COLUMN LAYOUT */
.user-two-col {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 24px !important;
}

.action-card {
    display: flex !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #fefce8 !important;
    border-radius: 12px !important;
    border: 1px solid #fde047 !important;
}

.action-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-icon.yellow {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.action-content {
    flex: 1 !important;
}

.action-content h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.action-clinic {
    color: #6b7280 !important;
    font-size: 1.2rem !important;
    margin-bottom: 4px !important;
}

.action-date {
    color: #6b7280 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.appointment-mini-card {
    display: flex !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
}

.mini-date {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    background: white !important;
    border-radius: 8px !important;
    min-width: 50px !important;
}

.mini-day {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.mini-month {
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
}

.mini-appointment-info {
    flex: 1 !important;
}

.mini-clinic {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.mini-time {
    font-size: 1rem !important;
    color: #6b7280 !important;
}

/* MASCOTAS PAGE */
.mascotas-page {
    background: transparent !important;
}

.mascotas-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 32px !important;
}

.mascotas-header h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.btn-add-pet {
    padding: 10px 20px !important;
    background: #1B5D63 !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.btn-add-pet:hover {
    background: #145048 !important;
}

.mascotas-layout {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 24px !important;
}

.pets-list-sidebar {
    background: white !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.pet-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-bottom: 8px !important;
}

.pet-list-item:hover {
    background: #f3f4f6 !important;
}

.pet-list-item.active {
    background: #e0f2fe !important;
}

.pet-list-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.pet-list-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.pet-list-name {
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 2px !important;
}

.pet-list-breed {
    font-size: 1rem !important;
    color: #6b7280 !important;
}

.pet-details-main {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.pet-details-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.pet-large-avatar {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.pet-large-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.pet-header-info {
    flex: 1 !important;
}

.pet-header-info h2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.pet-header-info p {
    color: #6b7280 !important;
}

.pet-header-actions {
    display: flex !important;
    gap: 8px !important;
}

.icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.icon-btn:hover {
    background: #f3f4f6 !important;
    border-color: #1B5D63 !important;
    color: #1B5D63 !important;
}

.pet-dates-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

.date-card {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.date-card svg {
    color: #1B5D63 !important;
    flex-shrink: 0 !important;
}

.date-label {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.date-value {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.interventions-section h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 16px !important;
}

.interventions-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.intervention-item {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.intervention-bullet {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #1B5D63 !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
}

.intervention-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.intervention-name {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.intervention-clinic {
    font-size: 1.2rem !important;
    color: #6b7280 !important;
}

.intervention-date {
    font-size: 1rem !important;
    color: #9ca3af !important;
}

/* CITAS PAGE */
.citas-page {
    background: transparent !important;
}

.citas-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 24px !important;
}

.citas-header h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.citas-header p {
    color: #6b7280 !important;
}

.view-toggles {
    display: flex !important;
    gap: 8px !important;
    background: #f3f4f6 !important;
    padding: 4px !important;
    border-radius: 12px !important;
}

.view-toggle {
    padding: 8px 16px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    transition: all 0.2s !important;
}

.view-toggle.active {
    background: white !important;
    color: #1B5D63 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-schedule-new {
    padding: 12px 24px !important;
    background: #1B5D63 !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    transition: all 0.2s !important;
}

.btn-schedule-new:hover {
    background: #145048 !important;
    transform: translateY(-1px) !important;
}

.calendar-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.nav-arrow {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.nav-arrow:hover {
    border-color: #1B5D63 !important;
    color: #1B5D63 !important;
}

.current-month-year {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.calendar-grid-view {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.calendar-days-header {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.day-header {
    text-align: center !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    padding: 8px !important;
}

.calendar-dates-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 8px !important;
}

.calendar-date-cell {
    aspect-ratio: 1 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    position: relative !important;
}

.calendar-date-cell:hover {
    background: #f3f4f6 !important;
}

.calendar-date-cell.current {
    background: #1B5D63 !important;
    color: white !important;
}

.calendar-date-cell.has-appointment {
    background: #dcfce7 !important;
}

.date-number {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

.appointment-badge {
    font-size: 0.75rem !important;
    color: #1f2937 !important;
    text-align: center !important;
}

/* MENSAJES PAGE */
.mensajes-page {
    background: transparent !important;
}

.mensajes-page h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 24px !important;
}

.mensajes-layout {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 24px !important;
}

.mensajes-sidebar {
    background: white !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.mensajes-search {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: #f9fafb !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.mensajes-search svg {
    color: #9ca3af !important;
}

.mensajes-search input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #1f2937 !important;
    font-size: 1.2rem !important;
}

.mensajes-search input::placeholder {
    color: #9ca3af !important;
}

.conversations-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.conversation-item-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.conversation-item-user:hover {
    background: #f3f4f6 !important;
}

.conversation-avatar-clinic {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #e0f2fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1B5D63 !important;
    flex-shrink: 0 !important;
}

.conversation-info-user {
    flex: 1 !important;
    min-width: 0 !important;
}

.conversation-name-user {
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 2px !important;
    font-size: 1.2rem !important;
}

.conversation-preview-user {
    font-size: 1rem !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.conversation-meta-user {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
}

.conversation-time-user {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
}

.conversation-badge-user {
    background: #ef4444 !important;
    color: white !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    text-align: center !important;
}

.mensajes-main {
    background: white !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mensajes-empty-state {
    text-align: center !important;
}

.mensajes-empty-state svg {
    color: #d1d5db !important;
    margin-bottom: 16px !important;
}

.mensajes-empty-state h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
}

.mensajes-empty-state p {
    color: #6b7280 !important;
}

/* PERFIL PAGE */
.perfil-user-page {
    background: transparent !important;
}

.perfil-user-page h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.page-subtitle {
    color: #6b7280 !important;
    margin-bottom: 32px !important;
}

.profile-card-user {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 32px !important;
}

.profile-avatar-section {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
}

.profile-avatar-large {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: #1B5D63 !important;
    position: relative !important;
    overflow: hidden !important;
}

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

.avatar-edit-btn {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 2px solid #1B5D63 !important;
    color: #1B5D63 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.avatar-edit-btn:hover {
    background: #1B5D63 !important;
    color: white !important;
}

.profile-info-header h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
}

.profile-info-header p {
    color: #6b7280 !important;
    font-size: 1.2rem !important;
}

.profile-completion {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.completion-bar {
    width: 200px !important;
    height: 8px !important;
    background: #e5e7eb !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.completion-fill {
    height: 100% !important;
    background: #1B5D63 !important;
    border-radius: 4px !important;
    transition: width 0.3s !important;
}

.profile-completion span {
    font-size: 1rem !important;
    color: #6b7280 !important;
    text-align: right !important;
}

.profile-form-user {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.form-section-user {
    margin-bottom: 32px !important;
}

.form-section-user h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.perfil-edit-pet-link {
    display: inline-block !important;
    margin-bottom: 16px !important;
    color: #1B5D63 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 1rem !important;
}

.perfil-edit-pet-link:hover {
    text-decoration: underline !important;
}

.perfil-pet-fields {
    display: flex !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

.perfil-pet-photo {
    width: 100px !important;
    height: 100px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.perfil-pet-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.perfil-pet-grid {
    flex: 1 !important;
    min-width: 200px !important;
}

.perfil-field-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    gap: 16px !important;
}

.perfil-field-row:last-child {
    border-bottom: none !important;
}

.perfil-field-label {
    color: #6b7280 !important;
    font-size: 1rem !important;
}

.perfil-field-value {
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-align: right !important;
}

.form-group-user {
    margin-bottom: 20px !important;
}

.form-group-user label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    font-size: 1.2rem !important;
}

.form-input-user {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    transition: all 0.2s !important;
}

.form-input-user:focus {
    outline: none !important;
    border-color: #1B5D63 !important;
    box-shadow: 0 0 0 3px rgba(27, 93, 99, 0.1) !important;
}

.form-textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    font-family: inherit !important;
    resize: vertical !important;
}

.form-textarea:focus {
    outline: none !important;
    border-color: #1B5D63 !important;
    box-shadow: 0 0 0 3px rgba(27, 93, 99, 0.1) !important;
}

.checkbox-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 12px !important;
}

.checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.checkbox-label:hover {
    background: #f9fafb !important;
    border-color: #1B5D63 !important;
}

.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.checkbox-label input[type="checkbox"]:checked + span {
    color: #1B5D63 !important;
    font-weight: 600 !important;
}

.btn-save-changes {
    padding: 14px 32px !important;
    background: #1B5D63 !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-top: 24px !important;
}

.btn-save-changes:hover {
    background: #145048 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(27, 93, 99, 0.3) !important;
}

/* FACTURAS PAGE */
.facturas-hero {
    margin-bottom: 32px !important;
}

.facturas-hero h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
}

.facturas-hero p {
    color: #6b7280 !important;
    margin-bottom: 24px !important;
}

.financial-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

.financial-card {
    background: white !important;
    padding: 24px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.financial-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.financial-icon.orange {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.financial-icon.green {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.financial-content {
    display: flex !important;
    flex-direction: column !important;
}

.financial-label {
    font-size: 1.2rem !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
}

.financial-amount {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}

.invoices-table-wrapper {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    overflow-x: auto !important;
}

.invoices-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.invoices-table thead {
    background: #f9fafb !important;
}

.invoices-table th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 1.2rem !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.invoices-table td {
    padding: 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

.status-badge {
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.status-badge.pending {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.status-badge.paid {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.btn-pay-now {
    padding: 8px 16px !important;
    background: #1B5D63 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.btn-pay-now:hover {
    background: #145048 !important;
}

.btn-download-invoice {
    padding: 8px 16px !important;
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;
}

.btn-download-invoice:hover {
    background: #e5e7eb !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .user-two-col {
        grid-template-columns: 1fr !important;
    }
    
    .mascotas-layout {
        grid-template-columns: 1fr !important;
    }
    
    .mensajes-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .user-sidebar {
        width: 80px !important;
    }
    
    .user-main-content {
        margin-left: 80px !important;
        max-width: calc(100% - 80px) !important;
        padding: 16px !important;
    }
    
    .logo-text, .user-sidebar-nav .nav-item span {
        display: none !important;
    }
    
    .financial-summary {
        grid-template-columns: 1fr !important;
    }
    
    .pets-grid-user {
        grid-template-columns: 1fr !important;
    }
    
    .pet-dates-grid {
        grid-template-columns: 1fr !important;
    }
}