/* Estilos para mensajes programados */

/* === MODAL DE PROGRAMAR MENSAJE === */

/* Modal principal */
#scheduleMessageModal .modal-content {
    background: var(--surface-dark, #111111) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

#scheduleMessageModal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-dark, #2a2a2a) !important;
    padding: 1.5rem !important;
}

#scheduleMessageModal .modal-body {
    background: transparent !important;
    padding: 1.5rem !important;
    color: #ffffff !important;
}

#scheduleMessageModal .modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-dark, #2a2a2a) !important;
    padding: 1rem 1.5rem !important;
}

#scheduleMessageModal .modal-title {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#scheduleMessageModal .modal-title i {
    color: var(--urutienda, #ffe802) !important;
    font-size: 1rem !important;
}

/* Pestañas mejoradas */
#scheduleMessageModal .nav-pills {
    gap: 1rem; /* Mayor separación entre pestañas */
}

/* Modo oscuro - pestañas inactivas: blanco con texto negro */
#scheduleMessageModal .nav-pills .nav-link {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1; /* Para que ocupen espacio igual */
}

#scheduleMessageModal .nav-pills .nav-link i {
    color: #000000;
}

#scheduleMessageModal .nav-pills .nav-link:hover {
    color: #000000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    transform: translateY(-1px);
}

#scheduleMessageModal .nav-pills .nav-link.active {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    border-color: var(--urutienda, #ffe802) !important;
    box-shadow: 0 2px 8px rgba(255, 232, 2, 0.3);
}

#scheduleMessageModal .nav-pills .nav-link.active i {
    color: #000000 !important;
}

/* Form controls modernos */
#scheduleMessageModal .form-control,
#scheduleMessageModal .form-select {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease;
}

#scheduleMessageModal .form-control:focus,
#scheduleMessageModal .form-select:focus {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 232, 2, 0.25) !important;
}

#scheduleMessageModal .form-control::placeholder {
    color: #6b7280 !important;
}

/* Labels modernos */
#scheduleMessageModal .form-label {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

#scheduleMessageModal .form-label i {
    color: var(--urutienda, #ffe802);
}

/* Botones modernos */
#scheduleMessageModal .btn-success {
    background: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 232, 2, 0.2);
}

#scheduleMessageModal .btn-success:hover {
    background: var(--urutienda-hover, #e6d102) !important;
    border-color: var(--urutienda-hover, #e6d102) !important;
    color: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 232, 2, 0.3);
}

#scheduleMessageModal .btn-secondary {
    background: #374151 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
}

#scheduleMessageModal .btn-secondary:hover {
    background: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Preview de macro mejorado - OCULTO POR SOLICITUD DEL USUARIO */
#scheduleMessageModal #macroPreview {
    display: none !important;
}

#scheduleMessageModal .macro-info {
    border-bottom: 1px solid var(--border-dark, #2a2a2a);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

#scheduleMessageModal .macro-items {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--tertiary-dark, #1a1a1a);
    border-radius: 0.5rem;
}

#scheduleMessageModal .macro-item {
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.05);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

#scheduleMessageModal .macro-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#scheduleMessageModal .macro-item:last-child {
    margin-bottom: 0;
}

#scheduleMessageModal .item-number .badge {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--urutienda, #ffe802);
    color: #000000;
    font-weight: 600;
    font-size: 0.75rem;
}

#scheduleMessageModal .item-preview {
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #ffffff;
}

/* Resumen de programación moderno */
#scheduleMessageModal .scheduled-summary {
    background: rgba(255, 232, 2, 0.1);
    border: 1px solid rgba(255, 232, 2, 0.3);
    border-left: 4px solid var(--urutienda, #ffe802);
    padding: 1rem;
    border-radius: 0.5rem;
    backdrop-filter: blur(10px);
}

#scheduleMessageModal .border-top {
    border-color: var(--border-dark, #2a2a2a) !important;
    padding-top: 1.5rem !important;
    margin-top: 1.5rem !important;
}

#scheduleMessageModal .text-success,
#scheduleMessageModal h6.text-success {
    color: var(--urutienda, #ffe802) !important;
}

