/* Estilos para el sistema de contactos locales */

:root {
    --urutienda: #ffe802;
    --urutienda-hover: #e6d102;
    --urutienda-text: #000000;
}

.dark {
    --urutienda: #ffe802;
    --urutienda-hover: #e6d102;
    --urutienda-text: #000000;
}

/* Badges en modo oscuro - texto negro */
.dark .status-nuevo {
    color: #67a4fe;
}

.dark .status-contactado {
    color: #40e598;
}

.dark .status-cliente {
    color: #ab85f1;
}

.dark .status-test {
    color: #efa568;
}

/* Badges de estado para contactos */
.contact-status-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    transition: all 0.2s ease;
    backdrop-filter: blur(2px);
}

.contact-status-badge:hover {
    transform: scale(1.05);
    backdrop-filter: blur(4px);
}

.status-nuevo {
    background-color: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.5);
}

.status-contactado {
    background-color: rgba(25, 135, 84, 0.15);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.5);
}

.status-cliente {
    background-color: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.5);
}

.status-test {
    background-color: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
    border: 1px solid rgba(253, 126, 20, 0.5);
}

/* Ajustes para badges en sidebar */
.chat-item .contact-status-badge {
    margin-top: 2px;
    font-size: 0.65rem;
    padding: 1px 6px;
}

/* Ajustes para badges en header de conversación */
.conversation-header .contact-status-badge {
    margin-left: 8px;
    font-size: 0.7rem;
    padding: 2px 8px;
}

.contact-header-name-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-header-name-container h3 {
    margin: 0;
    flex: 0 1 auto;
}

#contact-status-badge-container {
    flex: 0 0 auto;
}

/* Botón de agregar contacto en sidebar */
.add-contact-btn {
    background-color: var(--urutienda);
    color: #212529;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-contact-btn:hover {
    background-color: var(--urutienda-hover);
    transform: translateY(-1px);
}

/* Estilos para formularios de contacto */
.contact-form-group {
    margin-bottom: 1rem;
}

.contact-form-label {
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
    display: block;
}

.contact-form-input {
    width: 100%;
    padding: 8px 12px;
    background-color: #495057;
    border: 1px solid #6c757d;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.contact-form-input:focus {
    outline: none;
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.25);
}

.contact-form-select {
    width: 100%;
    padding: 8px 12px;
    background-color: #495057;
    border: 1px solid #6c757d;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.contact-form-select:focus {
    outline: none;
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.25);
}

/* Contenedor de código de país + número */
.phone-input-container {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.country-code-select {
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 120px;
    width: auto;
    text-align: center;
    font-size: 13px;
}

.phone-number-input {
    flex: 1;
    min-width: 0; /* Permite que se contraiga si es necesario */
}

/* Validación visual */
.is-valid {
    border-color: #198754 !important;
}

.is-invalid {
    border-color: #dc3545 !important;
}

.form-validation-text {
    font-size: 0.75rem;
    margin-top: 4px;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: #dc3545 !important;
}

/* Listado de contactos sin conversaciones activas */
.inactive-contacts-section {
    border-top: 1px solid #444;
    margin-top: 12px;
    padding-top: 12px;
}

.inactive-contacts-header {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 12px;
}

.chat-item.inactive-contact {
    opacity: 0.7;
}

.chat-item.inactive-contact:hover {
    opacity: 1;
}

/* Modal de edición de contacto */
#editContactModal .modal-content {
    background-color: #343a40;
    border: 1px solid #495057;
}

#editContactModal .modal-header {
    border-bottom-color: #495057;
}

#editContactModal .modal-footer {
    border-top-color: #495057;
}

/* Modal de agregar contacto - Estilo moderno siguiendo el diseño de macros */
#addContactModal .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;
    color: #ffffff !important;
}

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

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

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

#addContactModal .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;
}

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

/* Form controls modernos para el modal de crear contacto */
#addContactModal .contact-form-input,
#addContactModal .contact-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 !important;
    font-size: 0.875rem !important;
}

#addContactModal .contact-form-input:focus,
#addContactModal .contact-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;
}

#addContactModal .contact-form-input::placeholder {
    color: #6b7280 !important;
}

#addContactModal .contact-form-label {
    color: #e5e7eb !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

#addContactModal .contact-form-label i {
    color: var(--urutienda, #ffe802) !important;
    font-size: 0.875rem !important;
}

#addContactModal .contact-form-group {
    margin-bottom: 1.5rem;
}

