/* ============================================================ MESIFY — COMPONENTES COMPARTIDOS components.css — importar DESPUÉS de theme.css Requiere que tenga clase .theme-dark o .theme-light ============================================================ */ /* ===== BOTONES ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: 10px var(--space-md); min-height: 44px; font-family: var(--font-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); border: none; cursor: pointer; text-decoration: none; transition: filter var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; user-select: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .btn:active:not(:disabled) { transform: scale(0.97); } .btn-primary { background-color: var(--color-accent); color: var(--color-accent-text); } .btn-primary:hover:not(:disabled) { filter: brightness(1.1); } .btn-ghost { background-color: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); } .btn-ghost:hover:not(:disabled) { background-color: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); } .btn-danger { background-color: var(--color-danger); color: #ffffff; } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); } .btn-sm { min-height: 32px; padding: 6px var(--space-sm); font-size: var(--font-size-xs); border-radius: var(--radius-sm); } .btn-lg { min-height: 52px; padding: 14px var(--space-lg); font-size: var(--font-size-md); border-radius: var(--radius-lg); } /* ===== CARDS ===== */ .ds-card { background-color: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: var(--space-md); transition: box-shadow var(--transition-base); } .ds-card-elevated { background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: var(--space-md); } /* ===== BADGES DE ESTADO ===== */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.5px; text-transform: uppercase; } .badge-pending { background-color: var(--color-warning-soft); color: var(--color-warning); } .badge-preparing { background-color: var(--color-accent-soft); color: var(--color-accent); } .badge-ready { background-color: var(--color-success-soft); color: var(--color-success); } .badge-delivered { background-color: var(--color-border); color: var(--color-text-secondary); } .badge-danger { background-color: var(--color-danger-soft); color: var(--color-danger); } /* ===== INPUTS ===== */ .ds-input { width: 100%; padding: 10px var(--space-md); font-family: var(--font-base); font-size: var(--font-size-sm); color: var(--color-text-primary); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: 44px; } .ds-input::placeholder { color: var(--color-text-disabled); } .ds-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* ===== TOGGLE DE TEMA ===== */ .theme-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background-color: transparent; color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); font-size: 18px; flex-shrink: 0; } .theme-toggle:hover { background-color: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); } /* Ícono: muestra sol en dark, luna en light */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-light .theme-toggle .icon-sun { display: block; } .theme-light .theme-toggle .icon-moon { display: none; } /* ===== TOASTS ===== */ .ds-toast-container { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; } @media (max-width: 768px) { .ds-toast-container { right: var(--space-md); left: var(--space-md); bottom: 80px; } } .ds-toast { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-primary); pointer-events: auto; animation: toastIn 200ms ease forwards; display: flex; align-items: center; gap: var(--space-sm); max-width: 360px; } .ds-toast.success { border-left: 3px solid var(--color-success); } .ds-toast.warning { border-left: 3px solid var(--color-warning); } .ds-toast.danger { border-left: 3px solid var(--color-danger); } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== SEPARADORES ===== */ .ds-divider { height: 1px; background-color: var(--color-border); border: none; margin: var(--space-md) 0; } /* ===== TIPOGRAFÍA UTILITARIA ===== */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .text-xs { font-size: var(--font-size-xs); } .text-sm { font-size: var(--font-size-sm); } .text-md { font-size: var(--font-size-md); } .text-lg { font-size: var(--font-size-lg); } .text-xl { font-size: var(--font-size-xl); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); }