#scheduleMessageModal .text-muted,
#scheduleMessageModal small.text-muted {
    color: #9ca3af !important;
}

/* Modal de ver programados - textos más claros en modo oscuro */
#viewScheduledModal .text-muted,
#viewScheduledModal small.text-muted {
    color: #d1d5db !important;
}

#viewScheduledModal .text-muted i {
    color: #d1d5db !important;
}

/* === MODAL DE VER PROGRAMADOS === */

/* Modal principal */
#viewScheduledModal .modal-content {
    background: var(--surface-dark, #111111) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

#viewScheduledModal .modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-dark, #2a2a2a) !important;
    padding: 1.5rem !important;
}

#viewScheduledModal .modal-body {
    background: transparent !important;
    padding: 1.5rem !important;
    color: #ffffff !important;
}

#viewScheduledModal .modal-title {
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#viewScheduledModal .modal-title i {
    color: var(--urutienda, #ffe802) !important;
    font-size: 1rem !important;
}

/* Lista de mensajes modernizada */
.scheduled-messages-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.scheduled-message-item {
    background: var(--tertiary-dark, #1a1a1a);
    border: 1px solid var(--border-dark, #2a2a2a);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.scheduled-message-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background: var(--urutienda, #ffe802);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.scheduled-message-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 232, 2, 0.3);
    transform: translateY(-1px);
}

.scheduled-message-item:hover::before {
    opacity: 1;
}

.scheduled-message-item:last-child {
    margin-bottom: 0;
}

.message-header {
    margin-bottom: 0.5rem;
}

.message-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #ffffff !important;
}

.message-title i {
    color: var(--urutienda, #ffe802) !important;
    font-size: 0.875rem;
}

.message-title strong {
    color: inherit !important;
}

.message-preview {
    font-size: 0.8125rem;
    line-height: 1.4;
    max-height: 2.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #9ca3af !important;
    margin-bottom: 0.25rem;
}

.message-time {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    color: #616873 !important;
    gap: 0.25rem;
    justify-content: start;
}

.message-time i {
    color: inherit !important;
}

.message-actions {
    flex-shrink: 0;
}

.message-actions .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

/* Estados específicos para mensajes en modo oscuro */
.scheduled-message-item.message-sent {
    border-left-color: #10b981;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, var(--tertiary-dark, #1a1a1a) 10%);
}

.scheduled-message-item.message-sent::before {
    background: #10b981;
    opacity: 1;
}

.scheduled-message-item.message-sent .message-title {
    color: #a7f3d0 !important;
}

.scheduled-message-item.message-sent .message-title strong {
    color: #a7f3d0 !important;
}

.scheduled-message-item.message-sent .message-preview {
    color: #9ca3af !important;
}

.scheduled-message-item.message-sent .message-time {
    color: #6b7280 !important;
}

.scheduled-message-item.message-failed {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, var(--tertiary-dark, #1a1a1a) 10%);
}

.scheduled-message-item.message-failed::before {
    background: #ef4444;
    opacity: 1;
}

.scheduled-message-item.message-failed .message-title {
    color: #fca5a5 !important;
}

.scheduled-message-item.message-failed .message-title strong {
    color: #fca5a5 !important;
}

.scheduled-message-item.message-failed .message-preview {
    color: #9ca3af !important;
}

.scheduled-message-item.message-failed .message-time {
    color: #6b7280 !important;
}

/* Colores base para todos los mensajes en modo oscuro */
.scheduled-message-item:not(.message-sent):not(.message-failed) .message-title {
    color: #ffffff !important;
}

.scheduled-message-item:not(.message-sent):not(.message-failed) .message-title strong {
    color: #ffffff !important;
}

.scheduled-message-item:not(.message-sent):not(.message-failed) .message-preview {
    color: #9ca3af !important;
}

.scheduled-message-item:not(.message-sent):not(.message-failed) .message-time {
    color: #6b7280 !important;
}

/* Estados de mensajes mejorados */
.badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #000000 !important;
}

.badge.bg-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.badge.bg-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.badge.bg-secondary {
    background-color: #6b7280 !important;
    color: #ffffff !important;
}

/* Estados vacíos modernos */
.scheduled-messages-list .text-center {
    padding: 3rem 1rem;
    color: #9ca3af;
}

.scheduled-messages-list .text-center i[class*="bi-"] {
    opacity: 0.6;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Botón para estado vacío */
.empty-state-btn {
    background: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 232, 2, 0.2);
}

.empty-state-btn:hover {
    background: var(--urutienda-hover, #e6d102) !important;
    border-color: var(--urutienda-hover, #e6d102) !important;
    color: #000000 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 232, 2, 0.3);
}

/* Scrollbars modernos */
.scheduled-messages-list::-webkit-scrollbar,
#scheduleMessageModal .macro-items::-webkit-scrollbar {
    width: 4px;
}

.scheduled-messages-list::-webkit-scrollbar-track,
#scheduleMessageModal .macro-items::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.scheduled-messages-list::-webkit-scrollbar-thumb,
#scheduleMessageModal .macro-items::-webkit-scrollbar-thumb {
    background: rgba(255, 232, 2, 0.3);
    border-radius: 2px;
    transition: all 0.2s ease;
}

.scheduled-messages-list::-webkit-scrollbar-thumb:hover,
#scheduleMessageModal .macro-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 232, 2, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .message-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .message-actions {
        align-self: flex-end;
    }
    
    #scheduleMessageModal .macro-items {
        max-height: 150px;
    }
    
    .scheduled-messages-list {
        max-height: 300px;
    }
    
    #scheduleMessageModal .modal-dialog,
    #viewScheduledModal .modal-dialog {
        margin: 0.5rem !important;
    }
}