/* Estilos para el contenedor de teléfono */
#addContactModal .phone-input-container {
    display: flex;
    gap: 0.5rem;
}

#addContactModal .country-code-select {
    flex: 0 0 120px;
}

#addContactModal .phone-number-input {
    flex: 1;
}

/* Mensajes automáticos */
#addContactModal .auto-messages-options {
    background-color: rgba(26, 26, 26, 0.5) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    margin-top: 0.5rem !important;
}

#addContactModal .auto-message-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#addContactModal .auto-message-option:last-child {
    margin-bottom: 0;
}

#addContactModal .form-check-input {
    accent-color: var(--urutienda, #ffe802) !important;
    margin-top: 0.2rem;
}

#addContactModal .form-check-label {
    flex: 1;
    cursor: pointer;
    color: #e5e7eb !important;
}

#addContactModal .form-check-label strong {
    color: #ffffff !important;
    font-weight: 500 !important;
}

#addContactModal .form-validation-text {
    color: #9ca3af !important;
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
}

#addContactModal .form-validation-text.text-muted {
    color: #6b7280 !important;
}

/* Textos específicos para mensajes automáticos - modo oscuro más claro */
#addContactModal .auto-message-option .text-muted {
    color: #d1d5db !important;
}

#addContactModal .form-validation-text.text-info {
    color: #60a5fa !important;
}

/* Botones modernos */
#addContactModal .btn {
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#addContactModal .btn-success {
    background-color: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
}

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

#addContactModal .btn-secondary {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    color: #e5e7eb !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
}

#addContactModal .btn-secondary:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(42, 42, 42, 0.3) !important;
}

/* Estilos para modo claro */
.light #editContactModal .modal-content,
.light #addContactModal .modal-content {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Modal header y footer en modo claro */
.light #addContactModal .modal-header {
    border-bottom: 1px solid #dee2e6 !important;
}

.light #addContactModal .modal-body {
    color: #212529 !important;
}

.light #addContactModal .modal-footer {
    border-top: 1px solid #dee2e6 !important;
}

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

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

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

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

.light #addContactModal .contact-form-input::placeholder {
    color: #6c757d !important;
}

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

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

/* Mensajes automáticos en modo claro */
.light #addContactModal .auto-messages-options {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

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

.light #addContactModal .form-check-label strong {
    color: #212529 !important;
}

.light #addContactModal .form-validation-text {
    color: #6c757d !important;
}

.light #addContactModal .form-validation-text.text-muted {
    color: #6c757d !important;
}

.light #addContactModal .form-validation-text.text-info {
    color: #0d6efd !important;
}

/* Botones en modo claro */
.light #addContactModal .btn-secondary {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

.light #addContactModal .btn-secondary:hover {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Solo mantener los estilos para editContactModal ya que addContactModal tiene sus propios estilos modernos */
.light #editContactModal .modal-header {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-bottom-color: #dee2e6;
}

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

.light #editContactModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-top-color: #dee2e6;
}

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

/* Inputs en modo claro - solo para editContactModal */
.light #editContactModal .contact-form-input {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ced4da;
}

.light #editContactModal .contact-form-input:focus {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.25);
    background-color: #ffffff !important;
    color: #212529 !important;
}

.light #editContactModal .contact-form-select {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ced4da;
}

.light #editContactModal .contact-form-select:focus {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.25);
    background-color: #ffffff !important;
    color: #212529 !important;
}

.light #editContactModal .contact-form-select option {
    background-color: #ffffff !important;
    color: #212529 !important;
}

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

.light #editContactModal .form-validation-text {
    color: #6c757d !important;
}

.light #editContactModal .form-validation-text.text-muted {
    color: #6c757d !important;
}

/* Botón close en modo claro */
.light #editContactModal .btn-close-white,
.light #addContactModal .btn-close-white,
.light #sendAltaModal .btn-close-white,
.light #deleteContactModal .btn-close-white,
.light #attachmentModal .btn-close-white,
.light #contactModal .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;
}

/* Texto de placeholders en modo claro */
.light #editContactModal .contact-form-input::placeholder {
    color: #6c757d !important;
    opacity: 0.7;
}

/* Estilos para mensajes automáticos */
.auto-messages-options {
    padding: 15px;
    background-color: rgba(108, 117, 125, 0.1);
    border-radius: 8px;
    border: 1px solid #495057;
    margin-top: 8px;
}

