/* Paleta de colores del sistema basada en el sidebar */

:root {
    /* Colores principales */
    --primary-color: #2c3e50;      /* Azul oscuro - fondo principal */
    --secondary-color: #34495e;    /* Azul medio - fondos secundarios */
    --accent-color: #3498db;       /* Azul claro - elementos activos/hover */
    --dark-primary: #1f5f8b;        /* Darker shade of primary for gradients */
    --accent-color-dark: #2980b9;   /* Darker shade of accent color for gradients */
    --accent-color-light: #90caf9; /* Lighter shade of accent for components like switch backgrounds */
    
    /* Colores de texto */
    --text-primary: #ecf0f1;       /* Texto principal claro */
    --text-secondary: #bdc3c7;     /* Texto secundario */
    --text-dark: #2c3e50;          /* Texto oscuro para fondos claros */
    
    /* Colores de estado */
    --success-color: #27ae60;      /* Verde para éxito */
    --warning-color: #f39c12;      /* Naranja para advertencias */
    --error-color: #e74c3c;        /* Rojo para errores */
    --info-color: #3498db;         /* Azul para información */
    --warning-color-dark: #e67e22; /* Darker shade of warning color */
    --error-color-dark: #c0392b;   /* Darker shade of error color */
    --success-color-dark: #229954; /* Darker shade of success color */
    --success-color-light: #d4edda; /* Light shade of success color */
    --error-color-light: #f8d7da;   /* Light shade of error color */
    
    /* Colores de hover */
    --hover-primary: #4a5f7a;      /* Hover para elementos primarios */
    --hover-secondary: #5a6f8a;    /* Hover para elementos secundarios */
    
    /* Colores de fondo */
    --bg-primary: #2c3e50;         /* Fondo principal */
    --bg-secondary: #34495e;       /* Fondo secundario */
    --bg-light: #ecf0f1;           /* Fondo claro */
    --bg-white: #ffffff;           /* Fondo blanco */
    --background-medium: #f8f9fa;  /* Fondo medio para secciones */
    
    /* Colores de borde */
    --border-color: #34495e;       /* Color de bordes */
    --border-light: #bdc3c7;       /* Bordes claros */
    --border-medium: #bdc3c7;      /* Bordes medios para elementos como sin-horarios */
    
    /* Sombras */
    --shadow-light: rgba(0,0,0,0.1);
    --shadow-medium: rgba(0,0,0,0.2); /* Defined shadow-medium */
    --shadow-dark: rgba(0,0,0,0.3);
}

/* Clases de utilidad para aplicar colores rápidamente */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-white { background-color: var(--bg-white) !important; }
.bg-accent { background-color: var(--accent-color) !important; }

.border-primary { border-color: var(--border-color) !important; }
.border-light { border-color: var(--border-light) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* Botones base - sin colores específicos para permitir subclases */
.btn, .waves-effect.waves-light.btn {
    /* Sin colores específicos - se definen en las subclases */
}

/* Botones estándar (sin subclases específicas) */
.btn:not(.btn-OK):not(.btn-Cancel):not(.btn-cancelar):not(.btn-cerrar):not(.btn-cancel):not(.btn-close):not(.btn-aceptar):not(.btn-guardar):not(.btn-save):not(.btn-ok) {
    background-color: #3498db !important;
    color: #ecf0f1 !important;
}

.btn:not(.btn-OK):not(.btn-Cancel):not(.btn-cancelar):not(.btn-cerrar):not(.btn-cancel):not(.btn-close):not(.btn-aceptar):not(.btn-guardar):not(.btn-save):not(.btn-ok):hover {
    background-color: #4a5f7a !important;
}

/* Sobrescribir colores para botones secundarios */
.btn.secondary, .waves-effect.waves-light.btn.secondary {
    background-color: #34495e !important;
    color: #ecf0f1 !important;
}

.btn.secondary:hover, .waves-effect.waves-light.btn.secondary:hover {
    background-color: #4a5f7a !important;
}

/* Botones de cancelar/cerrar - solo marco */
.btn-cancelar {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border: 2px solid #2c3e50 !important;
    box-shadow: none !important;
}

.btn-cancelar:hover {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    border-color: #2c3e50 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Otros botones de cancelar/cerrar - sólidos */
.btn-cerrar, .btn-cancel, .btn-close, .btn-Cancel {
    background-color: #3498db !important;
    color: #ecf0f1 !important;
    border: none !important;
    padding: 0 16px !important;
    line-height: 36px !important;
    height: 36px !important;
    text-align: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.btn-cerrar:hover, .btn-cancel:hover, .btn-close:hover, .btn-Cancel:hover {
    background-color: #e74c3c !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* Botones de aceptar/guardar - sólidos */
.btn-aceptar, .btn-guardar, .btn-save, .btn-ok, .btn-OK {
    background-color: #3498db !important;
    color: #ecf0f1 !important;
    border: none !important;
    padding: 0 16px !important;
    line-height: 36px !important;
    height: 36px !important;
    text-align: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.btn-aceptar:hover, .btn-guardar:hover, .btn-save:hover, .btn-ok:hover, .btn-OK:hover {
    background-color: #27ae60 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* Asegurar que los botones de agregar usen la paleta correcta */
.agregar-btn {
    background-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.agregar-btn:hover {
    background-color: var(--hover-primary) !important;
}

/* Botones de cantidad */
.cantidad-btn {
    background-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.cantidad-btn:hover {
    background-color: var(--hover-primary) !important;
}

/* Botones de cantidad para combos */
.btn-cantidad-combo {
    background-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.btn-cantidad-combo:hover {
    background-color: var(--hover-primary) !important;
}

/* Productos combo */
.producto-combo {
    border: 2px solid var(--primary-color) !important;
}

.producto-combo .agregar-btn {
    background-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

.producto-combo .agregar-btn:hover {
    background-color: var(--hover-primary) !important;
}

/* Productos normales */
.producto-card:not(.producto-combo) {
    border: 2px solid var(--accent-color) !important;
}

.producto-card:not(.producto-combo) .agregar-btn {
    background-color: var(--accent-color) !important;
    color: var(--text-primary) !important;
}

.producto-card:not(.producto-combo) .agregar-btn:hover {
    background-color: var(--hover-primary) !important;
}

/* Combo badge */
.combo-badge {
    background-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
} 
/* Categoría activa */
.categoria-item.active {
    background: var(--primary-color) !important;
    color: var(--text-primary) !important;
    border-color: var(--primary-color) !important;
}

/* Precio de Producto */
.producto-precio {
    color: var(--accent-color) !important;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0 0 0;
    padding: 0;
}

/* Total del Producto en el Resumen */
.producto-total {
    color: var(--accent-color) !important;
    font-weight: bold;
    flex: 1;
    text-align: right;
    min-width: 90px;
    font-size: 14px;
}