/* Dynamic Styles - CSS Custom Properties and Utility Classes */

/* Progress Bar Utilities */
.progress-bar {
    --progress-width: 0%;
    width: var(--progress-width);
}

/* Background Color Utilities */
.bg-dynamic {
    --bg-color: transparent;
    background-color: var(--bg-color) !important;
}

.bg-gradient-dynamic {
    --gradient-colors: linear-gradient(to bottom, transparent);
    background: var(--gradient-colors) !important;
}

/* Color Preview Utilities */
.color-preview {
    --preview-color: #888888;
    background-color: var(--preview-color) !important;
}

/* Modal Animation States */
.modal-content {
    --modal-x: 0px;
    --modal-y: 0px;
    --modal-scale: 1;
    --modal-opacity: 1;
    transform: translate(var(--modal-x), var(--modal-y)) scale(var(--modal-scale));
    opacity: var(--modal-opacity);
    transition: all 0.3s ease;
}

.modal-content.modal-entering {
    --modal-scale: 0.5;
    --modal-opacity: 0;
}

/* Animation States */
.fade-out-slide {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

/* Display Utilities */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }

/* Cursor Utilities */
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Calendar Event Styles */
.event-item {
    --event-bg: rgba(255, 255, 255, 0.1);
    --event-border: #888;
    --event-color: white;
    background: var(--event-bg);
    border-left: 4px solid var(--event-border);
    color: var(--event-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.event-item.event-festivo {
    --event-bg: #ef4444;
    --event-border: #b91c1c;
}

.event-item.event-inhabil {
    --event-bg: #a855f7;
    --event-border: #7e22ce;
}

.event-item.event-ciclo {
    --event-bg: #10b981;
    --event-border: #059669;
}

.event-item .event-type {
    opacity: 0.8;
}

/* Error Page Styles */
.error-page {
    font-family: sans-serif;
    text-align: center;
    padding: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8fafc;
}

.error-title {
    color: #ef4444;
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

.error-link {
    color: #3b82f6;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 2px solid #3b82f6;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.error-link:hover {
    background: #3b82f6;
    color: white;
}

/* WhatsApp Icon Fix */
.btn-whatsapp svg {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 20px !important;
    height: 20px !important;
    color: white !important;
    fill: currentColor !important;
}

/* Ensure all social button icons render properly */
.btn-social svg,
.btn-call-large svg {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
/* Telegram Icon Fix */
.btn-telegram svg {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 20px !important;
    height: 20px !important;
}

/* Ensure both social icons maintain proper sizing */
.btn-social svg {
    flex-shrink: 0 !important;
    max-width: 20px !important;
    max-height: 20px !important;
}
/* Temporary passwords display */
.temp-password-display {
    background: var(--color-bg-input);
    border: 1px solid var(--color-warning, #ff7707d0);
    border-radius: 8px;
    padding: 12px;
}

.temp-password-card {
    border-left: 4px solid var(--color-warning, #ffc107);
}

.temp-password-card .font-mono {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
    user-select: all;
    cursor: pointer;
}

.temp-password-card .font-mono:hover {
    background-color: var(--color-primary-light, #e3f2fd);
}

/* Animation for removing cards */
.animate-slide-out {
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease-out;
}
/* Copy button styles */
.copy-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    transform: scale(1.05);
}

.copy-btn:active {
    transform: scale(0.95);
}

/* Flex utilities for password display */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.gap-2 {
    gap: 8px;
}

.flex-1 {
    flex: 1;
}
/* Locked user cards */
.locked-user-card {
    border-left: 4px solid var(--color-danger, #dc3545);
}

.border-danger {
    border-color: var(--color-danger, #dc3545) !important;
}

.text-warning {
    color: var(--color-warning, #ffc107) !important;
}

.text-danger {
    color: var(--color-danger, #dc3545) !important;
}