.auto-message-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.auto-message-option .form-check-input {
    margin-top: 4px;
    accent-color: #fd7e14;
}

.auto-message-option .form-check-label {
    flex: 1;
    cursor: pointer;
}

.auto-message-option .form-check-label strong {
    color: #fd7e14;
}

/* Modo claro - mensajes automáticos */
.light .auto-messages-options {
    background-color: rgba(248, 249, 250, 0.8);
    border: 1px solid #dee2e6;
}

.light .auto-message-option .form-check-label strong {
    color: #fd7e14 !important;
}

.light .auto-message-option .form-check-label {
    color: #212529 !important;
}

.light .auto-message-option .form-check-label small {
    color: #6c757d !important;
}

/* === MODAL DE EDITAR CONTACTO - ESTÉTICA MODERNA === */

/* Modal principal */
#editContactModal .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;
}

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

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

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

#editContactModal .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;
}

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

/* Form controls modernos */
#editContactModal .contact-form-input,
#editContactModal .contact-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;
}

#editContactModal .contact-form-input:focus,
#editContactModal .contact-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;
}

#editContactModal .contact-form-input::placeholder {
    color: #6b7280 !important;
}

/* Labels modernos */
#editContactModal .contact-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;
}

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

/* Botones modernos sin íconos */
#editContactModal .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);
}

#editContactModal .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);
}

#editContactModal .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;
}

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

/* Textos de validación y ayuda */
#editContactModal .form-validation-text {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
}

/* === MODO CLARO === */
.light #editContactModal .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 #editContactModal .modal-header,
.light #editContactModal .modal-body,
.light #editContactModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #e4e6ea !important;
}

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

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

.light #editContactModal .contact-form-input,
.light #editContactModal .contact-form-select {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e4e6ea !important;
}

.light #editContactModal .contact-form-input:focus,
.light #editContactModal .contact-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 #editContactModal .contact-form-input::placeholder {
    color: #667781 !important;
}

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

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

.light #editContactModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

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

.light #editContactModal .form-validation-text {
    color: #667781 !important;
}

/* === MODAL DE ENVIAR ALTA - ESTÉTICA MODERNA === */

/* Modal principal */
#sendAltaModal .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;
}

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

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

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

#sendAltaModal .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;
}

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

/* Form controls modernos */
#sendAltaModal .form-control {
    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;
}

#sendAltaModal .form-control: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;
}

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

#sendAltaModal .form-control[readonly] {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    color: #ffffff !important;
    opacity: 0.8;
}

/* Labels modernos */
#sendAltaModal .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;
}

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

/* Botones modernos sin íconos */
#sendAltaModal .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);
}

#sendAltaModal .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);
}

#sendAltaModal .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;
}

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

/* Botones de radio modernos */
#sendAltaModal .btn-group {
    gap: 0.5rem;
}

#sendAltaModal .btn-outline-secondary {
    background: var(--tertiary-dark, #1a1a1a) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease;
}

#sendAltaModal .btn-outline-secondary:hover {
    background: var(--border-dark, #2a2a2a) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #ffffff !important;
}

#sendAltaModal .btn-check:checked + .btn-outline-secondary {
    background: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    font-weight: 600;
}

/* Checkbox moderno */
#sendAltaModal .form-check-input {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    border-radius: 0.25rem !important;
}

#sendAltaModal .form-check-input:checked {
    background-color: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
}

#sendAltaModal .form-check-label {
    color: #ffffff !important;
    font-weight: 500;
}

/* Textos de ayuda */
#sendAltaModal .text-muted,
#sendAltaModal small.text-muted {
    color: #9ca3af !important;
}

/* Hr separador */
#sendAltaModal hr {
    border-color: var(--border-dark, #2a2a2a) !important;
}

/* === MODO CLARO === */
.light #sendAltaModal .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 #sendAltaModal .modal-header,
.light #sendAltaModal .modal-body,
.light #sendAltaModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #e4e6ea !important;
}

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

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

.light #sendAltaModal .form-control {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e4e6ea !important;
}

.light #sendAltaModal .form-control: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 #sendAltaModal .form-control::placeholder {
    color: #667781 !important;
}

.light #sendAltaModal .form-control[readonly] {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

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

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

.light #sendAltaModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

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

.light #sendAltaModal .btn-outline-secondary {
    background: #f8f9fa !important;
    border: 1px solid #e4e6ea !important;
    color: #212529 !important;
}