/* === ESTILOS PARA MODO CLARO === */

/* Modales principales */
.light #scheduleMessageModal .modal-content,
.light #viewScheduledModal .modal-content {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e4e6ea !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.light #scheduleMessageModal .modal-header,
.light #viewScheduledModal .modal-header {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom: 1px solid #e4e6ea !important;
}

.light #scheduleMessageModal .modal-body,
.light #viewScheduledModal .modal-body {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.light #scheduleMessageModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-top: 1px solid #e4e6ea !important;
}

.light #scheduleMessageModal .modal-title,
.light #viewScheduledModal .modal-title {
    color: #212529 !important;
}

.light #scheduleMessageModal .modal-title i,
.light #viewScheduledModal .modal-title i {
    color: var(--urutienda, #ffe802) !important;
}

/* Form controls en modo claro */
.light #scheduleMessageModal .form-control,
.light #scheduleMessageModal .form-select {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e4e6ea !important;
}

.light #scheduleMessageModal .form-control:focus,
.light #scheduleMessageModal .form-select:focus {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: var(--urutienda, #ffe802) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 232, 2, 0.25) !important;
}

.light #scheduleMessageModal .form-control::placeholder {
    color: #667781 !important;
}

.light #scheduleMessageModal .form-label {
    color: #212529 !important;
}

.light #scheduleMessageModal .form-label i {
    color: var(--urutienda, #ffe802) !important;
}

/* Pestañas en modo claro */
.light #scheduleMessageModal .nav-pills .nav-link {
    color: #667781;
    background-color: #f8f9fa;
    border-color: #e4e6ea;
}

.light #scheduleMessageModal .nav-pills .nav-link:hover {
    color: #212529;
    background-color: #ffffff;
}

.light #scheduleMessageModal .nav-pills .nav-link.active {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    border-color: var(--urutienda, #ffe802) !important;
}

.light #scheduleMessageModal .nav-pills .nav-link.active i {
    color: #000000 !important;
}

/* Preview de macro en modo claro */
.light #scheduleMessageModal .macro-info {
    border-bottom-color: #e4e6ea;
}

.light #scheduleMessageModal .macro-items {
    background: #f8f9fa;
}

.light #scheduleMessageModal .macro-item {
    background-color: rgba(0, 0, 0, 0.03);
}

.light #scheduleMessageModal .macro-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.light #scheduleMessageModal .item-preview {
    color: #212529;
}