.light #sendAltaModal .btn-outline-secondary:hover {
    background: #ffffff !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #212529 !important;
}

.light #sendAltaModal .btn-check:checked + .btn-outline-secondary {
    background: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
}

.light #sendAltaModal .form-check-input {
    background-color: #ffffff !important;
    border: 1px solid #e4e6ea !important;
}

.light #sendAltaModal .form-check-input:checked {
    background-color: var(--urutienda, #ffe802) !important;
    border-color: var(--urutienda, #ffe802) !important;
}

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

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

.light #sendAltaModal hr {
    border-color: #e4e6ea !important;
}

/* === MODAL DE ELIMINAR CONTACTO - ESTÉTICA MODERNA === */

/* Modal principal */
#deleteContactModal .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;
}

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

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

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

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

#deleteContactModal .modal-title i {
    color: #dc2626 !important;
    font-size: 1rem !important;
}

/* Contenido del modal */
#deleteContactModal .modal-body h5 {
    color: #ffffff !important;
    font-weight: 600;
}

#deleteContactModal .modal-body .text-muted {
    color: #9ca3af !important;
}

#deleteContactModal .modal-body i.bi-exclamation-triangle {
    color: #dc2626 !important;
}

/* Botones modernos sin íconos */
#deleteContactModal .btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !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(220, 38, 38, 0.3);
}

#deleteContactModal .btn-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

#deleteContactModal .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;
}

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

/* === MODO CLARO === */
.light #deleteContactModal .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 #deleteContactModal .modal-header,
.light #deleteContactModal .modal-body,
.light #deleteContactModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #e4e6ea !important;
}

.light #deleteContactModal .modal-title {
    color: #dc2626 !important;
}

.light #deleteContactModal .modal-title i {
    color: #dc2626 !important;
}

.light #deleteContactModal .modal-body h5 {
    color: #212529 !important;
}

.light #deleteContactModal .modal-body .text-muted {
    color: #667781 !important;
}

.light #deleteContactModal .modal-body i.bi-exclamation-triangle {
    color: #dc2626 !important;
}

.light #deleteContactModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

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

/* === MODAL DE ENVIAR CONTACTO - ESTÉTICA MODERNA === */

/* Modal principal */
#contactModal .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;
}

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

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

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

#contactModal .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;
}

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

/* Encabezado de sección */
#contactModal h6 {
    color: #ffffff !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

#contactModal h6 i {
    color: var(--urutienda, #ffe802) !important;
}

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

/* Input de búsqueda */
#contactModal .input-group-text {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    color: #9ca3af !important;
}

#contactModal .form-control {
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border: 1px solid var(--border-dark, #2a2a2a) !important;
    color: #ffffff !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}

#contactModal .form-control: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;
}

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

/* Lista de contactos */
#contactModal .contact-list-container {
    border: 1px solid var(--border-dark, #2a2a2a);
    border-radius: 0.5rem;
    background: var(--tertiary-dark, #1a1a1a);
}

#contactModal .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-dark, #2a2a2a) !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

#contactModal .list-group-item:last-child {
    border-bottom: none !important;
}

#contactModal .list-group-item:hover {
    background: rgba(255, 232, 2, 0.1) !important;
    transform: translateX(2px);
}

#contactModal .list-group-item.active {
    background: rgba(255, 232, 2, 0.2) !important;
    border-left: 3px solid var(--urutienda, #ffe802) !important;
}

#contactModal .contact-avatar .rounded-circle {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    font-weight: 600;
}

#contactModal .fw-bold {
    color: #ffffff !important;
}

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

/* Contacto seleccionado */
#contactModal #selectedContactPreview {
    background: rgba(255, 232, 2, 0.1) !important;
    border: 1px solid rgba(255, 232, 2, 0.3) !important;
    border-left: 4px solid var(--urutienda, #ffe802) !important;
    border-radius: 0.5rem;
}

#contactModal #selectedContactPreview h6 {
    color: var(--urutienda, #ffe802) !important;
}

#contactModal #selectedContactPreview .contact-avatar .rounded-circle {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
}

/* Indicador de selección */
#contactModal .contact-select-indicator {
    color: var(--urutienda, #ffe802) !important;
}

/* Botones modernos sin íconos */
#contactModal .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);
}

#contactModal .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);
}

#contactModal .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;
}

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

/* Scrollbar moderno */
#contactModal .contact-list-container::-webkit-scrollbar {
    width: 4px;
}

#contactModal .contact-list-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

#contactModal .contact-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 232, 2, 0.3);
    border-radius: 2px;
}

#contactModal .contact-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 232, 2, 0.5);
}

/* === MODO CLARO === */
.light #contactModal .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 #contactModal .modal-header,
.light #contactModal .modal-body,
.light #contactModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #e4e6ea !important;
}

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

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

.light #contactModal h6 {
    color: #212529 !important;
}

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

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

.light #contactModal .input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #e4e6ea !important;
    color: #667781 !important;
}

.light #contactModal .form-control {
    background-color: #ffffff !important;
    border: 1px solid #e4e6ea !important;
    color: #212529 !important;
}

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

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

.light #contactModal .contact-list-container {
    border: 1px solid #e4e6ea;
    background: #f8f9fa;
}

.light #contactModal .list-group-item {
    color: #212529 !important;
    border-bottom: 1px solid #e4e6ea !important;
}

.light #contactModal .list-group-item:hover {
    background: rgba(255, 232, 2, 0.1) !important;
}

.light #contactModal .list-group-item.active {
    background: rgba(255, 232, 2, 0.2) !important;
    border-left: 3px solid var(--urutienda, #ffe802) !important;
}

.light #contactModal .fw-bold {
    color: #212529 !important;
}

.light #contactModal #selectedContactPreview {
    background: rgba(255, 232, 2, 0.1) !important;
    border: 1px solid rgba(255, 232, 2, 0.3) !important;
}

.light #contactModal #selectedContactPreview h6 {
    color: #212529 !important;
}

.light #contactModal .contact-select-indicator {
    color: var(--urutienda, #ffe802) !important;
}

.light #contactModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

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

.light #contactModal .contact-list-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.light #contactModal .contact-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 232, 2, 0.4);
}

.light #contactModal .contact-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 232, 2, 0.6);
}

/* === MODAL DE ENVIAR ARCHIVOS - ESTÉTICA MODERNA === */

/* Modal principal */
#attachmentModal .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;
}

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

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

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

#attachmentModal .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;
}

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

/* Form controls modernos */
#attachmentModal .form-control {
    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;
}

#attachmentModal .form-control: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;
}

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

/* Input de archivo moderno */
#attachmentModal input[type="file"] {
    padding: 0.5rem !important;
}

#attachmentModal input[type="file"]::file-selector-button {
    background: var(--urutienda, #ffe802) !important;
    color: #000000 !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
    margin-right: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
}

#attachmentModal input[type="file"]::file-selector-button:hover {
    background: var(--urutienda-hover, #e6d102) !important;
}

/* Textarea moderno */
#attachmentModal textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Labels modernos */
#attachmentModal .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;
}

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

/* Progress bar moderno */
#attachmentModal .progress {
    height: 0.5rem;
    background-color: var(--tertiary-dark, #1a1a1a) !important;
    border-radius: 0.25rem;
    border: 1px solid var(--border-dark, #2a2a2a);
}

#attachmentModal .progress-bar {
    background: linear-gradient(90deg, var(--urutienda, #ffe802) 0%, var(--urutienda-hover, #e6d102) 100%) !important;
    border-radius: 0.25rem;
    transition: width 0.3s ease;
}

/* Botones modernos sin íconos */
#attachmentModal .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);
}

#attachmentModal .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);
}

#attachmentModal .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;
}

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

/* === MODO CLARO === */
.light #attachmentModal .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 #attachmentModal .modal-header,
.light #attachmentModal .modal-body,
.light #attachmentModal .modal-footer {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #e4e6ea !important;
}

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

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

.light #attachmentModal .form-control {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #e4e6ea !important;
}

.light #attachmentModal .form-control: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 #attachmentModal .form-control::placeholder {
    color: #667781 !important;
}

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

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

.light #attachmentModal .progress {
    background-color: #f8f9fa !important;
    border: 1px solid #e4e6ea;
}

.light #attachmentModal .btn-secondary {
    background: #667781 !important;
    border-color: #667781 !important;
    color: #ffffff !important;
}

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

/* Responsive */
@media (max-width: 768px) {
    #attachmentModal .modal-dialog {
        margin: 0.5rem !important;
    }
    
    #attachmentModal .modal-body {
        padding: 1rem !important;
    }
    
    #attachmentModal .modal-header,
    #attachmentModal .modal-footer {
        padding: 1rem !important;
    }
}