.light #scheduleMessageModal .scheduled-summary {
    background: rgba(255, 232, 2, 0.1);
    border-color: rgba(255, 232, 2, 0.3);
}

.light #scheduleMessageModal .border-top {
    border-color: #e4e6ea !important;
}

.light #scheduleMessageModal .text-muted,
.light #scheduleMessageModal small.text-muted {
    color: #667781 !important;
}

.light #scheduleMessageModal .text-success,
.light #scheduleMessageModal h6.text-success {
    color: #212529 !important;
}

/* Modo claro - pestañas inactivas: grisáceo con texto blanco */
.light #scheduleMessageModal .nav-pills .nav-link {
    color: #ffffff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

.light #scheduleMessageModal .nav-pills .nav-link i {
    color: #ffffff !important;
}

.light #scheduleMessageModal .nav-pills .nav-link:hover {
    color: #ffffff !important;
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

.light #scheduleMessageModal .nav-pills .nav-link.active {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    border-color: var(--urutienda, #ffe802) !important;
}

.light #scheduleMessageModal .nav-pills .nav-link.active i {
    color: #000000 !important;
}

/* Botones en modo claro */
.light #scheduleMessageModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

.light #scheduleMessageModal .btn-secondary:hover {
    background: #54656f !important;
    border-color: #54656f !important;
}

/* Lista de mensajes programados en modo claro */
.light .scheduled-message-item {
    background: #f8f9fa;
    border-color: #e4e6ea;
    color: #212529;
}

.light .scheduled-message-item:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(255, 232, 2, 0.3);
}

.light .scheduled-message-item::before {
    background: var(--urutienda, #ffe802);
}

.light .message-title {
    color: #212529 !important;
}

.light .message-title strong {
    color: #212529 !important;
}

.light .message-title i {
    color: var(--urutienda, #ffe802) !important;
}

.light .message-preview {
    color: #667781 !important;
}

.light .message-received .message-time {
    color: #667781 !important;
}

.light .message-time i {
    color: inherit !important;
}

/* Estados vacíos en modo claro */
.light .scheduled-messages-list .text-center {
    color: #667781;
}

/* Estados vacíos en modo oscuro - texto e icono más claros */
.dark .scheduled-messages-list .text-center {
    color: #9ca3af;
}

.dark .scheduled-messages-list .text-center i[class*="bi-"] {
    color: #9ca3af !important;
    opacity: 0.8;
}

.dark .scheduled-messages-list .text-center p.text-muted {
    color: #9ca3af !important;
}

/* Scrollbars en modo claro */
.light .scheduled-messages-list::-webkit-scrollbar-track,
.light #scheduleMessageModal .macro-items::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.light .scheduled-messages-list::-webkit-scrollbar-thumb,
.light #scheduleMessageModal .macro-items::-webkit-scrollbar-thumb {
    background: rgba(255, 232, 2, 0.4);
}

.light .scheduled-messages-list::-webkit-scrollbar-thumb:hover,
.light #scheduleMessageModal .macro-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 232, 2, 0.6);
}

/* Estados específicos para mensajes en modo claro */
.light .scheduled-message-item.message-sent {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, #f8f9fa 10%);
    border-left-color: #10b981;
}

.light .scheduled-message-item.message-sent::before {
    background: #10b981;
    opacity: 1;
}

.light .scheduled-message-item.message-failed {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, #f8f9fa 10%);
    border-left-color: #ef4444;
}

.light .scheduled-message-item.message-failed::before {
    background: #ef4444;
    opacity: 1;
}

.light .scheduled-message-item.message-failed .message-title {
    color: #dc2626 !important;
}

.light .scheduled-message-item.message-sent .message-title {
    color: #059669 !important;
}

/* Botón cerrar en modo claro */
.light #scheduleMessageModal .btn-close-white,
.light #viewScheduledModal .btn-close-white {
    filter: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.975 3.35 1.275-1.275 5.75 5.75 5.75-5.75 1.275 1.275-5.75 5.75 5.75 5.75-1.275 1.275-5.75-5.75-5.75 5.75-1.275-1.275 5.75-5.75-5.75-5.75z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
}